CODEWITHSUNDEEP
htmlwidthcss
user2449973
user2449973

Reputation: 123

Div inline-block elements not filling width properly

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;
}

Upvotes: 2

Views: 4281

Answers (3)

robooneus
robooneus

Reputation: 1344

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.

Upvotes: 0

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

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

Upvotes: 0

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

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

Upvotes: 3

Related Questions