CODEWITHSUNDEEP
htmlcss
Tim
Tim

Reputation: 2649

Getting floats to work correctly in CSS

I thought I understood floats, but seems I don't.

I've got a div (#service-list) which I've floated left and I've added another div (#social) straight after, floating left too.

What's happening is the 2nd div after is being pushed down to a new line despite there being enough room to fit the div.

#service-list{
width: 660px;
border-right: 1px solid #808080;
border-bottom: 1px solid #808080;
border-left: 1px solid #808080;
float: left;
padding: 15px 0 20px 15px;
margin: 0 0 0 25px;
clear: both;
}
#social{
width: 200px;
float: right;
clear: left;
border: #666 solid 1px;
}

Here's the url: http://s361608839.websitehome.co.uk/101d/tim/index.html

Thanks, Tim

Upvotes: 0

Views: 51

Answers (3)

Explosion Pills
Explosion Pills

Reputation: 191729

You're using clear in a lot of spots before you want float elements to occur which prevents them from floating properly. I was able to get this to work by doing the following:

  1. move #social before #services-list in the DOM
  2. Remove clear: both from #services-list (otherwise it won't float)

Upvotes: 1

Antony
Antony

Reputation: 15106

Remove

<div class="clearfix"></div>

And clear: left; in #social

#social{
    width: 200px;
    float: right; /* You should better use float: left */
    border: #666 solid 1px;
}

Upvotes: 1

Philipp
Philipp

Reputation: 15629

You have an clearfix between service-list and social with clear:both - so theres naturally not floating - clear:left in service-list is also wrong..

Upvotes: 0

Related Questions