<p>I'm trying to place this menu on the left hand side of the page:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="left-menu" style="left: 123px; top: 355px"&gt;  
    &lt;ul&gt;  
        &lt;li&gt; Categories &lt;/li&gt;  
        &lt;li&gt; Weapons &lt;/li&gt;  
        &lt;li&gt; Armor &lt;/li&gt;  
        &lt;li&gt; Manuals &lt;/li&gt;  
        &lt;li&gt; Sustenance &lt;/li&gt;  
        &lt;li&gt; Test &lt;/li&gt;  
    &lt;/ul&gt;  
&lt;/div&gt;</code></pre>
</div>
</div>
</p>
<p>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 <code>div</code> 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.</p>

[{'answer_id': 61157, 'author': 'Paige Ruten', 'author_id': 813, 'author_profile': 'https://Stackoverflow.com/users/813', 'pm_score': 2, 'selected': False, 'text': '<p>I think you\'re supposed to use the <strong>float</strong> property for positioning things like that. <a href="http://css.maxdesign.com.au/floatutorial/" rel="nofollow noreferrer">You can read about it here.</a></p>\n'}, {'answer_id': 61167, 'author': 'Brian Matthews', 'author_id': 1969, 'author_profile': 'https://Stackoverflow.com/users/1969', 'pm_score': 0, 'selected': False, 'text': '<p>You should use the float and clear CSS attributes to get the desired effect. </p>\n\n<p>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.</p>\n\n<pre>\n&lt;style type="text/css"&gt;\n.left {\n    float: left;\n    width: 200px;\n}\n.right {\n    float: right;\n    width: 800px;\n}\n.clear {\n    clear: both;\n    height: 1px;\n}\n&lt;/style&gt;\n</pre>\n\n<p>Then I use them to layout my page.</p>\n\n<pre>\n&lt;div&gt;\n &lt;div class="left"&gt;\n   &lt;ul&gt;\n    &lt;li&gt;Categories&lt;/li&gt;\n    &lt;li&gt;Weapons&lt;/li&gt;\n    &lt;li&gt;Armor&lt;/li&gt;\n    &lt;li&gt;Manuals&lt;/li&gt;\n    &lt;li&gt;Sustenance&lt;/li&gt;\n    &lt;li&gt;Test&lt;/li&gt;\n  &lt;/ul&gt; \n &lt;/div&gt;\n &lt;div class="right"&gt;\n   Blah Blah Blah....\n &lt;/div&gt;\n&lt;/div&gt;\n&lt;div class="clear" /&gt;\n</pre>\n'}, {'answer_id': 61200, 'author': 'Konrad Rudolph', 'author_id': 1968, 'author_profile': 'https://Stackoverflow.com/users/1968', 'pm_score': 4, 'selected': True, 'text': '<p><code>float</code> is indeed the right property to achieve this. However, the example given by bmatthews68 can be improved. The most important thing about floating boxes is that they <em>must</em> specify an explicit width. This can be rather inconvenient but this is the way CSS works. However, notice that <code>px</code> is a unit of measure that has no place in the world of HTML/CSS, at least not to specify widths.</p>\n\n<p>Always resort to measures that will work with different font sizes, i.e. either use <code>em</code> or <code>%</code>. Now, if the menu is implemented as a floating body, then this means that the main content floats “around” it. If the main content is higher than the menu, this might not be what you want:</p>\n\n<p><a href="http://page.mi.fu-berlin.de/krudolph/stuff/float1.png">float1 http://page.mi.fu-berlin.de/krudolph/stuff/float1.png</a></p>\n\n<pre><code>&lt;div style="width: 10em; float: left;"&gt;Left&lt;/div&gt;\n&lt;div&gt;Right, spanning&lt;br/&gt; multiple lines&lt;/div&gt;\n</code></pre>\n\n<p>You can correct this behaviour by giving the main content a <code>margin-left</code> equal to the width of the menu:</p>\n\n<p><a href="http://page.mi.fu-berlin.de/krudolph/stuff/float2.png">float2 http://page.mi.fu-berlin.de/krudolph/stuff/float2.png</a></p>\n\n<pre><code>&lt;div style="width: 10em; float: left;"&gt;Left&lt;/div&gt;\n&lt;div style="margin-left: 10em;"&gt;Right, spanning&lt;br/&gt; multiple lines&lt;/div&gt;\n</code></pre>\n\n<p>In most cases you also want to give the main content a <code>padding-left</code> so it doesn\'t “stick” to the menu too closely.</p>\n\n<p>By the way, it\'s trivial to change the above so that the menu is on the right side instead of the left: simply change every occurrence of the word “left” to “right”.</p>\n\n<p>Ah, one last thing. If the menu\'s content is higher than the main content, it will render oddly because <code>float</code> does some odd things. In that case, you will have to clear the box that comes below the floating body, as in bmatthews68\'s example.</p>\n\n<p>/EDIT: Damn, HTML doesn\'t work the way the preview showed it. Well, I\'ve included pictures instead.</p>\n'}, {'answer_id': 61438, 'author': 'Bryan M.', 'author_id': 4636, 'author_profile': 'https://Stackoverflow.com/users/4636', 'pm_score': 2, 'selected': False, 'text': '<p>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 <code>&lt;div&gt;</code>? It depends.</p>\n\n<p>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 <code>width</code>, <code>margin</code>, and <code>padding</code> to define the spacing and layout of the elements to the other elements around it (be they <code>&lt;div&gt;</code>, <code>&lt;ul&gt;</code>, <code>&lt;p&gt;</code>, or otherwise, HTML is mostly semantic at this point). </p>\n\n<p>Using styles like <code>float</code> or <code>absolute</code> or <code>relative</code> 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, <code>float</code> is generally used to place block elements next to each other, and it really good for multi-column layouts.</p>\n\n<p>I won\'t go into more details here, but you might want to check out the following:</p>\n\n<ul>\n<li><a href="http://reference.sitepoint.com/css" rel="nofollow noreferrer">SitePoint CSS References</a> - probably the most straightforward and complete CSS reference I\'ve found online.</li>\n<li><a href="http://www.w3.org/TR/CSS21/visuren.html" rel="nofollow noreferrer">W3C CSS2.1 Visual Formatting Model</a> - Yes, its a tough read, but it does explain everything.</li>\n</ul>\n'}, {'answer_id': 15769430, 'author': 'Eng Maisa', 'author_id': 2214827, 'author_profile': 'https://Stackoverflow.com/users/2214827', 'pm_score': 0, 'selected': False, 'text': '<p>you can use float</p>\n\n<pre><code>&lt;div class="left-menu"&gt;\n&lt;ul&gt;\n&lt;li&gt; Categories &lt;/li&gt;\n&lt;li&gt; Weapons &lt;/li&gt;\n&lt;li&gt; Armor &lt;/li&gt;\n&lt;li&gt; Manuals &lt;/li&gt;\n&lt;li&gt; Sustenance &lt;/li&gt;\n&lt;li&gt; Test &lt;/li&gt;\n&lt;/ul&gt;\n&lt;/div&gt;\n</code></pre>\n\n<p>in css file</p>\n\n<pre><code>.left-menu{float:left;width:200px;}\n</code></pre>\n'}]
['https://Stackoverflow.com/questions/61155', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/4298/']