homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Designing layouts

 8:32 am on Sep 28, 2008 (gmt 0)

What is the correct way to design layouts using CSS and how to learn



 9:47 am on Sep 28, 2008 (gmt 0)

I think any way that leads to a good result is good.

Still that leaves us with wanting to know what a good result is, and the easiest path to get there.

A good result in my book has to allow

  • Future proof in regard to browser support. This is extremely important as there is simply no way we can test all current, let alone future browsers. So we need to stick to established standards such as CSS2.1 . Validation is one of the steps we need to achieve here.
  • Easy to maintain in the long term. To me this means html that is independent of the layout, and where the html allows to switch the css to allow for an entirely new layout without changign anything in the html.
  • Easy to understand might be part of easy to maintain, but I separated it out as many of us (myself included) "sin" in this regard. Superfluous markup, hacks, lack of comments, ..,

Now current browsers in use out there include IE6 and IE7. Both are potential horrors and they can't be ignored due to their market share. Conditional comments to make them work are your best possible option. Make sure not to apply the conditional comments on IE8. Microsoft promised it would be standards compliant, we'll need to continue to twist their hand into giving us what they promised, and not let them have any excuse that the "stuff out there" won;t work unless they keep their errors of the past.

So that leaves how to get there the easiest.

The path I use currently is:

  1. Make the html as easy as possible, keep a very few concessions for now like a wrapper div (cause the body isn't usable in IE for a lot of things)
  2. Make sure to use html that makes sense without CSS at all. This is how the visually impaired might perceive your page, this is how a search engine will see it, ...
  3. Develop the CSS in Firefox (that way I can use plugins like firebug and the webmaster toolbar). This is important as it allows often a better understanding of what my CSS is tellign the browser to do.
  4. Do the CSS step by step, take out anything you added that didn't have an effect you sought.
  5. At major landmarks in the design, test my CSS against a validator, against some of the other standards compliant browsers (opera, safari, ...). just to confirm I'm not using a bug or feature only found in Firefox. I'd use any other of the standa compliant browsers if they had the same add-ons.
  6. When I've done this, I consider my CSS "done". Review it, make sure you have comments in it for the future etc.
  7. Start a virtual machine with IE7 (I use a mac, so I've got no native IE - IE for mac is dead and buried). Use conditional coments to add a CSS file that adds the CSS IE7 needs to make it render properly. Resist the temptation to add the CSS in the main file, as it'll create superfluous CSS and might give this stuff to IE8, needlessly prolonging our pain as well as potentially creatign trouble in browsers we can't easily test (you got all game consoles, all mobile devices, all fridges and washing machines of the future that will have a browser? I for sure don't).
  8. Start a virtual machine with IE6 (assuming most of you upgraded to IE7 long ago, virtual PC for windows is free, and Microsoft also allows you to download an image with EI6 in it). It'll be in general more messy than IE6 was, so be prepared to add stuff like IE7.js to the conditional comment (although it's not without trouble of its own). Still add everything to it's conditional comments only.
    Consider to jsut fix the display. It's pretty hard to find logic in the bugs. I just work around the display problem,a dn once it's ok, I'll forget it.
  9. Since the IE6 and IE7 workarounds don't affect the other browsers, it's now ready.

Where to learn:

  • The cleanest source is w3.org . But they tend to focus on the standards, even for things where no browser bothered to provide the support for it. It's still the best reference to know what a given CSS statement is supposed to do.
  • w3schools is a source that's very useful if you're beginning with things.
  • The library out here has some really nice things in it, but some are old. That being old results often in techniques such as hacks being promoted, such as ignoring newer versions of IE, ... take care to walk away with the desired parts only.
  • There are a number of ready-made thing like complex menu etc out there that you're allowed to reuse. Take great care with this as in al likelyhood, it'll mean you won't fully understand how it works. How will you fix it should it break in IE8 when it's released ?
  • I know of no books that are current, but then I'm not seeking them out either.


 10:36 am on Sep 28, 2008 (gmt 0)

what about the issues related to layouts based on Floats and absolute positioning.

though css based layouts are in the market from ancient time, still no one can say the layouts will work in all browsers


 8:39 pm on Sep 28, 2008 (gmt 0)

I'm not entirely sure what you mean with
the issues related to layouts based on Floats and absolute positioning

As for being sure a layout work in all browsers: you're never going to be sure. In fact you can be pretty sure it'll degrade in certain (older) environments. That's why it's important to have the html itself make some sense. To make sure current and future browsers
handle it properly one's best odds are standards. That's why validating and keeping IE fixes out of them are important.


 3:48 am on Sep 29, 2008 (gmt 0)

I want to know which of the styles is used most:

Float based layouts or absolute positioned layouts and the advantages/disadvantages in using them both


 8:05 am on Sep 29, 2008 (gmt 0)

The basic form is the flow. A layout that goes with the flow is the easiest, the simplest for browsers to grasp, and this will degrade very naturally.

Floats are the decedents of what an <img> was that had align="left" (or right) applied to it. It's still linked to the flow: the vertical position is derived from the original unfloated position; and it influences the flow: pushing away stuff that would end up under it.

So there's little, to anything bad to say about floats as such, they work nicely with the flow and they too will degrade nicely.

That's until you run into something where everything is a float, nested many levels deep. You can have too much of a good thing for sure.

Absolute positioning takes out the element of the flow entirely. I was never a big fan as it's very difficult to do this with things you don't know the size of. Still it does have useful aspects. I use it e.g. to position a search box over a background so that I can put it where it "fits" in the image. If CSS wouldn't be there it'll stay in a place where it fits logically.
Absolute positioning also has the potential of making how things look entirely independent of the order in which they are placed in the html.
The main drawbacks are IE6's poor support (e.g. it never obeys when I tried to use things like "bottom:0", it doesn't stretch boxes when entering both top and bottom positions etc.). And as said before the inability to position boxes dependent on the place of other absolutely positioned boxes.

To me both floats and absolutely positioning can be good, but I guess both can be abused much like we abused tables in the past.


 11:54 am on Oct 5, 2008 (gmt 0)

swa66 - loved reading your take on CSS development- I have just one question regarding your take on IE:

Consider to just fix the display. It's pretty hard to find logic in the bugs. I just work around the display problem, and once it's ok, I'll forget it.

Just curious, how "ok" is ok for you? Can you give an example of where you might draw the line? :)


 1:21 pm on Oct 5, 2008 (gmt 0)

Just curious, how "ok" is ok for you? Can you give an example of where you might draw the line? :)

For IE7 I mostly can get it to display the same as the standards compliant browsers. Detail like different fonts etc are going to remain unfixable.

For IE6 I've settled for degraded display that's still functional. E.g. a sliding doors menu where there's a need for a li:hover that can't be moved to an <a> tag. I'll change the hover to look different.

Printing is similar: IE6 tries to print so enlarged that it almost never fits a regular page. I can either waste a lot of time or hope those still not upgraded will do so eventually and forget about it (most website won't fit the width of the page in IE6 so it's just one more).

This will get worse once we get more browser support for CSS3 features: E.g. rounded corners, either we can continue to add superfluous divs and background images, or we can embrace the real rounded corners and let them degrade to aquare corners for obsolete browsers.

Graceful degradation is enough, unfortunately many of the IE bugs aren't exactly graceful.

As to where I draw the line in regard to code for IE: I don't care if it validates (if I need zoom:1, that's going to be it). I don't care why it works (if a margin of 700px does the trick, that's going to be the one I use, I not wasting my time understanding why when those crafting the browser won't fix it anyway). I don't care what technology it uses (if I need a min-width, I'll use the scripted version). As long as it looks ok, I'm ok with it.


 3:34 pm on Oct 5, 2008 (gmt 0)

check out blueprint css framework. i just found out about it and seems like a wonderful thing.


 9:09 am on Oct 6, 2008 (gmt 0)

Somewhat on-topic tip for learning CSS:

Use a "live" CSS editor that allows you see what your changes will do in realtime - then copy those changes to the permanent stylesheet. For example this plugin for firefox: [editcss.mozdev.org...] but there are others, like in the WebDeveloper plugin.

Even for a CSS pro, this can be very helpful to see how minor changes to rules affect the page.

I also like this plugin which allows you to mouse-over any object to see it's properties instantly: [addons.mozilla.org...]

[edited by: amznVibe at 9:11 am (utc) on Oct. 6, 2008]


 9:11 am on Oct 6, 2008 (gmt 0)

search for free css termplates on google , download a script that validates (most do ) and mess around with that , that into conderation what the other guys have said and you cant go wrong , my first site i build using a tables and i spent hours on it . with a css template it can be neat quick and cheap .




 10:32 am on Oct 6, 2008 (gmt 0)

the templates may be ok for simple layouts but its difficult to get layouts for building portals


 10:57 am on Oct 6, 2008 (gmt 0)

if it's a portal, sketch or photoshop the entire portal layout and then build the individual sections of it as if they were independant divisions which is arguably what they are even on a portal site?

most CSS templates just take into account the 2/3 column header footer look, but what you find is the code behind the scenes is the same as you would use if you were e.g. trying to fit "those 2/3 columns" into your portal "grid"

it's really hard to visual without sketching the rough layout idea out first..

take this visual example (3) [w3.org] (ignore the actual module for now).. that is technically a three column layout, and the columns then have further columnar layouts inside them.. e.g. the four cars in the right column is a four column layout with header, it could be marked up as list of choices so it still makes sense if/when it degrades but then the <li> items can floated into a four column layout.

The "gridlines" being demonstrated in that page actually help visualise that the whole template is just a series of columns separated by margins/whitespace, I think anyway ;) - so perhaps even incorporating that into your sketch may help?

Absolute positioning would not work well at all for something like this, as getting the page to flow would not work.. floats all the way IMHO


 3:57 pm on Oct 6, 2008 (gmt 0)

CSS layouts are probably hardest to understand. First you need to understand the principles of float and absolute(relative) positioning then all the "hacks" for various browsers then all the rest.
You also may start with some CSS Framework (but first learn some CSS). I build one CSS Grid Framework called Emastic but I think it's not for beginners.Also I think that CSS Frameworks are great for portals(they all have the grid structure).


 4:04 pm on Oct 6, 2008 (gmt 0)

..then all the "hacks" for various browsers

I really feel we need to dispel this little myth ;)

Lets not muddy the issue - you do not need to "hack" any more. If you do decide to provide a slightly less enhanced version for IE browsers because a particular version doesn't yet support some enhancement you'd like to use then there are simple ways to do so. Floats are well supported by all browsers.


 5:20 pm on Oct 6, 2008 (gmt 0)

Floats are well supported by all browsers!?

What about: IE5/6 Doubled Float-Margin Bug? Maybe I used wrong word - "hack". The point is theoretically the same CSS code should be interpreted in the same way by all the browser. But it does NOT! Than you have problem and you must use some tricks or hacks or bug fix or call it what you want in order to fix the problem.


 6:50 pm on Oct 6, 2008 (gmt 0)

Designing with web standards by Jeffrey Zeldman is always a good start. It's pretty 'Pro' standards, and others here will argue against it. I lie somewhere in the middle, but at least the book won't teach you any bad habits as swa66 mentioned.


 9:15 pm on Oct 6, 2008 (gmt 0)


I think we all agree that the miserable support of the currently in use versions of IE is a major pain. But you can work around or get a degraded solution for all those IE versions (6 and 7, next to nobody uses 5 anymore these days).

The bugs in IE6 really are something we all should be very vocal about against Microsoft, not against CSS. The standard is not at fault, the implementation in IE is.
It's especially sad that over the years Microsoft never bothered to fix even the best known bugs, nor that they managed to convince their customers to upgrade to IE7.

When you do use the conditional comments the bugs in IE bother you just a bit less: you just fix the result. E.g. if you see the margins to wide: just reduce them, don't bother with the reason, the stuff you could add that don't set the other browsers off isn't important anymore.

As for understanding CSS: it's *much* easier if you make/read CSS that's not stuffed with things to make IE behave.
E.g. 9 out of 10 times we see "position:relative", it's got no top/left/right/bottom to go along with it and as such it's there in all likelihood either due to ignorance what the real position:relative is supposed to do (position:static is the default), or either more likely there for side effects in IE that should not be there to start with.
So I would agree all those fixes that are outside a conditional comment really are counterproductive.

w3.org has all the definitions what CSS is supposed to do online. E.g. the position stuff is here: [w3.org...] , floats are here: [w3.org...] .


 11:06 pm on Oct 6, 2008 (gmt 0)


I completely agree with you! I don't want to bug fix! Unfortunately 30-40% of my company site visitors uses IE6. I can't afford to lose 40% of my clients.I hope that one day all the browsers will have same standard.


 3:28 am on Oct 7, 2008 (gmt 0)

Im waiting for that one day from 2000


 5:47 am on Oct 7, 2008 (gmt 0)

We can sometimes become too clever in design. All those "float" guys and gals out there are really PRINT LAYOUT folks, just don't know it.

I come from a print background and after 10 years on the web finally realized YOU CAN'T MAKE IT LOOK RIGHT. So... serve content. Serve it pleasantly. And all browsers (all) will deal with a simple container, simple columns, headers and footers. Use the KISS method and all goes well...and you can get back to what it's all about: content or content and advertising (whatever floats yer boat!).

And take advantage of SSI or PHP includes, depending on platform and expertise.

These days I do it dirt simple...with no errors regardless of browser.


 1:49 pm on Oct 7, 2008 (gmt 0)

What is the correct way to design layouts using CSS and how to learn

Don't. It's a pain in the ass. (I am not very helpful)


 5:09 pm on Oct 7, 2008 (gmt 0)

I hope that one day all the browsers will have same standard.

(sigh) you and every other person who has ever coded html/css. Sorry, old salty dog reply here.


 1:53 am on Oct 17, 2008 (gmt 0)

A few years ago I read a book called CSS Mastery by Andy Budd. That book explains the concept very clearly. Since then I have not had any problems at all. I highly recommend it.


 4:58 am on Oct 17, 2008 (gmt 0)

my portal is now ready . designed in div. thk u all


 10:26 am on Oct 17, 2008 (gmt 0)

Hi. I'm brand new here and I would just like to say 'Thank you' to everyone on the forum for all the great input.


 11:01 am on Oct 17, 2008 (gmt 0)

Welcome to WebmasterWorld, keithbsydney!

and pleased to hear you got your layout done, dukelips :)


 11:51 am on Oct 17, 2008 (gmt 0)

thk u suzy.
designing css layouts was quite frustrating but I learnt a lot in Css and this forum was great

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