Jump to content

Archived

This topic is now archived and is closed to further replies.

lead2gold

Wrapping that occurs under a float: left;

Recommended Posts

I have 3 columns (similar to PHP Freaks), but unlike here, i can't seem to make the colums go down until the end of the page. height: 100%; doesn't work and using height: 500px is only a temporary work around (IMO). Is there a way to ensure that now matter how much content is in the center (between a float:right and a float:left; column) there will never be wrapping below the columns. Thus the center column will always wordwrap and stay between the two outer menu colums or unless i create a new style that sets the clear flag (for a footer per say) and place it after them.

I want the effect of a <table> with 3 columns but i want to try to play with the big boys *you guys* and create it using CSS.. is it possible?

I'm a bit of a newb with CSS so bear with me if i didn't explain my problem properly.
To avoid making this message larger then it has to be, i cut out .mainmenur which is the float:right code (nearly identical to mainmenul other then a few border differences and background color).

[code].mainmenul {
    float: left;
    background-color: #D8FACF;
    visibility: visible;
    font-weight: bold;
    color: #000000;
    font-family: tahoma, helvetica, sans-serif;
    width: 150px;
    position: relative;
    text-align: center;
    vertical-align: top;
    line-height: 20px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #336633;
    border-bottom-width: 2px;
    border-left-width: 2px;
    border-bottom-style: solid;
    border-left-style: solid;
    border-bottom-color: #336633;
    border-left-color: #336633;
}


.mainitem {
    visibility: inherit;
    position: relative;
}
.mainbody {
    visibility: visible;
    font-weight: bold;
    color: #000000;
    font-family: tahoma, helvetica, sans-serif;
    padding: 0px;
    margin: 10px;
    position: relative;
    text-align: left;
    vertical-align: top;
}
[/code]

Share this post


Link to post
Share on other sites
[a href=\"http://www.alistapart.com/articles/holygrail/\" target=\"_blank\"]http://www.alistapart.com/articles/holygrail/[/a]

That should give you a hint. In the future, we will be able to use display: table-cell; to do that, but not just yet.

Share this post


Link to post
Share on other sites
[!--quoteo(post=361284:date=Apr 3 2006, 12:58 PM:name=moberemk)--][div class=\'quotetop\']QUOTE(moberemk @ Apr 3 2006, 12:58 PM) [snapback]361284[/snapback][/div][div class=\'quotemain\'][!--quotec--]
[a href=\"http://www.alistapart.com/articles/holygrail/\" target=\"_blank\"]http://www.alistapart.com/articles/holygrail/[/a]

That should give you a hint. In the future, we will be able to use display: table-cell; to do that, but not just yet.
[/quote]

Thank you very much, this page is exactly what i'm looking for. When i get home from work i will look into how they did it!

Thanks alot for the reply!

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.