Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    Feb 2005
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Looking for a 3 column of sorts

    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

  • #2
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    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.

    the ultimate Three Column Layout guide

    Hope it helps,

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Code:
    <!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
    Last edited by _Aerospace_Eng_; 02-01-2005 at 02:24 AM.

  • #4
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    _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.

    Code:
    <!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>
    Last edited by harbingerOTV; 02-01-2005 at 03:25 AM.

  • #5
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    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.-->

    Edit:
    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
    Last edited by harbingerOTV; 02-01-2005 at 03:50 AM.

  • #6
    New Coder
    Join Date
    Feb 2005
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

    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
    Last edited by Dodge; 02-01-2005 at 02:47 PM.

  • #7
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    This 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?

  • #8
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    auugh... you guys are killing me!

    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.

    Code:
    <!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. There might be an easier way to do this, but this is what I came up with...

    Hope this helps,

  • #9
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    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

  • #10
    New Coder
    Join Date
    Feb 2005
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Last edited by Dodge; 02-02-2005 at 04:15 PM.

  • #11
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Quote Originally Posted by harbingerOTV
    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.

  • #12
    New Coder
    Join Date
    Feb 2005
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •