HTML page Basic structure with css float

1. This is overview. (구조도)
html_structure2

2. And this is with css comments.
To put 2 elements side by side, they have float:left;
And To stop float after theses, the parent has overflow:hidden;
But instead you can use clear: both; for footer and content-wrap, to stop float.

(구조도에 css 설명 설명 첨가. 2개의 요소를 옆으로 나란히 놓기 위해,
그 2개가 각각 float:left;로 스타일하였구요.
이대로 마치면 그 다음 요소도 옆으로 오기 때문에 이것을 방지해야 하는데요.
부모에 overflow:hidden;를 주면 그 역할을 해줍니다.
혹은 다른 방법으로 다음에 오는 요소에 clear: both;를 줄 수도 있습니다)

If you didn’t do that. Footer’s follow contents area. Like this link.
(이것이 안해줄 경우 푸터가 컨텐츠의 일부인 것처럼 올라와 붙게 되지요. 버튼 링크 처럼요)

Without overfolow: hidden;

html_structure2-2

3. Here is source code. (소스 코드)

Preview

<!doctype html>
<html>
<head>
<meta charset="utf-8">
    <title>Basic Layout Structure</title>
    <style>        
        body {
            width: 980px;
            margin: 0 auto; 
        }
        #logo{
            width: 150px;	
            float: left;	   	
	}
 
	#navigation{
	   width: 830px;
	   float: left;	 
	}
 
	#header-wrap{
  	    overflow: hidden;
	}
 
 
	#sidebar {
            width: 180px;
            float: left;
        }
 
        #content {
            width: 800px;
            float: left;
        }
 
        #content-wrap { 
  	  overflow: hidden; 
	}
    </style>
</head>
<body>
    <div id="header-wrap">
     <div id="logo"> 
        <h1>Logo</h1>
     </div>
 
     <div id="navigation">
        <h3>menu1 menu2 menu3</h3>
     </div>
    </div>
 
    <div id="content-wrap">
        <div id="sidebar">
            <h3>sidebar</h3>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
        </div>
        <div id="content">
            <h3>main content title</h3>
            <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
    </div>
    <div id="footer"><h3>Footer</h3></div>
</body>
</html>

HTML page Basic structure with css float