Jump to content


Photo

Wrapping that occurs under a float: left;


  • Please log in to reply
2 replies to this topic

#1 lead2gold

lead2gold
  • Members
  • PipPipPip
  • Advanced Member
  • 164 posts
  • LocationOttawa, On

Posted 03 April 2006 - 01:32 PM

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).

.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;
}


#2 moberemk

moberemk
  • Members
  • PipPipPip
  • Advanced Member
  • 695 posts

Posted 03 April 2006 - 05:58 PM

[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.
Disclaimer: No matter how harsh I may be, I'm always IMO only.

#3 lead2gold

lead2gold
  • Members
  • PipPipPip
  • Advanced Member
  • 164 posts
  • LocationOttawa, On

Posted 03 April 2006 - 07:48 PM

[!--quoteo(post=361284:date=Apr 3 2006, 12:58 PM:name=moberemk)--][div class=\'quotetop\']QUOTE(moberemk @ Apr 3 2006, 12:58 PM) View Post[/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!




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users