okay, know there few questions similar on stackoverflow have been answered didn't me.
i building messaging service , have 2 divs, contacts_box (300px) , message_box(500px). both wrapped inside parent div 800px in width. want align these 2 divs side side inside parent div. no matter do, can't them align!
please take @ html , css , show going wrong this?
* { margin: 0; padding: 0; } .page_layout { position: fixed; top: 50px; width: 100%; height: 100%; border: 1px solid green; } .page_container { width: 800px; height: 100%; margin: 0 auto; clear: both; border: 1px solid blue; } // contacts box , elements .contacts_box { float:left; height:100%; width:300px; border:1px dashed magenta; } // message box , elements .message_box { float:right; height:100%; width:500px; border:1px dashed lemonchiffon; }<html> <head> <link rel="stylesheet" href="http://kinskeep.com/test.css"> </head> <body> <div class="page_layout"> <div class="page_container"> <div class="contacts_box"> contacts box </div> <div class="message_box"> <div class="message_displaybox"> message box </div> <div class="message_textbox"> </div> </div> </div> </div> </body> </html>
you can use box-sizing solve issue rather calculating width , border widths:
add box-sizing: border-box inner containers , box-sizing: content-box outer container , there go!
* { margin: 0; padding: 0; box-sizing: border-box; } .page_layout { position: fixed; top: 50px; width: 100%; height: 100%; border: 1px solid green; } .page_container { width: 800px; height: 100%; margin: 0 auto; clear: both; border: 1px solid blue; box-sizing: content-box; } .contacts_box { float: left; height: 100%; width: 300px; border: 1px dashed magenta; } .message_box { float: right; height: 100%; width: 500px; border: 1px dashed lemonchiffon; }<body> <div class="page_layout"> <div class="page_container"> <div class="contacts_box"> contacts box </div> <div class="message_box"> <div class="message_displaybox"> message box </div> <div class="message_textbox"> </div> </div> </div> </div> </body>
Comments
Post a Comment