CODEWITHSUNDEEP
htmlcssdrupallayoutcss-float
Devos50
Devos50

Reputation: 2035

Div getting pushed to the right when using float:left on it

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.

I'm using a custom Drupal theme, a subtheme of Zen to create the page by the way.

Here's the HTML I'm using to create the page (without the header):

<div id="root">
<div class="content">
    <div class="left-menu">
        <ul>
            <li><p>Camera</p></li>
            <li><p>Audio</p></li>
            <li><p>Licht</p></li>
            <li><p>Lenzen</p></li>
            <li><p>Grip</p></li>
            <li><p>Accessoires</p></li>
            <li><p>Recorders</p></li>
            <li><p>Transport</p></li>
            <li><p>Edit suits</p></li>
            <li><p>Crew</p></li>
        </ul>
    </div>

    <div class="products-overview">
    This is some other content that I want to the right of the menu.
    </div>

</div>

And here are some CSS properties I've set on left-menu and products-overview:

.left-menu {
margin-top: 10px;
background-color: #BBB;
width: 150px;
float: left;
}

.products-overview {
background-color: #BBB;
float: left;
}

Could anyone please explain me why the left-menu is being pushed to the right?

Upvotes: 0

Views: 1271

Answers (3)

RedPoppy
RedPoppy

Reputation: 623

In Mozilla Firefox it looks ok to me. From your code, I can only see that you need a width for the content div. and watch the dimensions, especially left/right padding and borders.

Upvotes: 0

Serlite
Serlite

Reputation: 12258

Hmm, I believe this is a result of the normalize.css stylesheet you're using.

The problem stems actually from the .header element, which has a table within it. The normalizing stylesheet has a margin-bottom:1.5em applied to the table, which translates into a margin on the .header element (since it has no padding/border), which in turn sends the .left-menu to the right (since the margin causes there to be no space for it to fit on the left).

Adding to your current .header table definition can fix this, with a simple:

.header table{
    margin-bottom: 0;
}

I hope this is what you were looking for! If not, let me know and I'll be happy to help further. Good luck!

Upvotes: 2

user2329093
user2329093

Reputation:

I tried to replicate your problem. I did and found a solution that should work. Just set the products-overview class to float:none. See this fiddle. http://jsfiddle.net/shaansingh/yj4Uc/

Upvotes: 0

Related Questions