CODEWITHSUNDEEP
htmlcssgoogle-chromehtml-lists
user1037234
user1037234

Reputation: 11

li on same line although display:block specified

I have some code like this:

<div id="sidemenu">
<div id="sidemenuhdr">Beauty Courses</div>
<ul id="sidebarmenu">
<li><a href="#"><b>Professional Skincare & Facials</b></a></li>
<li><a href="#"><b>Spray Tanning</b></a></li>
<li><a href="#"><b>Eyelash Extensions</b></a></li>
<li><a href="electricalfacials.htm"><b>Electrical Facials</b></a></li>
<li><a href="holisticfacials.htm"><b>Holistic Facials</b></a></li>
<li><a href="#"><b>Diamond Peel Microdermabrasion</b></a></li>  
<li><a href="#"><b>Natural Facelift Massage</b></a></li>
</ul>
</div>

With CSS like this:

#sidemenu{
width:316px;
float:left;
margin: 5px 10px 5px 0;
background-color:#ffe2d6;
border: 2px solid #3b003b;
display:block;
}

#sidebarmenu{
width:250px;
display:block;
padding:0px; 
margin:2px; 
list-style:none; 
height:20px; 
position:relative; 
z-index:500; 
font-family:arial, verdana, sans-serif;
}

#sidebarmenu li{
float:left; 
}

#sidebarmenu li a{ 
display:block;
height:20px; 
line-height:20px; 
background:none; 
color:#000000; 
text-decoration:none; 
font-size:14px; 
font-weight:bold; 
padding:5px 5px 5px 5px;}

Thing is, the result I'm getting is

It is putting Electrical Facials and Holistic Facials on the same line.

Any ideas?

Upvotes: 1

Views: 1664

Answers (4)

M&#225;rio Rodrigues
M&#225;rio Rodrigues

Reputation: 862

Change #sidebarmenu li to this:

#sidebarmenu li{
clear:both;
}

That would do the trick!

Upvotes: 5

Alex Ciminian
Alex Ciminian

Reputation: 11508

The short answer is to put in:

#sidebarmenu li{
    float: left;
    clear: left;
}

If you just remove the float, you won't get the pink stretch to the bottom. That's because you've set height: 20px on #sidebarmenu.

You should consider having as few styles as possible and to separate styling from markup (i.e. don't use <b> there, use font-weight.

Upvotes: 2

Mrlitty
Mrlitty

Reputation: 77

Just remove #sidebarmenu li{float:left; } if you want to li element from top to bottom

Upvotes: -1

Michael Krelin - hacker
Michael Krelin - hacker

Reputation: 143139

The a elements are display:block, but your li elements are float: left. What exactly do you expect?

Upvotes: 2

Related Questions