"Front Siege Lion Road" CSS two column layout--right fixed width, left adaptive

Did a cat factory very classic front-end pen test questions, solved the two columns have been on the understanding of the layout of too few problems.

The title requirement is right aside fixed width 200px, left content adaptive.

Originally directly with float, found aside will always be "squeeze" to content below, footer above position, debug for a long time finally saw Daniel's blog to realize this problem.

The basic idea is :

①content width is not set, let it default auto, set the height (good-looking)

②aisde on the right. Float:right, set fixed width 200px

③ Focus. Set the content of the aside direction (right) on the Maigin, and margin value to be enough to lay down aside

④, is also a deceptive place ... The body represents aside Div refers to the content of the Div front, so that the browser rendering content when it is just "stacked" to the left margin of aside, perfect side-by.

Effect Chart

Implementation Code

(different screen different browser effect, not many browser compatibility, only for reference)

body{margin:0;
Padding:0 5px;
	} #header {width:100%;
	height:18%;
	Border:green 1px solid;
	margin-bottom:1%;
	} #logo {width:80px;
	height:80px;
	border:red 1px solid;
	Float:left;
	margin-top:20px;
margin-left:20px;
	} #username {width:200px;
	height:30px;
	Border:black 1px solid;
	Float:right;
	margin-top:75px;
	margin-right:20px;
Text-align:right;
	} #main {Overflow:hidden;} #content {height:430px;
	Border:blue 1px solid;
margin-right:240px;
	} #aside {width:200px;
	height:30px;
	border:red 1px solid;
Float:right;
	} #footer {width:100%;
	height:9%;
	Border:black 1px solid;
	Clear:both;
margin-top:1%; }