html layout ex1 (float 적용)

 

기본 상태로는 wrap1의 크기가 0,0정도의 수준으로 아래 footer가 위치하게 되면 정렬 문제가 발생한다. aside1이 section1보다 길 경우 section1에 footer1가 부터 올라간 형태가 된다.

wrap1에 'overflow: hidden'을 적용하면 크기가 자식들 내용만큼 커져서 아래에 footer가 정상 위치에 오게된다. 내부적으로 자식들을 잘라내기 전에 비정상적이던 영역 크기를 먼저 맞추는 작업이 진행 되는 것으로 보인다.

 

<style>
	body1{
		width: 500px;
		margin: auto;
	}
	#header1 {
		background-color: darkorange;
	}
	#wrap1 {
		background-color: aquamarine;
		overflow: hidden;
	}
	#aside1 {
		width: 200px;
		background-color: cornflowerblue;
		float: left;
	}
	#section1 {
		width: 300px;
		background-color: beige;
		float: left;
	}
	#footer1 {
		background-color: gray;
	}
</style>

<body1>
<div id="header1">Header</div>
<div id="navigation1">Navigation</div>
<div id="wrap1">
	<div id="aside1">Aside
		<ul>
			<li>
				1111111
			</li>
			<li>
				2222222
			</li>
		</ul>
	</div>
	<div id="section1">Section
		<script> document.write("ss"); </script>
	</div>
</div>
<div id="footer1">Footer</div>
</body1>

 

Header

Navigation

Aside

• 1111111
• 2222222

Section

Footer