• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 396
  • Last Modified:

Bottom Margin in UL problem


Here is another bug on my website, for which I need your expertise ;-) !!

Compare this in Mozilla and IE6 and check the last menu "Aluminium"


I want to seperate the two ul's "PVC" and "Aluminium"

I tried with this as a test :

#leftside ul.avmenu {
      margin:0 0 180px;

But you can see that it doesn't work well for both but especially for Mozilla.

Thank you for any help.
  • 2
1 Solution
Mark StegglesWeb DeveloperCommented:

It's because the anchors are floated and the ul is not containing them... add float:left to the #leftside ul.avmenu and you will see your margin take effect

matthew016Author Commented:
if I understand the <a> elements were floated,
and they were out of the flow, so ul was not containing them.

But why by putting ul to float:left, they contain them suddenly ?

Thank you !
Mark StegglesWeb DeveloperCommented:
cause a float will contain its floated children

an unfloated parent will not contain its floated children
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now