Why does this CSS not fit?

Question

I have a div with a width of 970px. (That is, of course, excluding borders, margins and padding). I am placing two divs inside this, side-by-side. Here's their CSS:

#content { display: inline-block; width: 720px; border: 0px; padding: 0px; margin: 0px; }
#sidebar { display: inline-block; width: 246px; border: 0px; padding: 0px; margin: 0px; }

Now, this works fine when the total width of the internal divs is 966px or less. When I get larger than that, however, the second div sits beneath the first. Why is this so?

As far as I know, I should be able to have a total width of 970px before I hit problems?

This is happening because of [`display: inline-block`](http://stackoverflow.com/q/5256533/1577396). — Mr_Green, Apr 03 '13 at 06:51

score 1 · Accepted Answer · answered Apr 03 '13 at 06:13

I bet you have new line between these two divs in HTML, and that's the reason.

For following CSS:

#main { width: 970px; }

#content { display: inline-block; width: 720px; border: 0px; padding: 0px; margin: 0px; height: 200px; background: red; }
#sidebar { display: inline-block; width: 246px; border: 0px; padding: 0px; margin: 0px; height: 200px; background: blue; }

There is a difference between following 2 HTML markups:

<div id="main">
    <div id="content"></div><div id="sidebar"></div>
</div>

and

<div id="main">
    <div id="content"></div>
    <div id="sidebar"></div>
</div>

Check this example: http://jsfiddle.net/vnguQ/ and notice white line between elements in second part.

It is happening because of `display: inline-block`. replace it with `float: left` and check. — Mr_Green, Apr 03 '13 at 06:54

score 0 · Answer 2 · edited May 23 '17 at 12:13

0

There may be whitespace between both divs and inline block apply styles for that whitespace.Take a look at these links http://css-tricks.com/fighting-the-space-between-inline-block-elements/ display: inline-block extra margin How to remove the space between inline-block elements?

edited May 23 '17 at 12:13

Community

1
1

answered Apr 03 '13 at 06:17

Dolo

966
14
28

score 0 · Answer 3 · answered Apr 03 '13 at 06:52

This problem happens when the main div having display property "block"(default one).

Add a property for the main div as dispaly:inline, it will automatically adjust the width for the inner divs. Change the css for main div.

#main { width: 970px; display:inline; }

#content { display: inline-block; width: 720px; border: 0px; padding: 0px; margin: 0px; height: 200px; background: red; }
#sidebar { display: inline-block; width: 246px; border: 0px; padding: 0px; margin: 0px; height: 200px; background: blue; }

Why does this CSS not fit?

3 Answers3