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


i'm bit afraid of using floats didn't yet understand clearing floats , hacks on internet in regard activity i've used display:inline-block place 2 divs in inline fashion. container has

width:auto; max-width:900px; 

and each of divs has

display:inline-block; width: 450px; 

now no matter second div breaks line right below first div.

here's code : http://codepen.io/anon/pen/xgtfd

i have modified width of 2 divs example

width:440px; 

but didn't help. still second div 'off place'. that's weird cause making website , using pretty same approach header in project. please me determine problem.

i glad help.

the widths wide.

bump nav down 446px, , come in line.

why 444px instead of 450px? 2 reasons:

  1. your border taking 2px.
  2. there whitespace between <div> tags in markup, reflected in rendering. if able make 450px, put closing div tag , next opening div tag adjacent, so: </div><div id="nav">

if want able keep border, , set width 450px, should check out box-sizing, , utilize box-sizing: border-box;.

edit:
address vertical alignment issues, need apply vertical-align: top; div elements (the nav , logo divs).

and, ul isn't centered because when apply display:block it, fills full width. either make contents of div centered text-align: center on ul, or make ul display: inline-block.


Comments

Popular posts from this blog

javascript - RequestAnimationFrame not working when exiting fullscreen switching space on Safari -

Python ctypes access violation with const pointer arguments -