Databases
StackOverflow2013
Postsdbo
POMenu bar layout solution
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMenu bar layout solution
    text
    copied!<p>I have some problems with creating the correct menu bar layout.</p> <p>My menu bar is divided to three sections which are: </p> <p><strong>left (logo)</strong>, <strong>center (menu)</strong>, <strong>right (login information)</strong></p> <p>There are also two different menus, one is for administrator (few additional buttons - width is 701px) and regular user menu (width is 447px ).</p> <p>Whole menu bar width is set to 100%.</p> <p>Now what i need help with is setting the width attribute for each of the sections.</p> <p><em>If i set fixed width (px) to center (menu) section, i cant figure out the correct width percentage for other two sections. I also cant set fixed width values for other sections because of the smaller screen resolutions (menu stays wide).</em></p> <p><em>If i set percentage width to center (menu) section, menu might break at smaller screen resolutions.</em></p> <p>So what is the best solution?</p> <p><strong>HTML:</strong></p> <pre><code>&lt;body&gt; &lt;div id="main"&gt; &lt;div id="left"&gt;&lt;/div&gt; &lt;div id="center"&gt;&lt;/div&gt; &lt;div id="right"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/body&gt; </code></pre> <p><strong>CSS:</strong></p> <pre><code>#main { width:100%; height:77px; background-color:#373737; } #left, #center, #right { height:77px; } #left { float:left; } /* width? % or px*/ #center { display:inline-block; } /* width? % or px*/ #right { float:right; } /* width? % or px*/ </code></pre> <p>Admin menu bar: <img src="https://i.stack.imgur.com/5Fij7.png" alt="enter image description here"></p> <p>Regular user menu bar: <img src="https://i.stack.imgur.com/N3QWN.png" alt="enter image description here"></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload