...

View Full Version : Looking for a 3 column of sorts



Dodge
02-01-2005, 12:02 AM
Hi,

I'm not quite the pro with css positioning just yet... ;)

So I need a little help please.

What I'm trying to do is to create a 3 column layout - with header and footer.

I've seen a few of these at glish and bluerobot but I have a caveat of sorts in that I want the middle column to be narrower (possible a fixed width) as it will be the actual menu. Then I want the outer columns to be liquid (with percentage widths.

I have had a small amount of success except that setting the outer columns with a percentage width is causing some grief. I would like the columns to "touch" each other.

I'm sorry I don't have anything to look at, as far as what I've done so far, as it's all still local on my PC. But here are the main content divs I'm currently using.

#left {
border: solid 1px #393939;
position: absolute;
padding: 5px;
top: 158px;
width: 37%;
left: 5px;
}

#mid {
border: solid 1px #393939;
width: 16%;
padding: 5px;
margin: 10% auto;
}

#right {
border: solid 1px #393939;
position: absolute;
top: 158px;
padding: 5px;
right: 5px;
width: 37%;
}

The widths are just what I was currently experimenting with... and are not correct.

I thought this would be a little easier than it has turned out to be. I haven't even started on the header and footer yet...

I would appreciate some advice on this. :)

Thanks
Dodge

rmedek
02-01-2005, 01:07 AM
Hey Dodge,

The 3-column thingy can be tricky. Before we dive in, check out this thread-- I found a great 3-column tutorial list at css-discuss some time ago. Maybe one of those will help you out... If not post back and we'll see what we can do.

http://codingforums.com/showthread.php?t=50658

Hope it helps,

_Aerospace_Eng_
02-01-2005, 01:13 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body {
height:100%;
}
#left {
border: 1px solid #393939;
float:left;
padding: 5px;
width: 37%;
}
#mid {
border: 1px solid #393939;
width: 100%;
padding: 5px;
width:21%;
margin:auto;
}
#right {
border: 1px solid #393939;
float:right;
padding: 5px;
width: 37%;
}
</style>
</head>
<body>
<div id="left"></div>
<div id="right"></div>
<div id="mid"></div>
</body>
</html>
the doctype is an important issue for this situation

harbingerOTV
02-01-2005, 01:41 AM
_Aerospace_Eng_

that doesn't quite work. the middle column is still fluid.

try this and see how it goes. Anything smaller than 800x600 and it's not going to work as the L/R columns will overlay the middle.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">

body {
background: #fff;
padding: 0;
margin: 0 auto;

}

#container {

width: 100%;
position: relative;
margin: 0 auto;

}

.text {
font-size: 12px;
font-family: 'Trebuchet MS', Verdana, Arial, Helvetica, sans-serif;
color: #000;
font-variant: small-caps;
line-height: 18px;
width: 180px;
text-align: left;
background: #fff;
border: 1px solid #000;
padding: 0 10px 10px 10px;
float: left;
position: relative;
}
#navr {
width: 35%;
margin-top: 0px;
margin-left: -1px;
float: left;
padding-bottom: 30px;
position: relative;
}

#navl {
width: 35%;
margin-top: 0px;
margin-right: -1px;
float: left;
padding-bottom: 30px;
position: relative;
}

.menu {
padding: 6px;
border: 1px solid #4E4B3D;
font-size: 10px;
font-family: 'Trebuchet MS', Verdana, Arial, Helvetica, sans-serif;
color: #000;
font-variant: small-caps;
line-height: 16px;
background-color: #DFDBC0;
}


</style>
<title>example</title>
</head>

<body>





<div id="container">



<div id="navl">
<div class="menu">
<p>
Sed lacus justo, iaculis ut, pretium et, pretium id, lacus. Maecenas purus nunc, facilisis

id, pretium in, auctor eu, lectus. Donec pulvinar sodales tellus. Quisque sem tortor,

dapibus vitae, ullamcorper mollis, mattis dapibus, mauris. Nam enim. Phasellus tempor diam

quis orci. Vestibulum porttitor interdum nisl. Nulla sed ante id dolor porttitor laoreet.

Sed enim. Nam enim wisi, facilisis at, molestie a, scelerisque et, augue. Nullam dapibus

eros id magna. Suspendisse volutpat. Ut consectetuer purus.<p>
Duis nec mi. Nulla pulvinar bibendum quam. Suspendisse adipiscing. Vestibulum auctor

fermentum quam. Ut et lorem id orci vestibulum vulputate. Vestibulum libero. Pellentesque

eget turpis. Morbi id quam. Pellentesque ac massa at augue posuere laoreet. Maecenas

molestie odio vel est. Mauris volutpat. Sed tortor dui, placerat nec, placerat sed, sagittis

eu, nibh. Vestibulum tincidunt. Nullam euismod elit. Praesent sagittis vestibulum nisl.

Mauris auctor dui id erat placerat dignissim. Nam dictum scelerisque augue. Nullam eu nunc.
</p>
</div>
</div>

<div class="text">
<p>
Sed lacus justo, iaculis ut, pretium et, pretium id, lacus. Maecenas purus nunc, facilisis

id, pretium in, auctor eu, lectus. Donec pulvinar sodales tellus. Quisque sem tortor,

dapibus vitae, ullamcorper mollis, mattis dapibus, mauris. Nam enim. Phasellus tempor diam

quis orci. Vestibulum porttitor interdum nisl. Nulla sed ante id dolor porttitor laoreet.

Sed enim. Nam enim wisi, facilisis at, molestie a, scelerisque et, augue. Nullam dapibus

eros id magna. Suspendisse volutpat. Ut consectetuer purus.</p><p>
Sed lacus justo, iaculis ut, pretium et, pretium id, lacus. Maecenas purus nunc, facilisis

id, pretium in, auctor eu, lectus. Donec pulvinar sodales tellus. Quisque sem tortor,

dapibus vitae, ullamcorper mollis, mattis dapibus, mauris. Nam enim. Phasellus tempor diam

quis orci. Vestibulum porttitor interdum nisl. Nulla sed ante id dolor porttitor laoreet.

Sed enim. Nam enim wisi, facilisis at, molestie a, scelerisque et, augue. Nullam dapibus

eros id magna. Suspendisse volutpat. Ut consectetuer purus.<p>
Duis nec mi. Nulla pulvinar bibendum quam. Suspendisse adipiscing. Vestibulum auctor

fermentum quam. Ut et lorem id orci vestibulum vulputate. Vestibulum libero. Pellentesque

eget turpis. Morbi id quam. Pellentesque ac massa at augue posuere laoreet. Maecenas

molestie odio vel est. Mauris volutpat. Sed tortor dui, placerat nec, placerat sed, sagittis

eu, nibh. Vestibulum tincidunt. Nullam euismod elit. Praesent sagittis vestibulum nisl.

Mauris auctor dui id erat placerat dignissim. Nam dictum scelerisque augue. Nullam eu nunc.
</p>
<p>
Sed lacus justo, iaculis ut, pretium et, pretium id, lacus. Maecenas purus nunc, facilisis

id, pretium in, auctor eu, lectus. Donec pulvinar sodales tellus. Quisque sem tortor,

dapibus vitae, ullamcorper mollis, mattis dapibus, mauris. Nam enim. Phasellus tempor diam

quis orci. Vestibulum porttitor interdum nisl. Nulla sed ante id dolor porttitor laoreet.

Sed enim. Nam enim wisi, facilisis at, molestie a, scelerisque et, augue. Nullam dapibus

eros id magna. Suspendisse volutpat. Ut consectetuer purus.<p>
Duis nec mi. Nulla pulvinar bibendum quam. Suspendisse adipiscing. Vestibulum auctor

fermentum quam. Ut et lorem id orci vestibulum vulputate. Vestibulum libero. Pellentesque

eget turpis. Morbi id quam. Pellentesque ac massa at augue posuere laoreet. Maecenas

molestie odio vel est. Mauris volutpat. Sed tortor dui, placerat nec, placerat sed, sagittis

eu, nibh. Vestibulum tincidunt. Nullam euismod elit. Praesent sagittis vestibulum nisl.

Mauris auctor dui id erat placerat dignissim. Nam dictum scelerisque augue. Nullam eu nunc.
</p>

</div>

<div id="navr">
<div class="menu">
<p>
Sed lacus justo, iaculis ut, pretium et, pretium id, lacus. Maecenas purus nunc, facilisis

id, pretium in, auctor eu, lectus. Donec pulvinar sodales tellus. Quisque sem tortor,

dapibus vitae, ullamcorper mollis, mattis dapibus, mauris. Nam enim. Phasellus tempor diam

quis orci. Vestibulum porttitor interdum nisl. Nulla sed ante id dolor porttitor laoreet.

Sed enim. Nam enim wisi, facilisis at, molestie a, scelerisque et, augue. Nullam dapibus

eros id magna. Suspendisse volutpat. Ut consectetuer purus.<p>
Duis nec mi. Nulla pulvinar bibendum quam. Suspendisse adipiscing. Vestibulum auctor

fermentum quam. Ut et lorem id orci vestibulum vulputate. Vestibulum libero. Pellentesque

eget turpis. Morbi id quam. Pellentesque ac massa at augue posuere laoreet. Maecenas

molestie odio vel est. Mauris volutpat. Sed tortor dui, placerat nec, placerat sed, sagittis

eu, nibh. Vestibulum tincidunt. Nullam euismod elit. Praesent sagittis vestibulum nisl.

Mauris auctor dui id erat placerat dignissim. Nam dictum scelerisque augue. Nullam eu nunc.
</p>
</div>
</div>






</div>
</body>
</html>

harbingerOTV
02-01-2005, 02:48 AM
Sorry for the double post.

The edit to the edit.

the above is a new code. The side boxes touch the middle box. only the sides collapse. A couple of things i've found. i have only tried this in 1152x864 and 800x600. So far it works in both so it should work in 1024x768. I can't get it to center correctly since all the columns are floated. It can be done with hacks and a javascript to switch the CSS upon resolution. I'm sure there has to be a way to do it with the "container" but not really going in to it.
In anything else lower than 800x600 this fails. The right column bottoms out.

works on MOZ/FF/IE6

<!--as a CSS newbie myself, this is a pretty cool exercise for a monday.-->


I messed with the percentages in both resolutions. it all depends on the center obviously. so if you try this and change a number, remeber to change the numers on all of the coulumns

Dodge
02-01-2005, 01:22 PM
Thanks for the help! I appreciate your time _Aerospace_Eng_ and harbingerOTV. :)

And thanks for that link, rmedek! I'm looking through those now. :)

harbingerOTV - this is very close but, like you say, it doesn't center for one.
Also - I would like for the 2 outer columns to expand as well as contract to keep the page full regardless of screen size/resolution.

Ultimately the center column would be firmly in the center and the 2 outer columns would "breathe" to take up/shrink as per available width.

Did I find one of those "Holy Grail" type layouts that will be very hard to accomplish! :D

I could do it with tables but I really would rather not of course. I will continue to work on this and post any positive results.

Thanks
Dodge

harbingerOTV
02-02-2005, 05:08 AM
This (http://home.earthlink.net/~harbingerofthevoid/blah.html) is what i got to tonight. crap I know. I had to drop the left side into a table just to make it align right.

what is this "holy grail" you speak of?

rmedek
02-02-2005, 08:00 AM
auugh... you guys are killing me! :D

Just kidding around, I know how tough these table layouts are to emulate in CSS.

Try this; it uses relative and absolute positioning, margins are set to adjust position, and IE gets some wacky padding nonsense to make it work.



<!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>Example</title>
<style type="text/css">

* {
margin: 0;
padding: 0;
}

body {
font: 10px/14px verdana, sans-serif;
color: #333;
}

h1 {
font-size: 16px;
font-weight: bold;
padding: 20px;
}

a {
display: block;
text-decoration: none;
color: #333;
background: #eee;
width: 100%;
height: 25px;
line-height: 25px;
text-align: center;
border-bottom: solid 1px #ccc;
}

a:hover {
background: #fff;
}

#menu ul, #menu li {
list-style-type: none;
}

#wrapper {
margin: 0 auto;
position: relative;
width: 95%;
height: 500px;
border: solid 1px #ccc;
}

#menu {
width: 200px;
position: absolute;
top: 0;
left: 50%;
margin-left: -100px;
border: solid #ccc;
border-width: 0 1px;
height: 100%;
}

#columnone {
position: absolute;
right: 50%;
padding: 10px 110px 10px 10px; /* this nonsense is for IE */
width: auto;
height: 100%;
}

html>body #columnone { /* IE can't read this... these are the real values for modern browsers */
margin-right: 100px;
padding: 10px;
}

#columntwo {
position: absolute;
left: 50%;
width: auto;
padding: 10px 10px 10px 110px; /* once more, IE hacks */
height: 100%;
}

html>body #columntwo { /* once more, real values for the real browsers */
margin-left: 100px;
padding: 10px;
}

</style>
</head>
<body>

<h1>static middle column, expand-o-matic outer columns</h1>

<div id="wrapper">
<div id="columnone">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in </p>
</div>

<ul id="menu">
<li><a href="#">link one</a></li>
<li><a href="#">link two</a></li>
<li><a href="#">link three</a></li>
<li><a href="#">link four</a></li>
<li><a href="#">link five</a></li>
</ul>

<div id="columntwo">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in </p>
</div>
</div>
</body>
</html>


Link to an example (http://richardmedek.com/temp/example5.htm). There might be an easier way to do this, but this is what I came up with...

Hope this helps,

harbingerOTV
02-02-2005, 01:40 PM
Nice Richard,

I could have sworn I had something similar to that. I just looked through my folder and I must have saved something as the same name (oops). I think it was something that had 1 too many divs in it. I had placed a center line in the page and then moved everything over with +/- margins. Once again you just simplified it so that the first thing I say in the mornig is DOH!

Good show ;)

Dodge
02-02-2005, 02:18 PM
Excellent - looks exactly like what I'm after. Thank you very much. I'll disect the code and give it a shot.

Quick question please...

I'm not familar with this:

* {
margin: 0;
padding: 0;
}

Could you explain it's purpose? :)

Thanks again!
Dodge

rmedek
02-02-2005, 09:50 PM
Nice Richard,

I could have sworn I had something similar to that. I just looked through my folder and I must have saved something as the same name (oops). I think it was something that had 1 too many divs in it. I had placed a center line in the page and then moved everything over with +/- margins. Once again you just simplified it so that the first thing I say in the mornig is DOH!

Good show ;)
Thanks... although like I said there might be an easier way to do it. I've been a fan of using relative/absolute positioning lately as it's been pretty easy to throw things around provided there's a decent "wrapper" structure to the site.


Quick question please...

I'm not familar with this:

* {
margin: 0;
padding: 0;
}

Could you explain it's purpose?
That's a trick I picked up from MindlessLemming... it just gives no margin and no padding to everything. It's easier to start everything from zero and give padding where I need it rather than deal with every browser's preferences. It doesn't have anything to do with the column structure as much as it just helped me style the rest of the page.

Dodge
02-03-2005, 12:01 AM
What a great tip! Thanks so much for the layout - it looks like it's going to be just the ticket! :) It's extremely liquid - can handle screens that pinch all the way to the middle column.

Dodge



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum