homepage Welcome to WebmasterWorld Guest from 54.225.1.70
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Requirements for my first CSS layout site
...but am I asking the impossible?
groovyhippo




msg:1223518
 12:44 pm on Jul 23, 2004 (gmt 0)

I've decided to take the plunge and go table-less. I've looked at lots of examples of 3 column layouts but I don't think any of them quite do all that I want. These are my requirements...

Fixed-height header
Fixed-width left column
Fixed-width right column
Fluid center column
Content of center column appearing first in XHTML
Footer spanning all 3 columns

From what I can gather, if I want the content of the center column to appear first then I need to use absolute positioning for the other 2 columns. But if I use absolute positioning then I can't have my footer spanning all 3 columns. Am I right?

 

createErrorMsg




msg:1223519
 12:55 pm on Jul 23, 2004 (gmt 0)

Check out the article "Creating Liquid Layouts with Negative Margins" by Ryan Brill on A List Apart. It may have what you need, or at least as close as you are going to get.

Keep in mind that a table-based layout wouldn't meet those requirements, either, especially putting the content first in the source.

groovyhippo




msg:1223520
 2:19 pm on Jul 23, 2004 (gmt 0)

Thanks, that looks like just what I need. I'll have to read it thoroughly now to make sure I understand it all.

I notice it doesn't have any of the common 'hacks' I've been reading about, so I guess it will fall over in some browsers unless I add those. Any pointers to a list of hacks I should be adding?

And it's true that a table-based layout wouldn't meet the content-first requirement, but that's one of the reasons I'm switching to CSS! And tables would certainly achieve all the other requirements.

createErrorMsg




msg:1223521
 3:45 pm on Jul 23, 2004 (gmt 0)

tables would certainly achieve all the other requirements

But at what cost? Of course, if you're making the switch it's just preaching to the choir.

Unfortunately, it isn't as easy as just providing a list of necessary hacks. You'll have to hack the IE5 box model to get the widths consistent, but where and how much depends upon the specifics of the layout. You may or may not have the IE 3px text jog, double margins, etc. Again, hacking to fix bugs depends solely upon which bugs crop up from your particular combination of layout values and html markup.

All I can tell you is to get started, test on every browser you can find, and come back here when you run into a snafu that you don't know how to handle.

groovyhippo




msg:1223522
 10:05 am on Jul 28, 2004 (gmt 0)

Well having gone through Ryan Brill's article, it seems that it doesn't do quite what I want - namely that the left and right columns are not fixed widths, and that the content does not appear first in the XHTML when using all 3 columns.

Although I can see the benefits of using CSS layout, I'm beginning to wonder if it's worth all the effort. I could have knocked up my desired layout using tables in half a day (and without any 'hacks').

TheBlueEyz




msg:1223523
 6:57 am on Jul 29, 2004 (gmt 0)


Well having gone through Ryan Brill's article, it seems that it doesn't do quite what I want - namely that the left and right columns are not fixed widths, and that the content does not appear first in the XHTML when using all 3 columns.
Although I can see the benefits of using CSS layout, I'm beginning to wonder if it's worth all the effort. I could have knocked up my desired layout using tables in half a day (and without any 'hacks').

I've been asking myself the same question. Is getting rid of tables really worth all the effort.

All I can say is, it seems so to me. The initial development time for my projects has increased alot (but it's coming down gradually as I get better at the CSS and keeping the HTML clean), but I have to say that the MAINTENANCE time for my code has dropped to almost zero.

Stuff that used to take 30 minutes or more to change now takes 20, 30 seconds. Going back and looking at old work takes ZERO time to become familiar with again. It's worth it for me, your mileage may vary.

I have found ways to create almost any design I want, including the one you're asking for. If you send me a sticky message, I'll see if I can dig it up for you. I'll also send you a couple of links I have found very, very, very useful.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved