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

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

CSS Forum

Using DIV's as spacers

 8:06 am on Jul 6, 2006 (gmt 0)

Is there any reason why DIV's cannot be used as spacers in code?

The reason I ask, is because I really am not keen on using the various hacks in place for Internet Explorer 5.5 to resolve the padding/margin issues.

There's the box model hack and the browser detection method. My concern, mainly with the box model hack, is what issues this may cause at a later date - perhaps when ie7 is released?

It seems to me that a simple DIV spacer can be used in a few areas to resolve the issue of margins.

These, of course, would only be used in the main structural layout of the page, for instance:-

col1 ¦ col2 ¦ spacer ¦ col3

In the past, I've got around the internet explorer padding/margin issue by never including padding or margin in the structural layout and padding the elements which reside in them, for instance, putting left padding on paragraph tags.

So, in closing, what arguments against this simple method (used sparingly) and what arguments for it?



 8:17 am on Jul 6, 2006 (gmt 0)

use conditionals - they will work consistently and can be set to target <v7 if nessecary.

Using div's as spacers is like going back to 1px spacer gifs of last century :(


 8:33 am on Jul 6, 2006 (gmt 0)

I'm not really so sure about that.

Conditionals result in a large amount of extra code and further maintenance.

So, we could have <div class="spacer">&nbsp;</div> and the relevant class info, at perhaps 100 characters, or end up doing browser detection and swapping out style sheets, resulting in 20 times the code and more maintenance issues?

My concern is really about standards and accessibility.

It's not like I'm going to have 50 of these in a page, at most, it would be 3 of them.

I find it a far more elegant solution than a box model hack and far more efficient than writing a whole bunch of detection code, just to change the width of a DIV for a browser version!


 8:48 am on Jul 6, 2006 (gmt 0)

I'm not really so sure about that.

I am.

If your concern is standards and accessibility, why on earth are you talking about adding extra redundent markup?

detection code

conditionals do not add a lot of extra code - one style sheet reference wrapped in a comment, and then a couple of rules in the stylesheet.

to be honest, from what youve said your tryin to achieve, you dont need any extra rules for IE anyway.


 11:15 am on Jul 6, 2006 (gmt 0)

Hey, it's just an idea - I can easily manage to use the other methods to iron out the issues with internet explorer 5.5

My goal, however, is to use just ONE set of styles for all browsers. I currently test for mozilla, safari, ie5.5 and ie6 and dislike the concept of swapping out style sheet entries based on a single browser.

It's a tradeoff I suppose - adding a tiny amount of redundant code to save complicating issues - because, lets face it, if you swap out a stylesheet using browser detection, your creating code which is redundant to any browser other than the one your detecting.

In terms of accessibility, I suppose I would need to investigate how screen readers interpret an empty DIV tag ;)


 11:18 am on Jul 6, 2006 (gmt 0)

I can easily manage to use the other methods to iron out the issues with internet explorer 5.5

so why are you not doing that, then?


 1:19 pm on Jul 6, 2006 (gmt 0)

Hmm, well, I was hoping to get a discussion going about the various merits of different aspects of approaching this aspect of CSS coding, however, it seems so far, we're stuck on a "one track method"

My real question was more related to whether anyone has any good information on whether having empty DIV tags in code would have any implications in terms of accessibility - for instance, screen readers.

You see, I like to view problems from all different sides. The idea of using a "hack" to "fool" internet explorer 5.5 into reading in different pixel values doesn't appeal to me - "hacks" have a habit of breaking.

For instance, ie7 comes along and handles the box model hack entirely differently.

Browser detection is all well and good, however, it seems to be overkill for the purposes of providing alternative CSS styles.


 2:25 pm on Jul 6, 2006 (gmt 0)

using a div as a spacer IS A HACK.

No problemn for accessibility , screen readers will ignore them.

Ive have never suggested using the box model hack - i agree its not future proof. However, conditional comments, whilst not ideal, are not going to break.

You seem to think conditional comments are on par with the multi line javascripts that used to get used for browser detection. have you actually seen them in use?


 2:31 pm on Jul 6, 2006 (gmt 0)

<removed> Overly sarcastic. Apologies</removed>

[edited by: benihana at 2:36 pm (utc) on July 6, 2006]


 2:34 pm on Jul 6, 2006 (gmt 0)

Yes - your right, it is a hack, but then, so much of coding web pages revolves around hacking, due to inconsistent adoption of CSS - irritatingly so.

I'm trying to approach it from another angle these days, attempting (and so far succeeding) to keep a single set of style sheets (for screen) which work in all browsers for maintenance reasons.

In the current layout I'm doing, there is only one DIV spacer required in the entire document, which results in far less overall code.

I agree that overuse of this method is not desirable, as it will result in bulky inelegant code.

Other tricks I've used to overcome this in the past, are right floats, where you would have a 760px layout, a 200px menu and a 560px content area. To get a 10px spacer between the menu and the content, make the content 550px and float it right.

There's just so many methods I guess, the final goal being as little code as possible.


 2:38 pm on Jul 6, 2006 (gmt 0)

There's just so many methods I guess, the final goal being as little code as possible.

Absolutely. And while its frustrating along the way, its pretty satisfying when it works :)


 3:05 pm on Jul 6, 2006 (gmt 0)

Well, I've just shot myself in the foot with this idea anyway, due to the complexity of the design I'm working on. (well, relatively complex)


The bottom page, below the thumbnails, requires a subfooter where a top grey border line needs to connect directly to the menu grey border.

Ah well, back to the "float right" concept and ditch the spacer idea for now.

So many ways to do this ...


 8:16 am on Jul 7, 2006 (gmt 0)

Tidy :-)

Unfotunately were not allowed to post personal URL's here, so a mod may snip it.


 8:25 am on Jul 7, 2006 (gmt 0)

That's a bit bizarre - I'm probably not allowed to post this URL myself, as it's work in progress for the company I work at.

What an odd concept - to not be able to post example pages - how on earth are people supposed to learn and share?

Understandable if it's advertising something.


 8:30 am on Jul 7, 2006 (gmt 0)

hehe its to stop people abusing it and spamming, and also if we describe a problem and and solution in writing, that post will be useful in the future when sample pages etc etc may have long since disappeared.

stick around - youll get used to it :)



 10:07 pm on Jul 7, 2006 (gmt 0)

I used a couple of spacer divs during a job interview test a while back. Hhhhmmmm, I'm kinda wondering whether maybe that's why I didn't get the job! Dang.

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