4 replies [Last post]
benjam
Offline
Regular
salt lake city, UT
Last seen: 15 years 32 weeks ago
salt lake city, UT
Timezone: GMT-7
Joined: 2004-12-03
Posts: 12
Points: 0

i have a layout where the left side is static at about 180px, the cnter column is static at about 450px and i would like the right side to be dynamic (stretching to fill the rest of the window) but keep running into problems because my right side column contains a table.

if i float:left the left column and float:left the center column and float:left the right column, it breaks and the right column goes below the other two (the center is longer than the left) and spreads to 100% window width.

i can't seem to figure this out. does anybody have any suggestions?

it seems the problem is with the table, if i set the width to auto, its either not wide enough or too wide and goes below the other columns. if i set it to 100%, it goes below the other columns and spreads to fill the screen.

how can i set the div to stay at an equal hieght as the other two, but still keep the table wide enough to fill the space available?

here is some sample code (not the real code, which i don't have with me right now)

#wrapper {
margin: 0;
padding: 0;
}

#history {
float: left;
width: 180px;
margin: 3px;
}

#game {
float: left;
width: 450px;
margin: 3px;
}

#chat {
float: left;
}

#chat table {
/* width: auto; */ neither of these settings work for what i want
width: 100%;
}



Left column history table is here


450px wide game board goes here




Username
Message

player
Insert a long message here to make sure
that when the table is either stretched
or contracted that it wraps properly



kajic
Offline
Regular
Last seen: 14 years 35 weeks ago
Joined: 2007-02-15
Posts: 26
Points: 0

Hello. I am new to css but I

Hello. I am new to css but I will try to help you as good as I can. I am not saying my solution is optimal but if I understood you correctly it does what you want it to. I am not entirely happy with how the rightmost column degrades when the window isn't wide enough but maybe someone else can help out with that part (the undesired behaviour happens in IE, in FF it woks just fine).

First of all, you should read these two articles and try to come up with a solution of your own, I think it should be possible.
If you get stuck or don't understand the articles at all feel free to return and check the code I have written for you.
http://www.alistapart.com/articles/negativemargins/ (I like this article in particular)
http://www.positioniseverything.net/articles/onetruelayout/anyorder

Here is a html-page with the solution to your problem:

three columns layout using negative margins


#history {
width: 180px;
float: left;
}
#container {
width: 100%;
float: right;
margin-left: -180px;
}
#main {
width: 450px;
float: left;
margin-left: 180px;
}

Left column history table is here


450px wide game board goes here



Username
Message

player
Insert a long message here to make sure that when the table is either stretched or contracted that it wraps properly


benjam
Offline
Regular
salt lake city, UT
Last seen: 15 years 32 weeks ago
salt lake city, UT
Timezone: GMT-7
Joined: 2004-12-03
Posts: 12
Points: 0

thanks for those article

thanks for those article links, very nice.

i'll take that code home and give it a twirl on my full code and see how it works out and let you know tomorrow.

thanks again for your help.

benjam
Offline
Regular
salt lake city, UT
Last seen: 15 years 32 weeks ago
salt lake city, UT
Timezone: GMT-7
Joined: 2004-12-03
Posts: 12
Points: 0

well i took it home and

well i took it home and played around with it, but could never get it to look quite right. so i thought about it for a minute and then had an epiphany...

if setting the margin works to wrap a liquid column around one column, why wouldn't it work for two?

i changed the css to hold the first and second columns static and floated to the left, then the third column has it's left-margin set to be large enough to wrap around the first two.

here is my completed css:
#history {
float: left;
width: 200px;
margin: 3px;
margin-top: 0;
padding-top: 1px;
}

#board {
float: left;
margin: 3px;
margin-top: 0;
width: 450px;
text-align: center;
}

#chat {
margin: 3px;
margin-left: 669px;
padding-top: 1px;
}

#chat table {
width: 100%;
border-collapse: collapse;
}

i still need to tweak it to look right in IE, but it does what i want in FF.

there is one minor thing that is a little strange...
without the padding-top on the #chat and #history divs, they don't line up correctly, and i'm not sure why. could anybody let me know why so i might avoid it in the future?

the padding-top: 1px; fixes it for now, but i was just curious.

thanks again for your help.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 8 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

It's cos of collapsing

It's cos of collapsing margins likely, the 1px top padding is preventing an element collapsing with that margin, changing the padding to a border should also have the same effect.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me