html - Div inline-block elements not filling width properly -
i'm make website i'm getting stuck on css. reason, there's space between video slideshow , side bar. can tell me why is? below picture of web browser displays when given code. 
<html> <head> <link href="stylesheet.css" rel="stylesheet" type="text/css"> </head> <body> <div id='header'> <p>header</p> </div> <div id='picture_gallery'> <p>picture gallery</p> </div> <div id='nav_bar'> <p>nav bar</p> </div> <div id='vision_statement'> <p>vision statement</p> </div> <div id='video_slideshow'> <p>video slideshow</p> </div> <div id='sidebar'> <p>side bar</p> </div> <div id='footer'> <p>footer</p> </div> </body> #header { border: 1px solid black; height: 50px; width: auto; text-align: center; } #picture_gallery { border: 1px solid black; height: 50px; width: auto; text-align: center; } #nav_bar { border: 1px solid black; height: 50px; width: auto; text-align: center; } #vision_statement { border: 1px solid black; display: inline-block; float: left; height: 50px; width: 33%; text-align: center; } #video_slideshow { border: 1px solid black; display: inline-block; height: 50px; width: 33%; text-align: center; } #sidebar { border: 1px solid black; display: inline-block; float: right; height: 50px; width: 33%; text-align: center; } #footer { border: 1px solid black; height: 50px; width: auto; text-align: center; }
change in css define box-sizing:border-box;
as this
#sidebar, #vision_statement, #video_slideshow{ -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } #header { border: 1px solid black; height: 50px; width: auto; text-align: center; } #picture_gallery { border: 1px solid black; height: 50px; width: auto; text-align: center; } #nav_bar { border: 1px solid black; height: 50px; width: auto; text-align: center; } #vision_statement { border: 1px solid black; display: inline-block; float: left; // add float:left height: 50px; width: 33%; text-align: center; } #video_slideshow { border: 1px solid black; display: inline-block; height: 50px;float: left; // add float:left width: 33%; text-align: center; } #sidebar { border: 1px solid black; display: inline-block; float: right; height: 50px; width: 34%; // add width :34% text-align: center; } #footer { border: 1px solid black; height: 50px; width: auto; text-align: center; clear:both; // add clear both; } 
Comments
Post a Comment