2 replies [Last post]
richclever
Offline
newbie
Last seen: 13 years 35 weeks ago
Joined: 2006-10-17
Posts: 9
Points: 0

I am trying to get three lists to appear next to each other in a container div but am having problems.

The lists are created dynamically using php/mysql but I am having major problems getting them to display properly as the second ones won't float as they should. I have been playing with the code but am getting to the stage where I can't see what is going on.

The page can be seen at http://ictechnology.net/csstest/floattest.php.

I know there is duplicated data in there, no problems as it is just test data.

If it helps, here is the html that is created by the script and it's accompanying css.

Untitled Document

Countries



  • Australia

  • Australia

  • Austria

  • Austria

  • Balearics

  • Balearics

  • Bosnia
  • Bosnia

  • Brazil

  • Brazil

  • Bulgaria
  • Bulgaria

  • Canada

  • Canada

  • Canary's
  • Canarys

  • Caribbean

  • Caribbean

  • China
  • China

  • Croatia

  • Croatia

  • Cyprus
  • Cyprus

  • Czech-Rpb

  • Czech-Rpb

  • England
  • England

  • France

  • France

  • Germany
  • Germany






    • Greece

  • Greece

  • Hungary

  • Hungary

  • India
  • India

  • Ireland

  • Ireland

  • Italy
  • Italy

  • Kenya

  • Kenya

  • Lithuania
  • Lithuania

  • Madeira

  • Madeira

  • Malta
  • Malta

  • Mexico

  • Mexico

  • Montenegro
  • Montenegro

  • Morocco

  • Morocco

  • Netherlands
  • Netherlands

  • New Zealand

  • New Zealand

  • Poland
  • Poland

  • Portugal

  • Portugal




    • Romania

    • Romania

    • Scotland

  • Scotland

  • Slovakia

  • Slovakia

  • Slovenia
  • Slovenia

  • South Africa

  • South Africa

  • Spain
  • Spain

  • Sri-Lanka

  • Sri-Lanka

  • Switzerland
  • Switzerland

  • Tanzania

  • Tanzania

  • Thailand
  • Thailand

  • Tunisia

  • Tunisia

  • Turkey
  • Turkey

  • UAE

  • UAE

  • USA
  • USA

  • Wales

  • Wales



  • .countrybx{ clear:left; border:2px solid #FF3399; background-color:#FFEFF7; width:540px;

    }
    .countrybxhd{
    background-color:#F987C0;
    font-size:16px;
    padding:5px;
    padding-left:4px;
    color:#FFFFFF;
    font-weight:bolder;
    border-bottom:1px solid #000000;
    }
    .countin{
    display:inline;
    margin:10px;
    }
    .countul{

    width:140px;

    }
    .countul1{

    }
    .countbox{
    float:right;
    margin-right:20px;
    margin-left:30px;
    display:inline;

    }
    .maincnt{

    margin-right:60px;

    }

    If anyone can help that would be great, hopefully it's something simple I am missing.

    Richard

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 6 years 8 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    Firstly, and the most posted

    Firstly, and the most posted on problem, you're not containing your floats;
    add

    overflow:hidden; to .countrybx

    Then you should simply have to add float:left to .countul

    Hugo.

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    richclever
    Offline
    newbie
    Last seen: 13 years 35 weeks ago
    Joined: 2006-10-17
    Posts: 9
    Points: 0

    Thanks Hugo, That's sorted

    Thanks Hugo,

    That's sorted it beautifully.

    Right, something else to read up on then.

    Much appreciated,

    Rich