CSS Forum

**theboogster** · 02-10-2006, 06:35 PM

Hi... I'm trying to create a 3 column layout for my site without using tables. In the middle column, I just have content and then on the left/right columns, I have dynamically created boxes. I'm floating the left/right boxes into position but I'm having a problem where the right columns boxes are being pushed down below where the first left column box ends. Here are my css classes for the left/right boxes:

#leftsidebox {
width: 200px;
border: none;
padding: 0px;
margin-left: 0px;
margin-right: 0px;
float: left;
clear: left;
}

#rightsidebox {
width: 200px;
border: none;
padding: 0px;
margin-left: 0px;
margin-right: 0px;
float: right;
clear: right;
}
Any ideas why this might be happening? I've checked multiple browsers so I know its not a compatibility problem. Let me know if I can explain further... thanks for any help!

**praveen** · 02-10-2006, 09:15 PM

here is another way to do it.

Code:

/*CSS*/

#container {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    color: #333;
    border: 1px solid #000000;
    line-height: 130%;
    padding: 1px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-color: #FFFFFF;

}


#left {float: left;
width: 180px;
margin: 0;
padding: 0em;
border-right: 1px solid gray;
}

#right {float: right;
width: 190px;
margin: 0;
border-left: 1px solid #000000;
}

#content {margin-left: 180px;
margin-right: 190px;
padding: 1em;
}

/* If u want the footer, add the below */
#footer {clear: both;
margin: 0;
padding: .5em;
color: #333;
border-top: 1px solid gray;
}

/* end CSS /*

/* HTML */

<html>
<body>
<div id="container">
<div id="left">left</div>
<div id ="right">right</div>
<div id="content">content</div>

/*optional footer */
<div id="footer">footer</div>
</div>
</body>
</html>

**theboogster** · 02-11-2006, 04:12 PM

Praveen, thanks a lot for your response. I really appreciate it. Now, let's say I want to add a second/third/etc box to the left and right columns. In order for the boxes to stack properly, I need to add a clear to the left/right classes in the css. This works except you'll notice that the boxes in the right column are now shifted downwards on the page. The 'right' box only starts after where the 'left' box ends. I know I could avoid this by just putting everything within one div, but I need the boxes to be seperate for dynamic content. Here is the modified code for example:

/*CSS*/

#container {
width: 90%;
margin-left: auto;
margin-right: auto;
color: #333;
border: 1px solid #000000;
line-height: 130%;
padding: 1px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
background-color: #FFFFFF;

}

#left {float: left;
clear: left;
width: 180px;
margin: 0;
padding: 0em;
border-right: 1px solid gray;
}

#right {float: right;
clear: right;
width: 190px;
margin: 0;
border-left: 1px solid #000000;
}

#content {margin-left: 180px;
margin-right: 190px;
padding: 1em;
}

/* If u want the footer, add the below */
#footer {clear: both;
margin: 0;
padding: .5em;
color: #333;
border-top: 1px solid gray;
}

/* end CSS */

/* HTML */
<html>
<body>
<div id="container">
<div id="left">left</div>
<div id="left">secondleft</div>
<div id ="right">right</div>
<div id ="right">secondright</div>
<div id="content">content</div>

/*optional footer */
<div id="footer">footer</div>
</div>
</body>
</html>

Thanks again for your help!

**praveen** · 02-11-2006, 05:28 PM

i see what u mean,

just adjust the width of the second left boxes and its margin towards the left box.

now instead of saying

<div id="left">left</div>
<div id="left">left</div>

say
<div id="left">left</div>
<div id="secondleft">secondleft</div>

where the css for secondleft would be something like
#secondleft {margin-left: 180px;
float :left;
padding: 1em;
}
#content {margin-left: 360px;
margin-right: 190px;
padding: 1em;
}

where the 360 for content would be left + secondleft.

or the other way could be

creating 2 divs inside #content and saying the same thing without the margin.

#content.secondleft
{width: 180px;
float: left;
padding: 1em;
}
#content.secondright
{width: 180px;
float: right;
padding: 1em;
}

i could have missed one or two tags here.. but i am sure u get the idea.
probably when i get home, i will post a proper code if u need.

let me know.

**theboogster** · 02-11-2006, 06:40 PM

I tried adjusting the width of the second left box and its margin and it elminates the problem I was having with the right boxes. However, the second left box does not stack directly underneath the first box now. Also, I don't know if explained this well, but I need this to extend to any number of boxes on the left and right. In other words, there could 5 dynamically created boxes on the left and 3 on the right and I'd like to stack them all properly in the 1st and 3rd column. Maybe I'm not understanding you right so if you could post a code example at your convenience, that would be great. Thanks again for your help!

**praveen** · 02-11-2006, 07:03 PM

Quote:

there could 5 dynamically created boxes on the left and 3 on the right and I'd like to stack them all properly in the 1st and 3rd column.

u mean
box1
box2
box3
box4
box5

or
box1 box2 box3 box4 box5

??

**theboogster** · 02-11-2006, 07:23 PM

**praveen** · 02-11-2006, 07:34 PM

let me get this straight.

3 columns.

left column middle content col right col

left and righ col will have the dynamic boxes

middle will probably be static.

right??

then why dont u try something like this

that should be relatively easy.

<div id="left">
<div id=box1></div>
<div id=box2></div><div id=box3></div><div id=box4></div>
</div>
<div id="right">
<div id=box1></div><div id=box2></div><div id=box3></div><div id=box4></div></div>
<div id="content"><div>

u dont need to give any complex css for these boxes.. just make sure u dont go overboard with the width.

**theboogster** · 02-11-2006, 08:20 PM

This is definitely a solution however we were trying to avoid having to actually create columns using divs/tables. In other words, we want to iterate over a list of boxes and depending on what style class was associated with it, we would move the box into place (left/right column). If we were to do it the way you suggested, we would have to build some kind of logic into the code to decide where to put the box html (i.e. in the div for the left column, or in the div for the right column). If you can think of a way to do this, that would be great. Theoretically, I thought floating the boxes left/right would work but I was getting that weird offset problem. Thanks again so much...

**theboogster** · 02-12-2006, 07:12 PM

Any ideas how to fix my original problem so that I don't have to use any extra divs or a table layout?

**praveen** · 02-12-2006, 10:44 PM

i will take a look sometime today and will let u know.

**theboogster** · 02-13-2006, 02:56 PM

Upon further testing, I believe this is only a problem in firefox/mozilla browsers. I've searched the net to see if I could find out what the difference may be but apparently this works fine in Internet Explorer. Any ideas or hacks to get this to work properly in firefox/mozilla?