|
2006-05-19, 03:31 PM | #1 |
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 |
Certified Nice Person
|
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 |
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:18 PM | #4 |
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-19, 09:30 PM | #5 | |
Certified Nice Person
|
Quote:
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.
__________________
Click here to purchase a bridge I'm selling. |
|
2006-05-19, 09:45 PM | #6 |
You can now put whatever you want in this space :)
|
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 |
Took the hint.
|
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:
Alex |
2006-05-28, 01:16 PM | #8 |
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 |
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 |
2006-05-30, 09:10 PM | #10 | |
You can now put whatever you want in this space :)
|
Quote:
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.
__________________
Submit Free Sites, Blogs, Movies, TGP's, Triple XXX Info |
|
|
|