ㅤㅇㅙㅂ 표준화 가이드 float 실습 질문 있습니
Posted: 2006 01 03 18:39 12
3단 형 컬럼형 레이아웃이 만들어 진다는데
칼럼의 경계선이 left area와 main area 사이에는 만들어 지는데
main area와 side area 에는 경계선이 나오지 않습니다.
나온다는데 말이죠
작성 코드를 같이 올립니다.
어디가 잘못되었는지 봐 주시면 고맙겠습니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<title> simple Css Layout </title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
hr {
display: none;
}
#wrapper {
width: 700px;
border: 1px solid #eee;
margin: 20px auto;
background: url(body2.gif) repeat-y 150px 0;
}
#head {
height: 80px;
background: #eee;
}
#foot {
height: 30px;
background: #eee;
}
#sub,
#body,
#sidebar {
float: left;
}
#sub,
#sidebar {
width: 150px;
}
#body {
width: 400px;
height: 450px;
}
#foot {
clear: both;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="head">Site Top Area</div>
<hr>
<div id="sub">Site Left Area</div>
<hr>
<div id="body"> Main Content Area</div>
<hr>
<div id="sidebar">Side Bar</div>
<hr>
<div id="foot">Site Bottom Area</div>
</div>
</body>
</html>
칼럼의 경계선이 left area와 main area 사이에는 만들어 지는데
main area와 side area 에는 경계선이 나오지 않습니다.
나온다는데 말이죠
작성 코드를 같이 올립니다.
어디가 잘못되었는지 봐 주시면 고맙겠습니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<title> simple Css Layout </title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
hr {
display: none;
}
#wrapper {
width: 700px;
border: 1px solid #eee;
margin: 20px auto;
background: url(body2.gif) repeat-y 150px 0;
}
#head {
height: 80px;
background: #eee;
}
#foot {
height: 30px;
background: #eee;
}
#sub,
#body,
#sidebar {
float: left;
}
#sub,
#sidebar {
width: 150px;
}
#body {
width: 400px;
height: 450px;
}
#foot {
clear: both;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="head">Site Top Area</div>
<hr>
<div id="sub">Site Left Area</div>
<hr>
<div id="body"> Main Content Area</div>
<hr>
<div id="sidebar">Side Bar</div>
<hr>
<div id="foot">Site Bottom Area</div>
</div>
</body>
</html>