html - Why inline-block is not working to align two divs inside of a parent container div horizontally side by side? -
i have simple html template
<!doctype html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style> *{ margin:0px; padding:0px; } <!--resetter rules browsers--> #bodycontainer { border:green 2px solid; } body { border:black 2px solid; background-color : grey; padding:5px; } #header { background-color : red; width:70%; height:80px; border:black 2px solid; padding:5px; } #header1 { display:inline-block; width:50%; border:green 2px solid; } #header2 { display:inline-block; width:50%; border:green 2px solid; } </style> </head> <body> <div id="bodycontainer"> <div id="header"> <div id="header1"><h1>welcome</h1></div> <div id="header2"><h1>you choose better !! </h1></div> </div> <div id="content"> <div id="contentheader"> <p>you select ... serve </p> </div> <div id="nav"> <ul id="navmenu"> <li><a href="#">home</a></li> <li><a href="#">electronics</a></li> <li><a href="#">fashions</a></li> </ul> </div> </div> <div id="sidebar"> </div> <div id="footer"> <p>webapp version numbered v1.0. rights reserved. </p> </div> </div> </body> </html> but when set width 50% divs having ids header1 , header2 tend not occupy entire space of parent container div having id header , aligned horizontally side side. why ? missing here ? please explain basics newbie html , css.
first thing remove padding #header, give 2px border both #header1 , #header2 remove border: 2px solid green;
and thing display:inline-block takes white-space in html. so, remove whitespace between both div #header1 , #header2.
like: <div id="header1"><h1>welcome</h1></div><div id="header2"><h1>you choose better !! </h1></div>
here give vertical-align:top make vertically top.
*{ margin:0px; padding:0px; } <!--resetter rules browsers--> #bodycontainer { border:green 2px solid; } body { border:black 2px solid; background-color : grey; padding:5px; } #header { background-color : red; width:70%; height:80px; border:black 2px solid; } #header1 { display:inline-block; width:50%; vertical-align: top; } #header2 { display:inline-block; width:50%; vertical-align: top; }<div id="bodycontainer"> <div id="header"> <div id="header1"><h1>welcome</h1></div><div id="header2"><h1>you choose better !! </h1></div> </div> <div id="content"> <div id="contentheader"> <p>you select ... serve </p> </div> <div id="nav"> <ul id="navmenu"> <li><a href="#">home</a></li> <li><a href="#">electronics</a></li> <li><a href="#">fashions</a></li> </ul> </div> </div> <div id="sidebar"> </div> <div id="footer"> <p>webapp version numbered v1.0. rights reserved. </p> </div> </div>check fiddle.