Div inline-block elements not filling width properly

Question

I'm about to make a website but I'm getting stuck on the css. For some reason, there's a space between the video slideshow and the side bar. Can anyone tell me why this is? Below is a picture of what my web browser displays when given the code. An example of my 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;
}

There're a lot of discussions on SO about the space between inline-blocks. see also http://css-tricks.com/fighting-the-space-between-inline-block-elements/ — Fabrizio Calderan, Jul 22 '13 at 08:02
@Cherniv is there any other way to display 3 div inline-block elements evenly? — user2449973, Jul 22 '13 at 08:07
@Cherniv That just brings the sidebar down to the bottom of the page. — user2449973, Jul 22 '13 at 08:13

score 3 · Accepted Answer · answered Jul 22 '13 at 08:13

Change some in your css Define box-sizing:border-box;

as like 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 this 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 this clear both;
}

Demo

score 0 · Answer 2 · answered Jul 22 '13 at 08:14

0

Its working fine now.. Jus set the position:absolute to your sidebar style..

Here is the updated code for css:

#sidebar {
border: 1px solid black;
display: inline-block;
position:absolute;
height: 50px;
width: 32%;
text-align: center;
}

Demo

answered Jul 22 '13 at 08:14

Guruprasad J Rao

29,410
14
101
200

score 0 · Answer 3 · answered Jul 22 '13 at 08:21

You need to set the widths of the elements as 33.3333% or something similar, because 33% on each leaves a gap of 1%.

The issue you are having with them not fitting with that width is because of the 1px border you have set. With the traditional box model, a border is not contained within the 33.33% width, so it means the actual width is 33.33% + 1px.

To fix this, you can use the border-box box model. I use it all the time -- works much better.

Read here as to why and what it does:

http://www.paulirish.com/2012/box-sizing-border-box-ftw/

Simply add:

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

to your css file. Then change the widths of the three elements to

width:33.33%;

This will make all of the boxes exactly the same width and have them all fit on the same line.

Div inline-block elements not filling width properly

3 Answers3