2 coloumn liquid layout problem

let them all float to the left...

I tried what was suggested but then i end up with no space between each column. But as soon as i add a margin the column shifts below the other one again!!

you could lock the width of the first or second column and it will flow, but if you dont want that, reply again...

Or visit A list apart site, they have the solution for you...

when i lock one of them the other one still move beneath it. The two resolutions i need to cater for are 800 by 600 and 1024 by 768 that is why i need to stick to percentages as opposed to pixels.

Here You Go dude, use these css with those ID's...

Quote:
body {
margin:0px 0px 0px 0px;
}

#leftcontent {
float:left;
width:67%;
background:#fff;
border-right:2px solid #000;
border-bottom:2px solid #000;
margin-right:15px;
padding-bottom:20px;
}

#top {
float:left;
width:100%;
background:#fff;
border-right:2px solid #000;
border-bottom:2px solid #000;
margin-right:15px;
padding-bottom:20px;
}

#rightcontent {
}

Yes Right is blank...

Thanx for the help. Thats kind of the idea im looking for...except i dont want the white space to the right of the column, i d rather have the white space in between the two columns so when the resolution is changed to 1024 by 768 there isnt a massive gap to the right. Hope this makes sense.

And its dudette by the way.

Lisa

Sorry, my bad Lisa...Actually If you try to put the Ids on Css parts, there wouldnt be any spaces it will fill the whole page, you just need to adjust your paddings as desired... Did you try and use the css I gave you? The Top is where actually a banner is normally located, You can swap the left and right css tags to your liking...

Tried the code but still no luck im afraid. It seems the only way i can stop the tables from stacking on top of one another is to use fixed widths as opposed to percentages but then i get the problem with the extra white space depending on the resolution.

Actually it works for me, but I have the complete html that it works...
Ill give you a link to read...
http://www.alistapart.com/stories/journey/

And heres the actual code I sent you as you can see on the site it works...
http://glish.com/css/9.asp

Now theres three column if you decide to use one on that page...

I have attached the html (home.txt) and css (main.txt) files. As you can see i have used the example code you sent me but yet again the tables move when the browser screen is re-sized

Ahhhh Ok I see where the problem lies... You didnt mention You used tables...

Anyways, the css I sent you are for a pure CSS layout... Hmm let me figure out your site for a while....

Ok heres the solution:

On the CSS I gave you. on the right tag make it like this...

Quote:
#rightcontent {
position:absolute;
left:67%;
}

or on your css you edited:

Quote:
#right {
position:absolute;
left:67%;
}

If you want the second table next to the first you need to wrap them in another table, an easier way would be to just use one table and make use of rowspan and colspan.

One of the reasons it's not working is you dont have border, cellpadding or cellspacing set to anything so is going to default which is different with every browser, on average it's a bout 2 for the cells and 0 for table.
But one of your td widths is 750

You can use CSS and HTML like you are but the table has to be one piece, or do the whole thing in CSS

take and out of main as well

Im not sure what difference it makes with not having a border?? And placing the tables in one big table puts me back to where i was initially when i actually want to try and use mainly CSS as opposed to tables.

In reply to demonhale though, thanx very much to your last post it has now solved the stacking problem and the resolution problem!! Superb.