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:
- your border taking 2px.
- 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
Post a Comment