Preventing wrapping around a float DIV

I'm thinking wrongly about this and I can't figure out where my error is.

I have three div's:

1. A big DIV that encompasses everything.

div.body {
background-color: #FFFFFF;
width : 100%;
margin : 1em;
}

2. A floating left DIV.

div.left {
position : relative;
float : left;
background-color: #FFFFFF;
}

3. A floating right DIV.

div.right {
position : relative;
float : right;
background-color: #FFFFFF;
}

div.left isn't very tall. div.body, on some pages, is very very tall.

I thought it would be extra cool if the text within div.body slid (I'm missing the right word here) all the way to the left side of the browser window after div.left finished.

I was wrong. It looks awful.

How do I make it stop?

Effectively, I want to set the height of div.left to 100%.

Does my explanation make sense?

 

I'm no expert, but I think you can assign a 100% height to the left div, but only if you assign a height to your div.body.

You might give it a try until someone smarter comes along

 

Thanks mjewel.

Unfortunately, that has the same effect. <blush>

 

Hmm, I just tested it and it seems to work for me. Are you assigning a fixed height to the wrapper?

<style type="text/css">
<!--

div.body {
background-color: #FFFFFF;
width : 100%;
margin : 1em;
height:500px;
}



div.left {
position : relative;
float : left;
background-color: #FFFFFF;
height:100%;
}


div.right {
position : relative;
float : right;
background-color: #FFFFFF;
}

-->
</style>

 

Ah... no. I set the wrapper to 100%. Each page contains a different amount of content.

 

The 3 column layout with a footer is the holy grail of CSS and there is no perfect method to do it. There are various hacks and javascript that get close.

If you don't want a footer, I think you just need to add another div box for the center main body content, with a fixed or percentage width and auto height which would constrain the center from flowing into the left or right div's? You would have a wrapper around three boxes- left, center, right.

Of course, I don't know all you are trying to accomplish so I may be way off base.

http://www.redmelon.net/tstme/3colfixed/

 

I do want a footer.

Right now the footer is just at the bottom of the content, inside div.body.

I've tried using another DIV for the center main body content. I could not make it work, but I will try again.

Here is a page that shows what I have right now. If you scroll down, you can see the issue.

http://www.tech-faq.com/ringback-number.shtml

 

I don't think there is a way to set the height of the left div to 100% unless you define a height. Other than using a table to establish a left and right column (where you could then place your div's) or if your left div is going to be the same fixed height on all pages, you could absolute position the main body div from the top and left - I don't know what else to suggest.

 

I just worked on a 2 column layout in CSS yesterday - I too had to learn from scratch. All my sources told me that both columns had to say float:left, not one float:left and one float:right. I have no idea thouhg, just a thought.

The columns are working though. The area behind the black bamboo painting is the second div: http://www.rosebytes.com/bobo/musical_articles/

 

I gave up and borrowed a 3 column layout from here: http://www.bluerobot.com/web/layouts/layout3.html

I am fairly happy I did, because I really have no idea how to implement layers and now I have them as an extra bonus.