What is the best way to position a div in css?

Question

I'm trying to place this menu:

<div class="left-menu" style="left: 123px; top: 355px">
<ul>
<li> Categories </li>
<li> Weapons </li>
<li> Armor </li>
<li> Manuals </li>
<li> Sustenance </li>
<li> Test </li>
</ul>
</div>


on the left hand side of the page. The problem is that if I use absolute or fixed values, different screen sizes will render the navigation bar differently. I also have a second div that contains all the main content which also needs to be moved to the right, so far I'm using relative values which seems to work no matter the screen size.

Answer 1

I think you're supposed to use the float property for positioning things like that. You can read about it here: http://css.maxdesign.com.au/floatutorial/

Answer 2

I've always found this A List Apart article useful: taming lists.

Answer 3

You should use the float and clear CSS attributes to get the desired effect.

First I defined styles for the called left and right for the two columns in my layout and a style called clearer used to reset the page flow.

<style type="text/css">
.left {
    float: left;
    width: 200px;
}
.right {
    float: right;
    width: 800px;
}
.clear {
    clear: both;
    height: 1px;
}
</style>

Then I use them to layout my page.

<div>
 <div class="left">
   <ul>
    <li>Categories</li>
    <li>Weapons</li>
    <li>Armor</li>
    <li>Manuals</li>
    <li>Sustenance</li>
    <li>Test</li>
  </ul> 
 </div>
 <div class="right">
   Blah Blah Blah....
 </div>
</div>
<div class="clear" />

Answer 4

All the answers saying to use floats (with explicit widths) are correct. But to answer the original question, what is the best way to position a <div>? It depends.

CSS is highly contextual, and the flow of a page is dependent on the structure of your HTML. Normal flow is how elements, and their children, will layout top to bottom (for block elements) and left to right (for inline elements) inside their containing block (usually the parent). This is how the majority of your layout should work. You will tend to rely on width, margin, and padding to define the spacing and layout of the elements to the other elements around it (be they <div>, <ul>, <p>, or otherwise, HTML is mostly semantic at this point).

Using styles like float or absolute or relative positioning can help you achieve very specific goals of your layout, but it's important to know how to use them. As has been explained, float is generally used to place block elements next to each other, and it really good for multi-column layouts.

I won't go into more details here, but you might want to check out the following:

• SitePoint CSS References - probably the most straightforward and complete CSS reference I've found online.
• W3C CSS2.1 Visual Formatting Model - Yes, its a tough read, but it does explain everything.