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

A little help with layout needed

Options
  • 27-03-2008 9:07pm
    #1
    steveland?
    Closed Accounts Posts: 4,842 ✭✭✭


    Hi folks,
    Need a little help with one element of a layout I'm working on at the moment.

    I've attached a mock up of what I'd hope the layout will look like and have it pretty much doing what it's supposed to but having a little problem with floating the columns to either side while keeping inside a "container".

    Here's a quick summary of the nesting of the divs in the html with all actual content taken out:
    [PHP]<body>
    <div id="container">
    <img src="logo.png" alt="">
    <div id="options">
    <!-- LIST OPTIONS -->
    </div>
    <div id="content">
    <div class="leftColumn">
    <!-- CONTENT -->
    </div>
    <div class="rightColumn">
    <!-- CONTENT -->
    </div>
    </div>
    </div>
    </body>[/PHP]

    And here's a quick view of the CSS (with all styling info etc taken out):
    [PHP]#container { width: 50%; margin-left: auto; margin-right: auto; }
    #options { /* colour, border styling etc */ }
    #content { /* colour, border styling etc */ }
    #content .leftColumn { float: left; }
    #content .rightColumn { float: right; }[/PHP]

    So basically it's a 50% of visible screen wide box, on top is the logo (fine), under that are the links (fine) and under that is a content box. In that content box I want to basically have 2 columns, leftColumn and rightColumn.

    What's happening is that if I put anything into the content div itself it's fine, height of the content box gets bigger as more stuff is put in.

    Problem is that when I put anything into leftColumn or rightColumn they go off the end of the content box. I want to have the content box (which is styled up) to contain the two columns and encompass all of both columns (if you get my drift).

    If it matters, the rightColumn box contains an image. The leftColumn box contains only text. The height of the content box changes if more text is put in but it doesn't go around the whole image in the rightColumn.

    Any ideas on how to make sure that the content box emcompasses all of the leftColumn and the rightColumn?

    Cheers



    Edit: Actually I think I just solved it by taking out the rightColumn div altogether and just leaving the leftColumn div there. Then put the image from the rightColumn div directly into the content div...

    Still if anyone knows how to put a left and right floating div into a single containing div and make sure the containing div surrounds them completely let me know..
    Thanks


Advertisement