3 column div layout, not same length

tox0tes · #1 Jun 27th, 2007, 21:07

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 · #2 Jun 27th, 2007, 21:16

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

tox0tes · #3 Jun 27th, 2007, 21:50

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 · #4 Jun 27th, 2007, 23:12

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 · #5 Jun 27th, 2007, 23:26

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 · #6 Jun 27th, 2007, 23:55

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 · #7 Jun 28th, 2007, 01:23

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 · #8 Jun 28th, 2007, 01:27

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 · #9 Jun 28th, 2007, 15:08

Quote:

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.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
where can I find a fluid 3 column layout	Gerry	Web Page Design	7	Nov 2nd, 2007 22:48
3 column layout help needed	AdRock	Web Page Design	12	Apr 13th, 2007 23:40
3 column layout to 2 column layout	snappy	Web Page Design	2	Oct 29th, 2006 16:29
Column display, layout differences	deesto	Web Page Design	2	Sep 3rd, 2006 20:27
perfect three column layout	Webforumz Staff	Web Page Design	15	Apr 14th, 2004 08:56

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
3 column div layout, not same length