Databases
StackOverflow2013
Postsdbo
PODiv getting pushed to the right when using float:left on it
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODiv getting pushed to the right when using float:left on it
    text
    copied!<p>I'm currently creating a website and I came across a strange thing: I have a content div that's 950 width and centered on the page. Inside that I have a header div, a menu div and some other content div. I would like the menu div and that other content div to be right next to each other so I thought about using float:left on both divs. However, when I use this float:left on the menu div, it's getting pushed to the right and I can't figure out why. I think some other element is pushing it to the right.</p> <p>I'm using a custom Drupal theme, a subtheme of Zen to create the page by the way.</p> <p>Here's the HTML I'm using to create the page (without the header):</p> <pre><code>&lt;div id="root"&gt; &lt;div class="content"&gt; &lt;div class="left-menu"&gt; &lt;ul&gt; &lt;li&gt;&lt;p&gt;Camera&lt;/p&gt;&lt;/li&gt; &lt;li&gt;&lt;p&gt;Audio&lt;/p&gt;&lt;/li&gt; &lt;li&gt;&lt;p&gt;Licht&lt;/p&gt;&lt;/li&gt; &lt;li&gt;&lt;p&gt;Lenzen&lt;/p&gt;&lt;/li&gt; &lt;li&gt;&lt;p&gt;Grip&lt;/p&gt;&lt;/li&gt; &lt;li&gt;&lt;p&gt;Accessoires&lt;/p&gt;&lt;/li&gt; &lt;li&gt;&lt;p&gt;Recorders&lt;/p&gt;&lt;/li&gt; &lt;li&gt;&lt;p&gt;Transport&lt;/p&gt;&lt;/li&gt; &lt;li&gt;&lt;p&gt;Edit suits&lt;/p&gt;&lt;/li&gt; &lt;li&gt;&lt;p&gt;Crew&lt;/p&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div class="products-overview"&gt; This is some other content that I want to the right of the menu. &lt;/div&gt; &lt;/div&gt; </code></pre> <p></p> <p>And here are some CSS properties I've set on left-menu and products-overview:</p> <pre><code>.left-menu { margin-top: 10px; background-color: #BBB; width: 150px; float: left; } .products-overview { background-color: #BBB; float: left; } </code></pre> <p>Could anyone please explain me why the left-menu is being pushed to the right?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload