CSS Gurus

SirMoby · 2006-05-19, 03:31 PM

I've been having a hard time wrapping my brain around something that I've been doing in tables for years. Basically I want to have 3 columns of stuff but I want the center column to appear first in the html code and I want to use CSS instead of tables.

Here's an example using tables http://sirmoby.com/first.html

I've found some complex CSS examples out there but they all change the width of the center column and I don't want that. Any CSS gurus have any good ideas?

Useless · 2006-05-19, 08:35 PM

Absolutely. http://maladaptedmedia.com/moby.html

The key is using "position:relative" so that you can place the div for the center column first while telling it to be pushed over for the left column. Then using "position:relative" to tell the left column "oh no buddy, you're going to show up over there where you belong".

I'm no guru though. Others may have some input about adding to or refining what I've done. I checked it in both Firefox and IE and it lays out the same for both.

Maj. Stress · 2006-05-19, 08:46 PM

You want to do it with or without tables? Without tables this is a good place to start http://www.positioniseverything.net/piefecta-rigid.html

I'll look through my notes and see if I can find on with tables. I think UW has the answer tho.

I couldn't find my css on how to do it with tables but I have some without tables that are source ordered. I'll pm you the urls.

Maj. Stress · 2006-05-19, 09:18 PM

Useless,
I looked at your example and you didn't clear any of your floats. I created a total disaster by not doing that on a few pages. Here's some more info on floats. http://positioniseverything.net/easyclearing.html

Useless · 2006-05-19, 09:30 PM

Quote:

Originally Posted by Maj. Stress

Useless,
I looked at your example and you didn't clear any of your floats. I created a total disaster by not doing that on a few pages. Here's some more info on floats. http://positioniseverything.net/easyclearing.html

Is there a translation for that page anywhere?

I read through it and it looks like the old fashioned method they spoke of is better than the other fixes they promote, mainly since they don't appear to be cross-browser friendly. I've never seen any mention of 'clear' before in my minor dealings with CSS, but I do tend to keep things simple. Until I screw something up, I'm going to continue to act as if it doesn't exist.

Thanks for the link, Maj. Stress.

HC-Majick · 2006-05-19, 09:45 PM

don't know if either of these links will be any help here:
http://www.alvit.de/handbook/
http://css-discuss.incutio.com/?page=ThreeColumnLayouts

RawAlex · 2006-05-20, 11:51 PM

SirMoby, say you want three colums: 150,400, and 150, example.

Define three sets - one starts at 10 / 150 wide, one that starts at 170400 wide and one that starts and 580 and is 150 wide. Now you can put the sections in any order you want in the code, because you hard code the same starting vertical point for each one. Position absolute is the key.

PHP Code:


			
<style type="text/css">

<!--

.left {

    width: 150px;

    left: 10px;

    top: 1px;

    position: absolute;

}

.middle {

    width: 400px;

    left: 170px;

    top: 1px;

    position: absolute;

}

.right {

    width: 150px;

    left: 580px;

    top: 1px;

    position: absolute;

}

-->

</style>

</head>



<body>

<div class="middle">

  <div align="center">This is the middle</div>

</div>

<div class="left">

  <div align="center">this is the left</div>

</div>

<div class="right">

  <div align="center">this is the right</div>

</div>

That is a basic way to do it, there is more but that is a very basic way to make a page have three hard sized columns and have your middle column be first

Alex

SirMoby · 2006-05-28, 01:16 PM

Looks like -480 from http://maladaptedmedia.com/moby.html does exactly what I needed.

Thanks for all the help guys

Agent · 2006-05-28, 08:31 PM

I usually clear like this:

div.clear {
clear:both;
height:0px;
overflow:hidden;
}

and when you have to "clear" the floated DIVs:
<div class="clear"></div>

DJilla · 2006-05-30, 09:10 PM

Quote:

Originally Posted by Maj. Stress

You want to do it with or without tables? Without tables this is a good place to start http://www.positioniseverything.net/piefecta-rigid.html

That's a really good css link and example. I've got a bunch of three columns layouts and more that I've adapted over time. Why I've never figured out to wrap the three columns within a container is beyond me hence solving most of the annoying aspects of trying to get a reliable layout that works with all kinds of content and circumstances.

I've always been entranced by css and and am amazed that there really isn't anything you can't do if your good enough which I hardly am. I try to use it wherever possible on mainstream because of the "accessability issue". By some numbers, people with some kind of disability account for almost 10% of regular non-biz internet users and how uncool is it to screw them around with a bunch of tables and gobbeldygook they can't read nor their machines.

2006-05-19, 03:31 PM	#1
SirMoby Jim? I heard he's a dirty pornographer. Join Date: Aug 2003 Location: Washington, DC Posts: 2,706	CSS Gurus I've been having a hard time wrapping my brain around something that I've been doing in tables for years. Basically I want to have 3 columns of stuff but I want the center column to appear first in the html code and I want to use CSS instead of tables. Here's an example using tables http://sirmoby.com/first.html I've found some complex CSS examples out there but they all change the width of the center column and I don't want that. Any CSS gurus have any good ideas?

2006-05-19, 08:35 PM	#2
Useless Certified Nice Person Join Date: Oct 2003 Location: Dirty Undies, NY Posts: 11,268	Absolutely. http://maladaptedmedia.com/moby.html The key is using "position:relative" so that you can place the div for the center column first while telling it to be pushed over for the left column. Then using "position:relative" to tell the left column "oh no buddy, you're going to show up over there where you belong". I'm no guru though. Others may have some input about adding to or refining what I've done. I checked it in both Firefox and IE and it lays out the same for both. __________________ Click here to purchase a bridge I'm selling.

2006-05-19, 08:46 PM	#3
Maj. Stress Progress rarely comes in buckets, it normally comes in teaspoons Join Date: Jun 2005 Location: Dark Side Of Naboo Posts: 1,289	You want to do it with or without tables? Without tables this is a good place to start http://www.positioniseverything.net/piefecta-rigid.html I'll look through my notes and see if I can find on with tables. I think UW has the answer tho. I couldn't find my css on how to do it with tables but I have some without tables that are source ordered. I'll pm you the urls. Last edited by Maj. Stress; 2006-05-19 at 08:59 PM..

2006-05-19, 09:45 PM	#6
HC-Majick You can now put whatever you want in this space :) Join Date: Oct 2004 Location: Upstate NY Posts: 541	don't know if either of these links will be any help here: http://www.alvit.de/handbook/ http://css-discuss.incutio.com/?page=ThreeColumnLayouts __________________ Submit Your Freesites:

2006-05-20, 11:51 PM	#7
RawAlex Took the hint. Join Date: Mar 2003 Posts: 5,597	SirMoby, say you want three colums: 150,400, and 150, example. Define three sets - one starts at 10 / 150 wide, one that starts at 170400 wide and one that starts and 580 and is 150 wide. Now you can put the sections in any order you want in the code, because you hard code the same starting vertical point for each one. Position absolute is the key. PHP Code: <style type="text/css"> <!-- .left { width: 150px; left: 10px; top: 1px; position: absolute; } .middle { width: 400px; left: 170px; top: 1px; position: absolute; } .right { width: 150px; left: 580px; top: 1px; position: absolute; } --> </style> </head> <body> <div class="middle"> <div align="center">This is the middle</div> </div> <div class="left"> <div align="center">this is the left</div> </div> <div class="right"> <div align="center">this is the right</div> </div> That is a basic way to do it, there is more but that is a very basic way to make a page have three hard sized columns and have your middle column be first Alex

2006-05-19, 09:18 PM	#4
Maj. Stress Progress rarely comes in buckets, it normally comes in teaspoons Join Date: Jun 2005 Location: Dark Side Of Naboo Posts: 1,289	Useless, I looked at your example and you didn't clear any of your floats. I created a total disaster by not doing that on a few pages. Here's some more info on floats. http://positioniseverything.net/easyclearing.html

2006-05-28, 01:16 PM	#8
SirMoby Jim? I heard he's a dirty pornographer. Join Date: Aug 2003 Location: Washington, DC Posts: 2,706	Looks like -480 from http://maladaptedmedia.com/moby.html does exactly what I needed. Thanks for all the help guys

2006-05-28, 08:31 PM	#9
Agent You can now put whatever you want in this space :) Join Date: May 2004 Posts: 631	I usually clear like this: div.clear { clear:both; height:0px; overflow:hidden; } and when you have to "clear" the floated DIVs: <div class="clear"></div> __________________ Brihana.com