CODEWITHSUNDEEP
htmlcss
delete
delete

Reputation:

Using float in my CSS breaks the layout

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 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;
}

Upvotes: 1

Views: 3880

Answers (3)

Null Head
Null Head

Reputation: 2941

You should control the urge of using floats.

#topmenu ul li
{    
    ...
}

float:left; display: inline;

Upvotes: 1

moeffju
moeffju

Reputation: 4403

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.

Upvotes: 3

István Ujj-Mészáros
István Ujj-Mészáros

Reputation: 3247

Use a cleaner div after the floated element.
CSS:

.cl {
    clear: both;
}

HTML:

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

Upvotes: 0

Related Questions