CODEWITHSUNDEEP
htmlcss
Jimmy
Jimmy

Reputation: 12487

How to correctly float lists

I'm having a hard time with floats. I am trying to float the list on the header and footer to the right and keep the image on the left.

http://jsfiddle.net/spadez/KYdnJ/21/

When I add in the floats the layout goes all screwy. This is the CSS which is relevant:

#header {
    line-height: 50px;
    background-color: #F2F2F2;
    border-bottom: solid 1px #E8E8E8;
    padding: 0px 20px 0px 20px;
}
#header li { 
    font-family: arial, sans-serif; 
    background-color: #D3D3D3; 
    display: inline-block; 
    font-weight: bold; 
    line-height: 28px; 
    padding: 0px 9px 0px 9px; 
    font-size: 12px;
    float: right;
}
#header img {
    height: 40px;
    float: left;
}

Can anyone tell me where I am going wrong please?

Upvotes: 1

Views: 99

Answers (4)

TomCollinson
TomCollinson

Reputation: 44

Apply overflow:hidden to the header and footer divs

http://jsfiddle.net/XQLkR/

Upvotes: 0

ASGM
ASGM

Reputation: 11381

The problem with floating the individual li is that they end up floating within the ul, which itself remains left-aligned. Rather than floating the individual li elements, you can float the whole ul. At least in the jsFiddle, it's also necessary to bulk up the #main section, lest the footer and header collide:

ul {position:relative;float:right;}
#main {height:200px;width:100%;clear:both;}

Here's the jsFiddle, with the floats on the li removed and the above CSS added.

Upvotes: 2

PonrajPaul
PonrajPaul

Reputation: 174

try with this. Add float:right in

#header ul

instead of

#header li

and make sure to clear floats. Add one div with class clear

<div class="clear"></div>

HTML

<div id="header">
   <img src="test.jpg"/>
   <ul>
      <li><a href="#">Post</a></li>
   </ul>
   <div class="clear"></div>
</div>

CSS

#header {
  line-height: 50px;
  background-color: #F2F2F2;
  border-bottom: solid 1px #E8E8E8;
  padding: 0px 20px 0px 20px;
}
#header ul { 
  font-family: arial, sans-serif; 
  background-color: #D3D3D3; 
  display: inline-block; 
  font-weight: bold; 
  line-height: 28px; 
  padding: 0px 9px 0px 9px; 
  font-size: 12px;
  float: right;
}
#header img {
  height: 40px;
  float: left;
}
.clear{
  clear:both;
}

Upvotes: 0

Tony Freed
Tony Freed

Reputation: 71

If I understand it right, just remove all float:right that you have.

Upvotes: 0

Related Questions