html - Div grid cell-type alignment -
i aiming setup similar this:
unfortunately end this:
here specs:
i'm trying divs image set without borders, , divs text have 1 px border.
here divs set up:
<section id="row2"> <div id="textbox1" class="column left"> <p> text box 1 </p> </div> <!--#textbox1 .column.left--> <div class="column right"> <img src="assets/top-right-image.png"/> </div> </section> <!--#row2--> <section id="row3"> <div class="column left"><img src="assets/bottom-left-image.png"/></div> <div id="textbox2" class="column right"> <p> text box 2 </p> </div> </section> <!--#row3-->
as can see, set text divs id "textbox1" , "textbox2". unfortunately, blows them , makes div.column.left in #row3 align right.
here css:
.column { float: left; position: relative; margin: 20px 11px; } .left { width: 408px; } .right { width: 449px; } #bannerpic { padding: 0px 15px; } #row2 div { height: 352px; } #row3 div { height: 598px; } #textbox1 { border: 1px solid #bcbcbc; margin-bottom: 20px; } #textbox2 { border: 1px solid #bcbcbc; }
where going wrong?
chances top 2 items not exact same height, 3rd item, taller photo, "hanging" on first. happens because of way float behavior works. make sure parts of each row (the divs) rendered exact same height, including borders, margin, padding, etc.
the other option "clear" section tags. since part of content text, may lot easier. it's easier anyway. :)
section { clear: both }
Comments
Post a Comment