2008/01/10 15:16
[웹표준/레이아웃]
레이아웃
2단 레이아웃 (css-2-column-layout-01 예제 참고)
http://marie.co.kr/web/2column_layout_01/
<body>
<div id="wrapper">
<div id="header">
This is my Header
</div>
<div id="leftcolumn">
Left Column
</div>
<div id="centercolumn">
<p>This Column is My Main Content Area</p>
</div>
<div id="footer">Footer</div>
</div>
-------------------------------------------------------------------------------------------------------
2단 레이아웃 (css-2-column-layout-01 예제 참고)
<body>
<div id="wrapper">
<div id="header">
This is my Header
</div>
<div id="leftcolumn">
Left Column
</div>
<div id="centercolumn">
<p>This Column is My Main Content Area</p>
</div>
<div id="footer">Footer</div>
</div>
-------------------------------------------------------------------------------------------------------
* {padding: 0; margin: 0;}
body {font-family: Arial, Helvetica, sans-serif; color: #666; font-size: 12px;}
#wrapper {width: 770px; margin: 0 auto;}
#header {border: 1px solid #ccc; margin: 5px; height: 70px; padding: 10px; background-color: #ccc;}
#leftcolumn {margin: 0 5px 5px 5px; padding: 4px; display: inline; /* IE Hack */ width: 24%; float: left; border: 1px solid #ccc; background-color: #dac8bf; min-height: 300px;}
* html #leftcolumn {height:300px} /* IE Min-Height Hack */
#centercolumn {border: 1px solid #ccc; margin: 0 0px 5px 0px; display: inline; /* IE Hack */ padding: 4px; width: 71.4%; float: left; min-height: 300px;}
* html #centercolumn {height:300px} /* IE Min-Height Hack */
#rightcolumn {border: 1px solid #ccc; margin: 0 5px 5px 0; display: inline; /* IE Hack */ padding: 4px; width: 159px; float: left; background-color: #c99; min-height: 300px;}
* html #rightcolumn {height:300px} /* IE Min-Height Hack */
#footer {background-color: #cc9; margin: 0 5px 5px 5px; padding: 4px; clear: left; width: 97.8%;}
body {font-family: Arial, Helvetica, sans-serif; color: #666; font-size: 12px;}
#wrapper {width: 770px; margin: 0 auto;}
#header {border: 1px solid #ccc; margin: 5px; height: 70px; padding: 10px; background-color: #ccc;}
#leftcolumn {margin: 0 5px 5px 5px; padding: 4px; display: inline; /* IE Hack */ width: 24%; float: left; border: 1px solid #ccc; background-color: #dac8bf; min-height: 300px;}
* html #leftcolumn {height:300px} /* IE Min-Height Hack */
#centercolumn {border: 1px solid #ccc; margin: 0 0px 5px 0px; display: inline; /* IE Hack */ padding: 4px; width: 71.4%; float: left; min-height: 300px;}
* html #centercolumn {height:300px} /* IE Min-Height Hack */
#rightcolumn {border: 1px solid #ccc; margin: 0 5px 5px 0; display: inline; /* IE Hack */ padding: 4px; width: 159px; float: left; background-color: #c99; min-height: 300px;}
* html #rightcolumn {height:300px} /* IE Min-Height Hack */
#footer {background-color: #cc9; margin: 0 5px 5px 5px; padding: 4px; clear: left; width: 97.8%;}
Trackback Address :: http://marie1114.tistory.com/trackback/27
