3 column div layout, not same length

[tox0tes]

I have 3 divs which are side by side, making 3 columns. The middle column contains the content, which obviously is a different height depending on how much text is in it...and the left and right columns each have a different background image to accomodate for a different content height, if the content div should become bigger than the left and right divs. However, when the content div grows, the left and right divs do not grow with it, which leaves a blank space under them. How do I make it so that all three divs grow with each other?

http://www.solsurfer.com/alienindex.html

[Lchad]

Easy one! You need Faux Columns. http://www.ilovejackdaniels.com/css/...iquid-layouts/

[tox0tes]

That would work great except for one problem. I don't want to make the body background repeat - I want it for a specific div. I am trying to use the "faux column" method by having the 3 divs within a container div. The container div would use the repeating background image. I can't get it to work though. Here is the snippet of code I am using:

CSS:

Code: Select all

.row {
width:776px;
margin-right:auto;
margin-left:auto;
margin-top:0px;
margin-bottom:0px;
padding:0px;
clear: both;
}
.faux {
background-image:url(images/bar_03.gif)
}
#leftgrad {
width:42px;
padding:0px;
float:left;
background-image:url(images/indexsliced_14.gif)
}
#divcontent {
width:684px;
padding:0px;
float:left;
background-color:#0b0b0b;
padding-bottom: 0px;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
}
#rightgrad {
width:50px;
padding:0px;
float:left;
background-image:url(images/indexsliced_15.gif)
}

HTML:

Code: Select all

<div class="row faux">
<div id="leftgrad">
<img src="images/indexsliced_10.gif" width="42" height="223" alt="Alien Juice Designs"/>
</div>
<div id="divcontent">
<p class="h2">
Header Statement
</p>
<p class="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis commodo, tellus nec condimentum placerat, justo metus accumsan leo, vitae molestie elit sapien molestie nisl. Vivamus non sem quis massa commodo blandit. Cras laoreet. Donec commodo. Vestibulum libero. Aliquam erat volutpat. Integer nec sapien. In commodo rutrum nisl. Morbi dapibus felis ut augue ultrices laoreet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
</p>
<p class="h2">
Header Statement
</p>
<p class="content">
Nam mollis erat porttitor est. Integer lectus purus, ultrices quis, fermentum posuere, auctor mattis, purus. Suspendisse potenti. Phasellus consectetuer. Maecenas quis urna vitae velit hendrerit pulvinar. Morbi cursus lobortis tortor. Sed sed dui. Etiam urna mi, bibendum a, tincidunt in, imperdiet non, est. Aenean accumsan, nibh ut sodales auctor, massa justo vehicula lacus, sed condimentum justo odio vel ante. Proin sollicitudin massa sed sapien. In tincidunt augue eget mauris. In hac habitasse platea dictumst. Vestibulum et leo. Donec dignissim dolor sit amet felis.
</p>
<p class="h2">
Header Statement
</p>
<p class="content">
Sed fermentum feugiat ipsum. In hac habitasse platea dictumst. Praesent et justo. In sollicitudin nulla a turpis. Vestibulum consequat mollis lacus. Phasellus hendrerit mollis ligula. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus viverra mauris ut neque. Etiam sed nisi. In sagittis ipsum eu risus. Nunc nisi velit, suscipit vel, semper at, tincidunt in, dui. Donec nibh. Duis blandit posuere leo. Nunc eu magna. 
</p>
</div>
<div id="rightgrad">
<img src="images/indexsliced_12.gif" width="50" height="223" alt="Alien Juice designs"/>
</div>
</div>

[Lchad]

I think I would do something like this.

css

Code: Select all

#contentbg {
 width: 750px;
 margin: 0 auto;
 background: url(backgroundimage.jpg) no-repeat;
 height: 223px;
 }
 .textarea {
     width: 650px;
    margin: 0 auto;
    }

html

Code: Select all

<div id="contentbg">
    <div class="textarea">Text would go here</div>

</div>

I haven't tested it but you are good at css so I'm sure you can tweak it.

[tox0tes]

I was thinking of doing that, but the problem is that there are images (not bg images) that need to go on the left and right of the content. These images are vertical gradients that go from lime green to black. When the image stops, so does the gradient, so there is just a blank space from the end of it to the bottom of the div, which is why I want to have a solid black background image behind it, so that it can pick up where the gradient stops and continue to the bottom of the div.

Thanks for helping me brainstorm on this one - its really complicated

This would be so easy using tables...

[tox0tes]

I just decided to use your suggestion and make it one big div with a long bg image. The image is 1000px long lol in case the page gets long.

Thanks for your help.

[Lchad]

I'm sure there might be a different way, but I think that might be your best bet at this time.

I tend to make my left and right sides of a graphic design simple straight lines or no lines or a curve that is easy to repeat. Then I never get stuck with the restriction you are facing. But in this design which is really nice, it's worth a bit of a struggle.

Yes tables would be easier no doubt about that... sigh... but you will have the true joy of knowing you did it RIGHT! You can walk proud like a peacock and saying "My site rocks"!

[tox0tes]

Yeah I am already proud of myself. I'm glad I went with divs and not tables this time. Now i just have to figure out why IE doesn't display it correctly.

[moojoo]

Originally Posted by danedesigns

Yeah I am already proud of myself. I'm glad I went with divs and not tables this time. Now i just have to figure out why IE doesn't display it correctly.

Because IE is the red headed step child of the intar web screenie.