Using float in my CSS breaks the layout

Question

Here's a before and after picture. When I add a float:left to the li, the layout breaks and the div that's supposed to be below this topmenu div, floats up.

alt text

Here's the CSS:

#topmenu
{
    background-color:#335D7C;    
}

#topmenu ul
{
    list-style:none;
    margin:0;
    padding:0;
}

#topmenu ul li
{    
    background-image: url('../Content/Images/topmenutick.png');
    background-repeat:no-repeat;
    color:White;
    float:left;
    padding-left:15px;
    padding-right:15px;
}

#topmenu ul li a
{    
    text-decoration:none;
}

#topmenu ul li a:hover
{    
    text-decoration:none;
}

Try adding clear: both; to whatever element is supposed to be below the floated list. — David Thomas
– David Thomas, Commented Dec 12, 2010 at 18:24
Could you please provide the HTML as well? It looks like you're missing a clear: left; after the #topmenu. — Andre
– Andre, Commented Dec 12, 2010 at 18:24

moeffju · Accepted Answer · 2010-12-12 18:25:00Z

3

That's because the elements don't take a full-width bounding box anymore. They all float to the left, and the following content runs right up to the end of the floating box. Add clear:left; to the CSS of the following element.

Alternatively, you can use a generated element to clear the float. Google for clearfix.

answered Dec 12, 2010 at 18:25

moeffju

4,4032 gold badges25 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

delete Over a year ago

This was the solution. I added 'clear:both' to the div in orange and it works perfectly. Thanks!

Null Head · Accepted Answer · 2014-08-30 03:30:02Z

1

You should control the urge of using floats.

#topmenu ul li
{    
    ...
}

~~float:left;~~ display: inline;

answered Aug 30, 2014 at 3:30

Null Head

2,94113 gold badges64 silver badges87 bronze badges

Comments

István Ujj-Mészáros · Accepted Answer · 2010-12-12 18:24:28Z

0

Use a cleaner div after the floated element.
CSS:

.cl {
    clear: both;
}

HTML:

<div class="cl"></div>

answered Dec 12, 2010 at 18:24

István Ujj-Mészáros

3,2571 gold badge30 silver badges48 bronze badges

4 Comments

David Thomas Over a year ago

Why add elements just to give them a css rule that can be applied to any pre-existing element?

István Ujj-Mészáros Over a year ago

@David Thomas: Maybe just my bad habit.

David Thomas Over a year ago

fair enough, I guess. But that way lies the madness of tag-soup, and divitis...

István Ujj-Mészáros Over a year ago

@David Is it good to add just the cleaner class to the next element even if it has a class already, for example <div class="next_divs_class cl"> or is it better to avoid the .cl class entirely and add the clear: both to the CSS for every class which needs it?

Collectives™ on Stack Overflow

Using float in my CSS breaks the layout

3 Answers 3

1 Comment

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related