Problems centering container

HTML & CSS
1

I’m struggling with centering my main container, although that is maybe not the right description, because it’s more an optical problem. I have a simple two column site: left #sidebar(menu), right Content. The container has a fixed width of 960px; The problem I have is with the sidebar. The sidebar has a fixed width of 300px ( since I don’t know the width of the widest menu item.) and the menu items have the property text-align: right; So although the container is centered, because of the right alignment of the menu items in the fixed width sidebar, it looks like it’s not. What would be the best solution in this case? Shoud I not set a width for the sidebar?

thank you in advance

2

Hi Paul. You can find the layout as I now have it here

In this example I have no width for the menu column(left) but was forced to set a width for the right column. If I didn’t set a width it was wrapping left under the menu?

What is in your opinion the best solution for this?

Thank you in advance;

3

Try adding this to container’s css:

position: relative; left: 150px;

and similar to css to sidebar. It would shift both blocks to 150 pixels (half of sidebar’s width) to the right, making it look centered.

Then add min-width: 1260px; (combined width of content and sidebar) to body to avoid content going outside of browser window.

4

Thanks for the response. That doesn’t seem to work. It was the left side that optical is bigger, so I tried it with left: -150px; but than the container is to much to the left instead, which is not longer optical.

5

Hi,

It would be easier if we could see the design but your first suggestion of not setting a width should allow the menu to sit on the left but allow items to be right aligned with the longest item.

6

Remove float and width from Content, but add margin-left: 160px;

7

That works until the last paragraph from content which wraps under the menu!

Edit sorry, my wrong that is indeed working and the best solution so far, thanks

8

Looks ok to me now :slight_smile:

9

It is indeed okay now. Thanks all for the input!