Layout problems

How to float an image next to a box.

[bandana]

Hi everybody!

I'm kind of a rookie when it comes to CSS so I require some help.

I want to create a web page where the main content is shown in a box centered in the browser window (preferably both vertically and horizontally), and then have a navigation menu as an image on the left side.

I can't seem to get the menu to float next to the box of main content, it will only go to the far left or far right, but never snap to the left side.

I could use tables to get this done, but I've learned that isn't such a good idea...

Is this at all understandable?

Anyway, I'd be extremely grateful for any help in this matter!

[swa66]

Take a look at the trick to center an absolutely positioned element.

basically something like:
position:absolute;
width: 200px;
left: 50%
margin-left: -100px;
The negative margin here is half the width of the element.

This basically takes the left side of the element, the 50% put that side in the middle, and then the negative margin shifts it back half the width.

To put something on the left of that, take the right side of it, and put it in the same spot:
position:absolute;
width: Xpx;
right: 50%:
margin-right: 100px

vertically the same centering trick can be used.

This works nicely cross browser.

I think I did a while ago a post explaining how to use an element with a minimal size to make sure it all fits on the screen (the above behaves bad if the viewport is smaller than what you try to show). Just need to find it ...

[bandana]

Thank you very much!

That worked perfectly!

You made my day :D