Grow your CSS skills. Land your dream job.

Horizontal Layout Problem Driving Me Nuts!

  • # June 4, 2009 at 12:01 pm

    Hi Everyone,
    I am pretty new to designing websites the CSS way, I did a few sites around 1999/2000 but they were all table based so I am still getting my head around the layout aspects of CSS.

    One problem that I just can’t crack (I have spent 3hrs trying and finally had to concede) is with laying out 3 items horizontally. I have a ‘search’ text field with a submit button, then I need a text link aligned left and then I need a text link aligned right. Please see the attached image file.

    I have tried putting each item in a div, floated, not-floated, text-align left/right etc. and the closest I cam was where I actually got all three items lined up across the page but their centre’s were not aligned so they sort of stepped down towards the bottom-right of the page.

    The all of the elements are contained within a wrapper which is set to be 85% of the full page width. Sorry but there is no live version of this yet to demonstrate.

    I really would appreciate some help with this before I lose what little hair I have left :)
    Thanks, Paul.

    Here’s my code:

    <div id="bodyWrap" style="width: 85%; display: inline;">

    <div id="searchForm" style="width: 55%">

    <cfform name="textSearchBox" method="post" action="listVillas.cfm" preserveData="yes">

    <fieldset class="searchFieldSet">
    <legend id="searchLegend">Quick Text Search</legend>

    <label for="locationName" class="sLabel" style="visibility: hidden;">Enter Destination</label>

    <cfinput type="text" name="locationName">
    <cfinput name="submit" type="image" src="images/searchButton.png" style="margin: 0.4em 0 0 0; padding: 0;">

    </fieldset>

    </cfform>

    </div>

    <div style="width: 20%; display: block; float: left; clear: none;">
    <a href="advSearch.cfm" id="advSearch">Advanced Search</a>
    </div>

    <div id="faves" style="width: 25%; display: block; float: right; clear: none; text-align: right;">
    <a href="myFaves.cfm">My Favourites</a>
    </div>

    </div>

    # June 4, 2009 at 1:23 pm

    <div id="container">
    <div id="colum1">
    text
    </div>
    <div id="colum2">
    other thing
    </div>
    <div id="colum3">
    search?
    </div>
    </div>

    CSS
    If you’re not using an external file, you put this in the header:

    <style type="text/css">
    #container {width: 900px; margin: 0 auto;}
    #colum1 {width: 300px; margin: 0; padding: 0; float: left}
    #colum2 {width: 300px; margin: 0; padding: 0; float: left}
    #colum3 {width: 300px; margin: 0; padding: 0; float: left}
    </style>

    I didn’t test this or anything, but that’s generally what you need to make a 3 column layout

    # June 4, 2009 at 2:38 pm

    Yep, that did the trick thanks Vincent. I can’t believe I spent so long on that, I was over complicating it by the looks of things :D

    Just carrying on from that do you if there is a way to specify a fixed width for column1 but then assign 50% of what is left to column2 and column3. I tried setting col1 to 450px and then assigning width: 50% to col2 and col3 but that just makes them jump down and occupy 2 x 50% of the whole container.

    I figured I would put col2 and col3 into another container and set them both to width: 50% but I don’t know what width I should set for the container. My objective is to have col1 remain the same width when the page is resized but have col2 and col3 expand and contract equally – is that possible?

    Thanks again for the help.

    # June 4, 2009 at 2:45 pm

    I never really use % as a width or height thing anymore. I don’t know if it works well with floats. I think most people just design at a width of no more than 960px, then just center that. So, you have white space on both sides of the layout and if someone has a low resolution, your website just takes up the whole page. There are min-height/width and max-height/width properties, I don’t know if that would help any, but the css for those is:

    min-height: 300px;
    min-width: 300px;
    max-height: 300px;
    max-width: 300px;

    # June 4, 2009 at 3:06 pm

    I am currently on v3 of the website that I am working on. The first two efforts were fixed width and centred and they worked OK. I thought I would try and see how it looked and behaved using a more elastic layout. I can already see that it’s becoming a pain so I may well go back to fixed width again.

    I just tried the max-width as you suggested and it went a bit wacky again so I tried setting col3 to float right and that did the trick. Now it all stays where I want it to as I stretch the page around 8-)

    Many thanks for your help.
    Paul.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".