CODEWITHSUNDEEP
htmlcss
John
John

Reputation: 1629

Menu bar layout solution

I have some problems with creating the correct menu bar layout.

My menu bar is divided to three sections which are:

left (logo), center (menu), right (login information)

There are also two different menus, one is for administrator (few additional buttons - width is 701px) and regular user menu (width is 447px ).

Whole menu bar width is set to 100%.

Now what i need help with is setting the width attribute for each of the sections.

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).

If i set percentage width to center (menu) section, menu might break at smaller screen resolutions.

So what is the best solution?

HTML:

<body>
    <div id="main">
        <div id="left"></div>
        <div id="center"></div>
        <div id="right"></div>
    </div>
</body>

CSS:

#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*/

Admin menu bar: enter image description here

Regular user menu bar: enter image description here

Upvotes: 2

Views: 639

Answers (2)

user1367856
user1367856

Reputation:

I think you're probably going to have to use JavaScript to resize your elements as needed. There's several solutions but none of them allow for mixing dynamic and static widths.

Floats are out because they will jump around when you lower your screen size. Unless you want to have them fall below the other sections when its too small.

Just think of each div as an individual element instead of them working together. I'd strongly suggest not using a float in this situation if your goal is cross browser compatibility.

  • Good luck. :)

Upvotes: 0

Nation
Nation

Reputation: 506

You can try this CSS and adjust the each width if you wish in percentage to sum up to 100% of the main div: 

#main {

    width:100%;
    height:77px;
    background-color:#373737;
    padding:5px;
}

#left, #center, #right {height:77px;}

#left {float:left;background-color:black;width:25%}  /*width? % or px*/
 #center {display:inline-block;background-color:blue;width:50%; float:left}/* width? % or px*/
#right {float:left;background-color:yellow;width:25%}  /*width? % or px*/​

Upvotes: 1

Related Questions