?Flexible wrapper for 3 columns & adding content through CSS?

I’m working on my first FULL ON CSS website and this is my first post to this forum. I purchased The CSS Anthology - which is how I found this forum.

So here’s what I’m trying to figure out: I’m building a 3 column website and I’m trying to get one of the wrappers to lengthen with the length of any of the 3 columns. PLUS I’m trying to find a solution to adding more content to one of the columns later without having to manually add it to dozens of html pages.

So heres my HTML code: http://andybrownmedia.com/Scratch/Template101.html
and here’s my main CSS: http://andybrownmedia.com/Scratch/Template101.css

other files can be found listed here:http://andybrownmedia.com/Scratch/

In this version I have the left navigation and the rightside stuff each in an iFrame. I thought this might work so I could just edit those HTML files when I need to. When I’m done there will be about 80 pages and wanted to a way to change the left menu and the sections on the right globally. right now they both are positioned absolutely which i know plucks them out of the wrapper (called whitewrapper in my CCS code) and so the wrapper doesn’t adjust along with it. I did try floating them (and it almost worked) but it interfered with a clear: both attribute I have in #ailmentname (which was the only way I could get ailmentname to clear my domtabs above it.

So my two struggles are (1) coding the three columns in the whitewrapper properly and (2) figuring out a solution to possibly getting rid of those iFrames and be able to add and subtract content just by editing the CSS.

For issue (2) I was going to try just adding several <div>s with numbered classes (like 10 of them) to the HTML and see if I can add content into them (in the form of background images with height & width defined) via the CSS code. the unused <div>s would just be invisible until I added code to them.

Thanks for reading! I’ll repost if I figure any of this out on my own. And FYI, I’ve only viewed the code in Safari 4.0.5 and Firefox 3.6.3


Hi brooklynartist10, welcome to SitePoint! :slight_smile:

iFrames are best avoided, especially for what you seem to be doing. Before any talk of layout, though, what do you mean by adding and subtracting content by editing the CSS? CSS and content are unrelated; content is in the HTML, CSS is just how the content is styled.

Do you mean that you want the same content to appear on multiple pages? If so, that’s not a CSS issue. That is best handled with PHP Includes or with a content management system (CMS).

Yeah I’ve thought that PHP might be the answer. I don’t know PHP so I was hoping for another solution.

What I meant by content was being able to add clickable images and I did find a method. For that rightside area i added several <div>'s surrounded by <a href=“#”> </a>'s to the HTML:

<div id=“rightside”>
<a href=“#”><div class=“rightside1”></div></a>
<a href=“#”><div class=“rightside2”></div></a>
<a href=“#”><div class=“rightside3”></div></a>
<a href=“#”><div class=“rightside4”></div></a>
…and so on…

then in the CSS I can just add or change images set as backgrounds like this:

.rightside1 {
width: 238px;
height: 172px;
background-image: url(images/foottop5.jpg);
background-repeat: no-repeat;

It seems to be working! If I style a class it displays and if I don’t you don’t see anything.

So using this method I can forget the iFrame thing. The leftside menu content I think I will just leave in the HTML. So I’m back to trying figure out how to get the whitebackground to stretch with either the center column or rightside column. I’ve tried floating the left and right columns but the right column is still sticking out when the center column is shorter. It’s only flexible with the center content.

OK, I see. Firstly, it’s not “legal” to wrap a div in a link, but you don’t need to anyway. Place the links inside the div, make them display: block, give them the dimensions of the images, and then put the images as background images on the link.

As for the content hanging out, that’s easy to fix; but first update the page without the iframes and we’ll tell you how to stop the problem.

Thanks RALPH.M for helping me out with this.

So the iframes are out and I rearranged the DIV and LINK tags like you said and it works great.

So here’s the layout with both the “Ailment Nav” and “Rightside” stuff styled with absolute positioning.


Here’s what happens when I change the styling for those sections to float.


I can’t figure out why they won’t float within the <div class=“whitebackground”></div> tags where the center content sits.

Thanks again for your input!

Floating is definitely the way to go. For the floats to sit next to the center column, they have to come first in the source order. In other words, rearrange the html to this:

<div id=“ailmentnav”></div>
<div id=“rightside”></div>
<div id=“ailmentsection”></div>

However, I find some browsers choke (no names given!!!) on having floated columns next to an unfloated column with margins. Also, it’s not ideal to have your content coming after the sidebars.

My advice is to float the middle column as well and remove the margins. That way they will all happily sit side by side in all browsers.

Just make sure also to add something like overflow: hidden to the #whitebackground div to make it enclose its floated contents.

OK I think I’ve got it! the overflow: hidden tip works great. I did some more reading up on floating columns and what I ended up doing was floating the right column right then adding a container around the left and center column and floating that left. Then inside the container I floated those columns left and right.

I will want to change that center/left area throughout the site, but the right side will always remain the same - so this having that extra container will be helpful.


Thanks so much for all your help!


Great, I’m glad that helped. It looks much better now.