css - DIVs Failing to Align Properly -
i trying align 2 divs side side. image on left, text on right first item. text on left, image on right second item. , image on left, text on right third item.
it works first , third items. second item fails align. have done wrong?
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>untitled document</title> <style type="text/css"> .container { padding: 5px; background-color:#66c; } .imagecontainer { margin: 0 25px 0 0; float: left; height: 301px; width: 301px; background-color:#0cc; position:absolute; margin-bottom: 50px; } .imagecontainerrt { margin: 0 0 0 0px ; float: left; height: 301px; width: 301px; background-color:#0cc; margin-bottom: 50px; } .text { height: 301px; padding: 5px 5px 0 0; background-color:#c96; margin-left:321px; margin-bottom: 50px; } .text2 { height: 301px; padding: 5px 5px 0 0; background-color:#c96; margin-right:301px; margin-bottom: 50px; } </style> </head> <body> <!-- first --> <div class="container"> <div class="imagecontainer"><img alt="it takes winning strategy achieve business success" src="http://market-velocity.com/wp-content/uploads/2013/07/strategy400x400-300x300.jpg" width="300" height="300" /></div> <div class="text"> <h5><span style="color: #66448a;">it takes winning strategy achieve business success</span></h5> market-velocity helps companies map destination , guides them strong competitive advantage. way companies talk market ineffective. utilize strategy drivers team differentiate competition. take close @ saying clients , prospects , how brand affects lead generation , business development. <h6><span style="color: #666666;">strategy drivers</span></h6> <ul class="insidebullet"> <li><strong>navigate</strong> – mapping core identity , differentiation compelling clients</li> <li><strong>advance</strong> – defining perception want others have company</li> <li><strong>arrive</strong> – developing messages , fostering culture of being relentless in pursuit</li> </ul> </div> <!-- second --> <div class="text2"> <h5><span style="color: #66448a;">it takes winning strategy achieve business success</span></h5> market-velocity helps companies map destination , guides them strong competitive advantage. way companies talk market ineffective. utilize strategy drivers team differentiate competition. take close @ saying clients , prospects , how brand affects lead generation , business development. <h6><span style="color: #666666;">strategy drivers</span></h6> <ul class="insidebullet"> <li><strong>navigate</strong> – mapping core identity , differentiation compelling clients</li> <li><strong>advance</strong> – defining perception want others have company</li> <li><strong>arrive</strong> – developing messages , fostering culture of being relentless in pursuit</li> </ul></div> <div class="imagecontainerrt"></div> <!-- third --> <div class="imagecontainer"><img alt="it takes winning strategy achieve business success" src="http://market-velocity.com/wp-content/uploads/2013/07/strategy400x400-300x300.jpg" width="300" height="300" /></div> <div class="text"> <h5><span style="color: #66448a;">it takes winning strategy achieve business success</span></h5> market-velocity helps companies map destination , guides them strong competitive advantage. way companies talk market ineffective. utilize strategy drivers team differentiate competition. take close @ saying clients , prospects , how brand affects lead generation , business development. <h6><span style="color: #666666;">strategy drivers</span></h6> <ul class="insidebullet"> <li><strong>navigate</strong> – mapping core identity , differentiation compelling clients</li> <li><strong>advance</strong> – defining perception want others have company</li> <li><strong>arrive</strong> – developing messages , fostering culture of being relentless in pursuit</li> </ul> </div> </div></div> </div> </body> </html>
.imagecontainerrt should float:right, not left
.imagecontainerrt { margin: 0 0 0 0px ; float: right; height: 301px; width: 301px; background-color:#0cc; margin-bottom: 50px; } also make sure clear floats with, place after floated containers adding class clearfix parent container
<div class="container clearfix"></div> and add css
.clearfix { *zoom: 1; } .clearfix:before, .clearfix:after { display: table; line-height: 0; content: ""; } .clearfix:after { clear: both; }
Comments
Post a Comment