Bottom Margin in UL problem

Posted on 2007-07-31
Last Modified: 2010-10-05

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.
Question by:matthew016
    LVL 30

    Expert Comment


    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

    LVL 9

    Author Comment

    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 !
    LVL 30

    Accepted Solution

    cause a float will contain its floated children

    an unfloated parent will not contain its floated children

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
    Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
    In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
    In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at Browse or search based on font properties or name to find a suitable font for…

    737 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    22 Experts available now in Live!

    Get 1:1 Help Now