Question

I am working on a site. And have some menu.
But i have a problem to put the information on the right way on my screen.

I have a navigation wrapper with a width: 970px.
In that wrapper i have 4 different zone’s

• Navigation
• Language switcher
• Style switcher
• Search box

I can give the 4 last items a fixed width and float it to the right.
So i can give the navigation some fixed width.

But then i have a problem.
In the navigation div. You have the structure of every menu.
Like

<ul id="mainMenu">
  <li class="level1">
    <ul> 
       ... Subitems ...
    </ul>
    <a>Item 1</a>
  </li>
  <li class="level1">
    <ul> 
       ... Subitems ...
    </ul>
    <a>Item2 that is longer</a>
  </li>
</ul>

On the following screen you see what i mean.
The first 4 items are the navigation.

There i need to split, all the menu items over the
width that is over.
As you see, it’s split in 4 pieces. Each li have a border.
And the text should be in the middle of each li.
But how can i devide it depending on the text that we use.

http://prntscr.com/27j2q

Answer 1

I have solved the problem.

I used the padding properties. Because i know the items that come in the menu.
Normaly they don’t change. So i could do it this way.
It should be better with some dynamic things.
But now it’s also solved.