Horizontal Layout Problem Driving Me Nuts!

[FlyByNight]

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>

[vincent]

<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

[FlyByNight]

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.

[vincent]

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;

[FlyByNight]

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.

[Author]

Posts