...

View Full Version : 3 Column Layout issues....(rmedek?)



Edouble76
03-09-2005, 07:22 PM
Hoping to expand on my post below - first time CSS user as far as layout is concerned. Rmedek gave me a great example yesterday of a center column being a fixed width with 2 outside collapsable columns.

I am trying to do sort of the same thing with an 800px fixed width center column - with some additional "hardships" in that I have lines in my design (picture attached) stretching all the way vertically and horizontally across the browswer window. The lines in question are red in the attached picture and the main content part inside the 800px box has blue lines. The 2 side columns (labled as 1 and 2) will have no content in them, just a background color, but they obviously need to stretch to 100% height.

My first attempt at this has been a miserable failure....and I am attempting to resist the urge of doing this with tables! :)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>3 Column Layout Test</title>
<style type="text/css">

* {
margin: 0;
padding: 0;
}

#wrapper {
margin: 0;
position: relative;
width: 100%;
height: 100%;
}

#maincontent{
width: 800px;
height: 100%;
position: relative;
top: 0;
margin-left:auto;
margin-right:auto;
border: 1px solid #ccc;
}

#columnone {
width: auto;
height: 100%;
background-color:#006699;
float:left;
margin-left:0;
margin-right:0;
}

#columntwo {
width: auto;
height: 100%;
background-color:#006699;
float:right;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="columnone">Left Column</div>
<div id="maincontent">Main Content</div>
<div id="columntwo">Right Column</div>
</div>
</body>
</html>

evo
03-10-2005, 12:31 PM
The way you have chosen to do this is strange.

I'll knock what you are looking out for you.

I'm at work, so you'll have to wait a few hours.

evo
03-10-2005, 12:50 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>3 Column Layout Test</title>
<style type="text/css">
<!--
html, body
{
background-color: #CD5C5C;
margin: 0;
padding: 0;
}
#top
{
background-color: #fff;
border-bottom: 1px solid #000;
height: 10px;
}
#top_center
{
background-color: #F7E5E5;
border: none;
border-left: 1px solid #000;
border-right: 1px solid #000;
margin: 0px auto;
width: 800px;
}
#middle_center
{
background-color: #F4E8CA;
border-left: 1px solid #000;
border-right: 1px solid #000;
height: 1000px;
margin: 0px auto;
width: 800px;
}
#bottom
{
background-color: #fff;
border-top: 1px solid #000;
height: 10px;
}
#bottom_center
{
background-color: #FCF5F5;
border: none;
border-left: 1px solid #000;
border-right: 1px solid #000;
margin: 0px auto;
width: 800px;
}
-->
</style>
</head>
<body>
<div id="top">
<div id="top_center">&nbsp;</div>
</div>

<div id="middle_center">&nbsp;</div>

<div id="bottom">
<div id="bottom_center">&nbsp;</div>
</div>
</body>
</html>

That works fine. Altering it to the content layout shouldn't be hard at all. I've just added a height onto the center div to show how it would look as a page.

Edouble76
03-10-2005, 06:11 PM
That works great EVO, thanks!

Two more questions:

1) What are the hacks I need to look at as far as making it work in Firefox? (it doesn't want the top border to show and something werid is going on with the bottom part?)

2) As I am new to CSS, should I use absolute or relative positioning for the rest of the boxes I am going to be adding to the center 800px box?

evo
03-10-2005, 06:41 PM
You shouldn't need any hacks. I never checked it in Firefox... didn't think I would have needed to.

Five minutes and I'll have it resolved for you.

evo
03-10-2005, 06:44 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>3 Column Layout Test</title>
<style type="text/css">
<!--
html, body
{
background-color: #CD5C5C;
margin: 0;
padding: 0;
}
#top
{
background-color: #fff;
border-bottom: 1px solid #000;
}
#top_center
{
background-color: #F7E5E5;
border: none;
border-left: 1px solid #000;
border-right: 1px solid #000;
margin: 0px auto;
width: 800px;
}
#middle_center
{
background-color: #F4E8CA;
border-left: 1px solid #000;
border-right: 1px solid #000;
height: 1000px;
margin: 0px auto;
width: 800px;
}
#bottom
{
background-color: #fff;
border-top: 1px solid #000;
}
#bottom_center
{
background-color: #FCF5F5;
border: none;
border-left: 1px solid #000;
border-right: 1px solid #000;
margin: 0px auto;
width: 800px;
}
-->
</style>
</head>
<body>
<div id="top">
<div id="top_center">&nbsp;</div>
</div>

<div id="middle_center">&nbsp;</div>

<div id="bottom">
<div id="bottom_center">&nbsp;</div>
</div>
</body>
</html>

There you go. Less than 5.

Edouble76
03-10-2005, 06:52 PM
Thanks again Evo, I really appreciate it - I'll have to look thru and see what you did and try to learn. I was thinking at first it was the border:none before the specifications of the border-left and border-right that might have been throwing off Firefox so I changed them around to border-top: none; and border-bottom: none; to no avail.....

So when I implement the boxes inside the main center box, should I use absolute or relative positioning? My guess is relative because I am inside of an element but I could be confused on that.....

evo
03-10-2005, 06:57 PM
It had nothing to do with the border. Basically, the height: 10px that I had on the top and bottom divs caused issues with the default font size, making the div bigger than I wanted it to be.

Removing the height constrictions erased that issue.

As for positioning, absolute positioning tends to mess up if you resize a window, and causes havoc when you want perfect cross-browser compatibility. Relative is the best choice and realistically is my only choice for anything I do.

Edouble76
03-10-2005, 07:03 PM
So basically they don't need heights specified as they only get so small in size? I had no idea font sizes changed this even when no text was added...

I am changing the height of the center box element to around 570 so that at 800x600, above and below the center box shows (top and bottom centers). Should I just play around with the height of the center box in order to center it vertically between the 2 boxes? Or to vertically center should I use %'s instead of pixels?

evo
03-10-2005, 07:21 PM
Well now you are asking for something quite different.

The way I done it won't center between the two. They rest onto each other.

To have it so it can be centered would have to be done in quite a different way using a repeating background flowing down the Y axis of the body element.

I did that on the presumption that you would have filled the center with content. The alternative method would take significantly longer to do.

Edouble76
03-10-2005, 07:32 PM
The center will be filled with content, but I would still like to get it as close to center as possible so there is no scroll bar or repeating content. Perhaps you could point me in the right direction as to a good tutorial on what you are talking about with a repeating background on the y axis?

Thanks again for the help!

evo
03-10-2005, 07:44 PM
To get an idea of how you could possibily go around doing it, have a look at: www.mudsplat.com/inprogress/bruford which sort of uses a similar technique.

As for tutorials, I've learnt as I've gone a long and have done for probably 5-7 years so I have no idea where you could go apart from www.alistapart.com or www.w3schools.org.

The link above will only be available for public access for 2 days.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum