html - Center parent div with dynamic and set width child divs -

html - Center parent div with dynamic and set width child divs -

this contains both logo , navigation bar within main parent div.

the logo has set width , navigation bar has dynamic width. navigation bar 100px right of logo.

at moment perfect except @ left of screen. identical in every aspect, except @ center of screen.

i've looked , tried different methods found on-line, seem mess layout. ideas? in advance.

html

<div id="allhead"> <div id="logo"></div> <div id="navigation"></div> </div>

css

#allhead { position: relative; } #logo { width : 100px; height : 80px; background-color: green; } #navigation { position: absolute; max-width: 600px; left: 100px; top: 10px; right: 0px; height : 60px; background-color: orange; }

centering div of unknown width

when div widths variable, centering technique below works well. uses outer , inner wrapper.

the outer wrapper div set text-align:center.

the inner wrapper inline-block, , responds text-align:center outer wrapper. uses text-align:left overwrite text center first wrapper.

the logo , menu floated next each other.

this technique centering when widths can variable.

in illustration nav wrap under logo on smaller screen sizes. beneficial on smaller screens.

jsfiddle example

#allhead { text-align:center; } .center-inner { text-align:left; display:inline-block; } #logo { width : 100px; height : 80px; background-color: green; float:left; } #navigation { max-width: 600px; background-color: orange; float:left; }

here layout maintain logo , nav using css table displays. since of import main menu, divs added css table , table row browser stability.

jsfiddle

#allhead { text-align:center; } .center-inner { text-align:left; display:inline-block; } .nav-bar-table { display:table; } .nav-bar-table-row { display:table-row; } #logo { width : 100px; height : 80px; background-color: green; display:table-cell; } #navigation { max-width: 600px; background-color: orange; display:table-cell; padding:.5em; }

and lastly, here's jsfiddle experiment using absolute positioning similar original example, padding controlling centering. won't post code because absolute center close hard achieve, , top examples better.

html css dynamic width center