Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie
Hi there,
There is an issue with role permissions that is being worked on at the moment.
If you are having trouble with access or permissions on regional forums please post here to get access: https://www.boards.ie/discussion/2058365403/you-do-not-have-permission-for-that#latest

CSS Question

  • 25-03-2009 3:45pm
    #1
    Registered Users, Registered Users 2 Posts: 872 ✭✭✭


    Hi,

    Please see the image below. The black box is a fixed height div.

    The grey div's containing the ul's are floating left.

    I want the smaller div's (ones with less destinations) to appear under each other if there is enough space in the black div)

    So, UK and USA are fine where they are, but Canada, Capetown, Australia and New Zealand should appear under each other because there is enough space left in the black div.

    2009-03-25_1636.png

    I hope i have made myself clear

    Thanks for any info/tips


Comments

  • Closed Accounts Posts: 7,145 ✭✭✭DonkeyStyle \o/


    I'd create 6 fixed size, left-floated divs to give you your columns... then where you want multiple rows in a column, just create some more divs inside that column.

    Right now you've got divs that are just wrapping around because they've run out of horizontal room... they're doing their best to find a spot for themselves based on the flow of the other divs, but it's clearly not what you want.


  • Registered Users, Registered Users 2 Posts: 2,120 ✭✭✭p


    I think this might be one of those things that's just not possible with CSS.


  • Registered Users, Registered Users 2 Posts: 197 ✭✭pauldiv


    It you create two divs then each of your boxes could be made to flow into them with the natural flow of the document.

    Say your boxes are 120 px wide. The left div could be made about 420 px wide with around 10-15 pixels padding around the boxes. This way they should drop in easily. Then do the same with the right div only use a different width.


  • Moderators, Society & Culture Moderators Posts: 25,558 Mod ✭✭✭✭Dades


    I assume the country boxes need to be able to expand and maintain a coherent structure automatically? This looks to be a bit much to ask.

    If not you could just use extra columns as suggested above, knowing how large in advance each of the separate boxes are.

    Have you tried experimenting with different ordering of the boxes - e.g. from smallest to largest?


  • Registered Users, Registered Users 2 Posts: 872 ✭✭✭grahamor


    Thanks for the replies and the ideas.

    Unfortunately, the boxes are dynamic, sometimes only 5 country boxes appear at one time, so it's hard to judge which boxes will be where on the page, hence me not using fixed columns that float left.

    Thanks again


  • Advertisement
  • Moderators, Science, Health & Environment Moderators Posts: 9,035 Mod ✭✭✭✭mewso


    Should be easy enough to get it working if you are willing to wrap any divs you need on top of each other within a containing div.


  • Registered Users, Registered Users 2 Posts: 197 ✭✭pauldiv


    Not being able to predict the size, contents of, and number of boxes makes it even more of a headache.

    I would experiement with css first but I think the page might be much easier to build using a table layout.


  • Users Awaiting Email Confirmation Posts: 351 ✭✭ron_darrell


    CSS is not the way to go with this because:

    a) You don't know in advance how many boses there will be
    b) You don't know how big each of the boxes will be
    c) Just because :)

    Javascript on the other hand should be able to deal with this relatively easily. You'll need to write a script that finds out the height of each div and then dynamically reposition the divs into the layout you are looking for.

    Give it a try yourself and if you can't get it to work come back to me - or I'm sure one of the other posters will run with what I've suggested and help you out.

    Regards
    -RD


Advertisement