10 replies [Last post]
skipcollege
Offline
newbie
Last seen: 13 years 43 weeks ago
Joined: 2005-03-01
Posts: 9
Points: 0

I've searched for this here but I couldn't find any solutions that I could make work my problem.

I have a three column layout with a left and right sidebar. The content is in the middle div. My pages generally have a lot of content in them and make the middle content div longer than the two sidebar divs which is all good. But sometimes if a page has a little content the middle content div is shorter than the two sidebar divs. In this scenario I would like the middle content div to extend down to the bottom of the longest sidebar div. I need the sidebar divs to stay their normal length though and not extend at all. The borders on the three columns are necessary as well.

My site is launching very soon and I could really use some help on making this work. Thank you!

Here is my template's basic code...


Trying to automatically extend the height of the middle content div down to the bottom of the longest sidebar div

.main {
width:755px;
padding-top:15px;
margin-left:auto;
margin-right:auto;
}

.header {
border:1px solid #000;
width:100%;
height:150px;
}

.left-sidebar {
border:1px solid #000;
width:185px;
float:left;
position:relative;
top:10px;
height:500px;
}

.content {
border:1px solid #000;
width:361px;
float:left;
position:relative;
top:10px;
left:4px;
}

.right-sidebar {
border:1px solid #000;
width:185px;
float:right;
position:relative;
top:10px;
height:400px;
}

.footer {
width:100%;
clear:both;
position:relative;
top:20px;
}

Header
Content

Triumph (not verified)
Anonymous's picture
Guru

Google "faux columns".

Google "faux columns".

karinne
karinne's picture
Offline
Enthusiast
Aylmer, QC, Canada
Last seen: 13 years 18 weeks ago
Aylmer, QC, Canada
Timezone: GMT-5
Joined: 2004-01-14
Posts: 291
Points: 0

Faux Columns

skipcollege
Offline
newbie
Last seen: 13 years 43 weeks ago
Joined: 2005-03-01
Posts: 9
Points: 0

Here is the current progress

Here is the current progress of my template with faux columns. I don't know how to cut off the big image column at both ends and make it look like a border. The amount of content in all three columns varies from page to page. How do I accomplish this with faux columns?

Thanks!

Trying to automatically extend the height of the middle content div down to the bottom of the longest sidebar div

.main {
width:755px;
padding-top:15px;
margin-left:auto;
margin-right:auto;
}

.header {
border:1px solid #000;
width:100%;
height:150px;
background-color:#fff;
}

.left-sidebar {
border:1px solid #000;
width:185px;
float:left;
position:relative;
top:10px;
height:500px;
background-color:#fff;
}

.content {
width:361px;
float:left;
position:relative;
top:10px;
left:11px;
}

.right-sidebar {
border:1px solid #000;
width:185px;
float:right;
position:relative;
top:10px;
height:400px;
background-color:#fff;
}

.footer {
width:100%;
clear:both;
position:relative;
top:20px;
}

Header
Content

Triumph (not verified)
Anonymous's picture
Guru

skipcollege wrote:I don't

skipcollege wrote:
I don't know how to cut off the big image column at both ends and make it look like a border.

Include a header and footer image that will cover the top and bottom of the page. That's exactly what I've done on my page. http://imaginekitty.com

skipcollege
Offline
newbie
Last seen: 13 years 43 weeks ago
Joined: 2005-03-01
Posts: 9
Points: 0

Okay I reworked the code so

Okay I reworked the code so I could potentially use the header and footer to cut off the faux background image and make a complete border around the middle content div. I took the faux background image out of the body tag and put it into a div wrapper, class="main", around the 3 columns where the extension is supposed to occur. This works very well in IE7 but when I open it up with Firefox 2.0 the faux background image is nowhere in sight. Why would it do this and is there anyway to correct this? Or maybe another recommended approach to making the borders on the content column than what I'm trying right now?

Thank you!

Trying to automatically extend the height of the middle content div down to the bottom of the longest sidebar div

.container {
background-color:#ccc;
}

.header {
width:755px;
margin-left:auto;
margin-right:auto;
border:1px solid #000;
margin-bottom:10px;
height:150px;
}

.main {
width:755px;
margin-left:auto;
margin-right:auto;
background: #ccc url(http://www.skipcollege.org/img.gif) repeat-y 50% 0;
}

.left-sidebar {
border:1px solid #000;
width:185px;
float:left;
height:500px;
background-color:#fff;
}

.content {
width:361px;
float:left;
position:relative;
left:11px;
}

.right-sidebar {
border:1px solid #000;
width:185px;
float:right;
height:1200px;
background-color:#fff;
}

.footercover {
position:relative;
top:-1px;
width:363px;
margin-left:auto;
margin-right:auto;
clear:both;
border-top:1px solid #000;
}

.footer {
width:755px;
margin-left:auto;
margin-right:auto;
clear:both;
margin-top:10px;
border-top:1px solid #000;
}

Header
Content
cover

Centauri
Offline
Regular
Newcastle NSW Australia
Last seen: 13 years 28 weeks ago
Newcastle NSW Australia
Timezone: GMT+11
Joined: 2006-12-07
Posts: 35
Points: 0

As all contents of .main div

As all contents of .main div are floated, the div will not enclose the contents (IE gets it wrong here) - insert a clearing div before closing .main div




cover

Cheers
Graeme

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

ooh no! no extraneous markup

ooh no! no extraneous markup used for purposes of clearing floats please Smile

Search the forum for 'clearing float containers' there are plenty of non markup methods that work quite happily

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Centauri
Offline
Regular
Newcastle NSW Australia
Last seen: 13 years 28 weeks ago
Newcastle NSW Australia
Timezone: GMT+11
Joined: 2006-12-07
Posts: 35
Points: 0

Hugo wrote:ooh no! no

Hugo wrote:
ooh no! no extraneous markup used for purposes of clearing floats please Smile

Actually, there is already a bit of that - I didn't think a bit more would go astray .... Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

But it does lets try and

But it does Smile lets try and teach best practise, we've been advocating particular approaches on the forum and need to stick to them as much as possible.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

skipcollege
Offline
newbie
Last seen: 13 years 43 weeks ago
Joined: 2005-03-01
Posts: 9
Points: 0

Got it now! Thank you for

Got it now! Thank you for the help everyone!