CODEWITHSUNDEEP
htmlcsspositioning
Danny_Student
Danny_Student

Reputation: 153

Why the second div moves to another line even if both of them are set to display:inline-block?

I'm a bit afraid of using floats as I didn't yet understand clearing the floats and all the hacks that are on the internet in regard to that activity so I've used display:inline-block to place two divs in inline fashion. Their container has a 

width:auto;
max-width:900px;

and each of the divs has 

display:inline-block;
width: 450px;

Now no matter what I do the second div always breaks to another line right below the first div.

Here's the code : http://codepen.io/anon/pen/xgtFd

I have already modified the width of the two divs like for example

width:440px;

but it didn't help. Still the second div is slightly 'off place'. That's weird cause I was making a website and using pretty much the same approach for my header like in this project. Please help me determine the problem.

I would be glad for any help.

Upvotes: 1

Views: 122

Answers (1)

random_user_name
random_user_name

Reputation: 26160

The widths are too wide.

Bump the nav down to about 446px, and they come back in line.

Why 444px instead of 450px? Two reasons:

  1. Your border is taking 2px.
  2. There is whitespace between the <div> tags in your markup, which is reflected in the rendering. If you would like it to be able to make it 450px, put the closing div tag and the next opening div tag immediately adjacent, like so: </div><div id="nav">

If you want to be able to keep the border, and set the width to 450px, then you should check out box-sizing, and utilize box-sizing: border-box;.

Edit:
To address your vertical alignment issues, you need to apply vertical-align: top; to the div elements (the nav and logo divs).

And, the ul isn't centered because when you apply display:block to it, it fills the full width. So you could either make the contents of the div centered with text-align: center on the ul, or you could make the ul display: inline-block.

Upvotes: 3

Related Questions