Jump to content

Wrapping that occurs under a float: left;


lead2gold

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]
Link to comment
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!
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

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.