css - Divs with 2 columns in a vertical column -
i'm trying make column div's 1 after another, each div split 2 columns..i've managed tells me it's not semantic...so if take , tell me how code better?
<body> <div id="wrapper"> <div id="lt"> <div id="bl"> <p>column 1</p> </div> <div id="br"> <p>column 2</p> </div> <p><br> </p> <div id="bl"> <p>column 1</p> </div> <div id="br"> <p>column 2</p> </div> </div> <div id="rt"> <p>123</p> </div> </div> </body>
@import url("reset.css"); body { font-family: verdana, arial, helvetica, sans-serif; font-size: 14px; color:#000; } #wrapper { margin: 0 auto; width: 960px; padding: 4px; background-color: #999; height: 600px; } #lt { background: #33ccff; width: 400px; float: left; background-color: #333; height: 600px; } #rt { float: left; background: #ffffff; width: 560px; } #bl{ float:left; width:120px; height:120px; background:#fff333; } #br{ float:left; width:280px; background:#e4e4e4; height: 120px; }
a few improvements:
- instead of:
<p><br> </p>
use proper css-margins like:margin-bottom: 20px;
- you have multiple ids same name, ids must unique, use classes instead!
- use semantic names: instead of
br
writeblock-right
- floats can problematic, don't need be. using
display: inline-block
may alternative
Comments
Post a Comment