Fri, 2007-02-16 20:55
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
Sat, 2007-02-17 16:18
#1
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
Mon, 2007-02-19 23:42
#2
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.
Thu, 2007-02-22 18:13
#3
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.
Thu, 2007-02-22 18:15
#4
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.