Web Design Forums

smallbeer · 12-05-2003, 03:23

In my designs I've been tending to opt for using floats rather than positioning for my divs. I just find it much easier to create designs than can move with the content that way. The the down side is that you're stuck with the document flow structurally, whereas absolutely positioned elements can be placed anywhere in your markup.

What would be really useful is both absolutely positioned elements that could some how be kept somewhat within the document flow or relatively positioned elements that could be arranged horizontally.

Has anyone been following the progress of CSS3 and seen anything on these lines been discussed?

And · 12-05-2003, 08:19

[quote:ee8c1f8c31="smallbeer"]In my designs I've been tending to opt for using floats rather than positioning for my divs. I just find it much easier to create designs than can move with the content that way. The the down side is that you're stuck with the document flow structurally, whereas absolutely positioned elements can be placed anywhere in your markup.

What would be really useful is both absolutely positioned elements that could some how be kept somewhat within the document flow or relatively positioned elements that could be arranged horizontally.

Has anyone been following the progress of CSS3 and seen anything on these lines been discussed?[/quote:ee8c1f8c31]

Have a look at this - http://www.w3.org/TR/css3-multicol/#introduction

smallbeer · 12-05-2003, 10:47

Hmmm...although it looks useful it doesn't really fix the problem. The content within those columns seems to be treated as one rather than as seperate entities.

And · 12-05-2003, 11:28

Without seeing an example of what your trying to achieve Smallbeer, it's difficult to suggest a direction.
You can align relative divs against each other by experimenting with negative margins. I would suggest (if you haven't already got it) Eric Meyer's 'CSS - The Definitive Guide'.

His website is quite usefull to in respect of what you can and can't do with CSS

http://www.meyerweb.com/

smallbeer · 12-05-2003, 11:42

There wasn't really a question...just a ramble really!

The problem I find is, and it really shouldn't be a problem, is say a simple 2 column layout. Left column positioned relatively with a right margin large enough to position absolutely a right column. The problem is, if you want anything to be positioned underneath these divs, a footer in most cases, the left column always has to be longer than the right.

The only way I've gotten around this is to use floats.

Surely there must be a better way?

And · 12-05-2003, 13:07

I see what you mean - It can be a bit of a nightmare in that sense & I'm sure it has been addressed in the CSS 3 draft (which, going back to you first post - no I haven't read it

)

I think if there was a simple solution to these problems, people wouldn't still be using tables to lay-out their pages, consistent browser support is still the biggest hurdle rather than the way CSS is written.

Bill Posters · 13-05-2003, 02:58

[quote:61fa01245c="smallbeer"]The the down side is that you're stuck with the document flow structurally[/quote:61fa01245c]

and that's bad because...?

[quote:61fa01245c]...whereas absolutely positioned elements can be placed anywhere in your markup.[/quote:61fa01245c]

and that's better because...?

Imho, tidy, well-structured markup shoud be a target that we all work towards for the sake of easy x-browser/x-platform/x-media interpretation and (not least) for the sake of the next person who may be required to maintain/update your code site.
Meaningfully-structured markup is a semantic ideal, not a technical limitation.
It's ideally meant to about the hierarchy of information during presentation and how we can make it conform in a way that makes as much sense to as many output devices as possible.

If we start urging web standards to accomodate idiosyncratically-structured markup then we only encourage the kind of browser code bloat and support problems that standards was devised to sift out.

[quote:61fa01245c]
The problem I find is, and it really shouldn't be a problem, is say a simple 2 column layout. Left column positioned relatively with a right margin large enough to position absolutely a right column. The problem is, if you want anything to be positioned underneath these divs, a footer in most cases, the left column always has to be longer than the right.

The only way I've gotten around this is to use floats.
[/quote:61fa01245c]

I'm being a bit dense this morning and having trouble picturing what you are describing. Can you knock up an example or post a screenshot as what I'm imagining is not a complex task at all.
Also, why do you consider using floats to be a problematic method?

I'm not sure whether I'm simply not recognising the problem as you describe it or if you're hoping for a solution to a problem which isn't really a problem at all.

smallbeer · 13-05-2003, 03:37

[quote:6cf378f206="Bill Posters"] [quote:6cf378f206="smallbeer"]The the down side is that you're stuck with the document flow structurally[/quote:6cf378f206]

and that's bad because...?

[quote:6cf378f206="smallbeer"]...whereas absolutely positioned elements can be placed anywhere in your markup.[/quote:6cf378f206]

and that's better because...?
[/quote:6cf378f206]

If you absolutely position a navigation bar for example, you can structure code so that it appears at the bottom of your html but to the left in the browser. I never use absolutely positioned divs but they do have benefits.

[quote:6cf378f206="Bill Posters"]
[quote:6cf378f206="smallbeer"]
The problem I find is, and it really shouldn't be a problem, is say a simple 2 column layout. Left column positioned relatively with a right margin large enough to position absolutely a right column. The problem is, if you want anything to be positioned underneath these divs, a footer in most cases, the left column always has to be longer than the right.

The only way I've gotten around this is to use floats.
[/quote:6cf378f206]

I'm being a bit dense this morning and having trouble picturing what you are describing. Can you knock up an example or post a screenshot as what I'm imagining is not a complex task at all.
[/quote:6cf378f206]

Like I said, it was just a ramble. If you know of a way to make an absolutely positioned div 'clear' elements that follow it though I'd be happy to hear it.

[quote:6cf378f206="Bill Posters"]
Also, why do you consider using floats to be a problematic method?
[/quote:6cf378f206]

I'm not sure they were meant to be used for layout thats all. The hacks (spacer divs) you have to use to implement them makes them no better than tables and mean we only encourage the kind of browser code bloat and support problems that standards was devised to sift out.

[quote:6cf378f206="Bill Posters"]
I'm not sure whether I'm simply not recognising the problem as you describe it or if you're hoping for a solution to a problem which isn't really a problem at all.[/quote:6cf378f206]

It's definitely one of those.

Bill Posters · 13-05-2003, 05:39

I must be being dense (entirely possible given the lack of sleep).
Can you post a simple example illustrating the problem?

Fwiw, I've never even heard of people using "spacer divs" with regard to floating or any other webdev technique. I've certainly never needed to use any such thing.
(I'm mentally presuming that 'spacer divs' equates to 'spacer gifs' and their function in table-based layouts.)

[quote:0b89da782f]
If you absolutely position a navigation bar for example, you can structure code so that it appears at the bottom of your html but to the left in the browser. I never use absolutely positioned divs but they do have benefits.
[/quote:0b89da782f]
I'm still not overly convinced by the benefits of this over simply placing the markup in a structural order in the first place.
Imho, markup is best constructed according to the same biases as a written page: i.e. left to right and top to bottom.
Doing so makes navigating and amending the code simpler and quicker in that items that appeared near the top of the rendered page would naturally be found near to the top of the (body) markup.

I 'grew up' (code-wise) using entirely absolute CSS-P (mainly for its pixel-perfect capabilities). That being said, even then I saw the benefits of structuring the markup intuitively.
Relative positioning slowly began to appear in the positioning of interior nested divs until I finally got in the habit of using it for the major layout components as well.
My layouts appear no different to those that I would produce with absolute CSS-P. It's simply a matter of margins and floats. Nothing that requires 'hacks' as far as I'm aware.
(That being said I've not done any hugely busy layouts with relative CSS-P, but I don't envisage any problems when scaling up the complexity of those layouts I have done. Mind you, there aren't any layouts, complex or otherwise, that spring to mind that can't be done with a little clear thinking ahead of time and simple, modular construction using relative positioned divs.)

The only time I use absolute CSS-P is if I'm playing with DHTML animation.
DHTML can still be done with relative positioing, but it's a lot easier with definite top and left values.

--

Sorry if I'm being slow today, but I'm intrigued by the issue (especially the mention of 'spacer divs').
Hopefully, come the end of the discussion one of us will have learned something that we didn't know before.

smallbeer · 13-05-2003, 06:16

[quote:f7e6eff1df="Bill Posters"] I must be being dense (entirely possible given the lack of sleep).
Can you post a simple example illustrating the problem?
[/quote:f7e6eff1df]

OK, a *very* simple example - http://www.lifeofsmallbeer.co.uk/tests/dt.html

http://www.alistapart.com/stories/flexiblelayouts/ - This article and the further discussion details the problem that "containers will not expand when filled with absolute DIVs"

[quote:f7e6eff1df="Bill Posters"]
Fwiw, I've never even heard of people using "spacer divs" with regard to floating or any other webdev technique. I've certainly never needed to use any such thing.
(I'm mentally presuming that 'spacer divs' equates to 'spacer gifs' and their function in table-based layouts.)
[/quote:f7e6eff1df]

http://www.alistapart.com/stories/practicalcss/ - Halfway down the page is an example of the need for spacer divs with floats.

[quote:f7e6eff1df="Bill Posters"]
[quote:f7e6eff1df="smallbeer"]
If you absolutely position a navigation bar for example, you can structure code so that it appears at the bottom of your html but to the left in the browser. I never use absolutely positioned divs but they do have benefits.
[/quote:f7e6eff1df]
I'm still not overly convinced by the benefits of this over simply placing the markup in a structural order in the first place.
Imho, markup is best constructed according to the same biases as a written page: i.e. left to right and top to bottom.
Doing so makes navigating and amending the code simpler and quicker in that items that appeared near the top of the rendered page would naturally be found near to the top of the (body) markup.
[/quote:f7e6eff1df]

I completely agree and it's how I try to work.

[quote:f7e6eff1df="Bill Posters"]
Sorry if I'm being slow today, but I'm intrigued by the issue (especially the mention of 'spacer divs').
Hopefully, come the end of the discussion one of us will have learned something that we didn't know before.

[/quote:f7e6eff1df]

Hopefully!

smallbeer · 13-05-2003, 07:04

As to whether to use absolutely positioned divs to 'move' content around in the markup structure, here's an example.

http://www.lifeofsmallbeer.co.uk/smallbeer/

This is a site I'm working on at the moment...very early stages so don't dis' the coding just yet! Now in the structural order, the 'weblog' section (positioned relatively) comes last which isn't really ideal. Positioning this section absolutely would mean I could place it anywhere I liked within the mark up, above the contact section would be a start.

To me, that would now be more structurally correct.

Stickman · 13-05-2003, 08:17

I'm not sure what the problem is here as I've read your posts but can't be arsed to follow all of the various links. However....

[quote:05583a8df5="smallbeer"]I'm not sure they were meant to be used for layout thats all. The hacks (spacer divs) you have to use to implement them makes them no better than tables[/quote:05583a8df5]
When using the float property, I fine-tune the position of a div by defining its margins, paddings and border properties - I don't see how you'd need hacks or 'spacer' divs, unless you're after something complex which doesn't warrant the float effect and therefore you shouldn't be using that property anyway.

[quote:05583a8df5="smallbeer"]Now in the structural order, the 'weblog' section (positioned relatively) comes last which isn't really ideal. Positioning this section absolutely would mean I could place it anywhere I liked within the mark up, above the contact section would be a start.
To me, that would now be more structurally correct.[/quote:05583a8df5]
Like Bill Posters said - we read from left to right, top to bottom. If I was looking to edit your weblog (looks like a nice design coming on, btw

), I'd look to the bottom of your code first as it appears on the far right of the whole layout; from left to right, that makes it the last element. To me, that is logical and structurally correct.

smallbeer · 13-05-2003, 08:56

[quote:496ed55f15="Stickman"][quote:496ed55f15="smallbeer"]I'm not sure they were meant to be used for layout thats all. The hacks (spacer divs) you have to use to implement them makes them no better than tables[/quote:496ed55f15]
When using the float property, I fine-tune the position of a div by defining its margins, paddings and border properties - I don't see how you'd need hacks or 'spacer' divs, unless you're after something complex which doesn't warrant the float effect and therefore you shouldn't be using that property anyway.
[/quote:496ed55f15]

Quoting ALA, when you float an element with CSS, it no longer takes up any "space".

So say you had 2 floated columns within a container DIV, the container would not expand with the size of the columns unless you put some content other than the floated columns into the container DIV. (phew!)

So you'd need to do this

[code:1:496ed55f15]
<div id="container">
<div class="spacer"></div>
<div id="leftcolumn">Blah blah</div>
<div id="rightcolumn">Blah blah</div>
<div class="spacer"></div>
</div>

.spacer {display: none;}
[/code:1:496ed55f15]

Or at least that's what I've found I have to do.

[quote:496ed55f15="Stickman"][quote:496ed55f15="smallbeer"]Now in the structural order, the 'weblog' section (positioned relatively) comes last which isn't really ideal. Positioning this section absolutely would mean I could place it anywhere I liked within the mark up, above the contact section would be a start.
To me, that would now be more structurally correct.[/quote:496ed55f15]

Like Bill Posters said - we read from left to right, top to bottom. If I was looking to edit your weblog (looks like a nice design coming on, btw

), I'd look to the bottom of your code first as it appears on the far right of the whole layout; from left to right, that makes it the last element. To me, that is logical and structurally correct.[/quote:496ed55f15]

but we're talking about the content here aren't we, not the presentation. In the content, wouldn't it be more structurally correct to have the main content (weblog) higher up the page?

Bill Posters · 13-05-2003, 09:44

[quote:766a25616b="smallbeer"]As to whether to use absolutely positioned divs to 'move' content around in the markup structure, here's an example.

http://www.lifeofsmallbeer.co.uk/smallbeer/

This is a site I'm working on at the moment...very early stages so don't dis' the coding just yet! Now in the structural order, the 'weblog' section (positioned relatively) comes last which isn't really ideal. Positioning this section absolutely would mean I could place it anywhere I liked within the mark up, above the contact section would be a start.

To me, that would now be more structurally correct.[/quote:766a25616b]

[quote:766a25616b]
but we're talking about the content here aren't we, not the presentation. In the content, wouldn't it be more structurally correct to have the main content (weblog) higher up the page?
[/quote:766a25616b]

Given that your left column is floated left and the right content is floated right, there should be no probelm in switching the markup order so that the right content (weblog) is marked up directly after the header- like this (check the markup).
Fwiw, the latter of the two columns is pushed down the page in IE5/Mac. On your version this is the right column (as it appears later in the markup) whilst in my markup it's the left column.
This is most likely due to excessive width somewhere, so shouldn't be too hard to fix.
Both version of the markup display correctly and identically in Camino, Moz, NN7 (Gecko) and Opera 6.

The spacer class that you are using to [i:766a25616b]clear: both[/i:766a25616b] can (read: should) be integrated into the preceding div and can be done with a little judicial reallocation of ids, tag selectors and classes.

I've shown that you can reproduce that layout and have the weblog before the left column content in the markup.
With a little more time and some clear, 'modular' thinking there's no reason why you can't have the markup running in an order that best suits you and that doesn't require addition markup such as the 'spacer divs'.

I'm going to read the ALA articles now as I'm curious to see precisely what they mean by some of the things you've related here.

smallbeer · 13-05-2003, 10:25

[quote:ffa471468c="Bill Posters"]
The spacer class that you are using to [i:ffa471468c]clear: both[/i:ffa471468c] can (read: should) be integrated into the preceding div and can be done with a little judicial reallocation of ids, tag selectors and classes.
[/quote:ffa471468c]

You couldn't explain that a bit more could you please?

And any chance of a screen shot of that IEMac glitch?

And...you were right, some of us did learn something today

Bill Posters · 13-05-2003, 10:54

[quote:c738be1e3f="smallbeer"][quote:c738be1e3f="Bill Posters"]
The spacer class that you are using to [i:c738be1e3f]clear: both[/i:c738be1e3f] can (read: should) be integrated into the preceding div and can be done with a little judicial reallocation of ids, tag selectors and classes.
[/quote:c738be1e3f]

You couldn't explain that a bit more could you please?[/quote:c738be1e3f]

I just meant that because you use '.spacer' as a class, you can't simply add it to the preceding div if it already has a class assigned to it as it may conflict with another attribute within that class.
It might just be a simple matter of copying the [i:c738be1e3f]clear: both[/i:c738be1e3f] attribute into any existing declarations assigned to the preceding div/element.
Without going through the code in more depth I wouldn't want to say that this alone would remove the need for spacer divs altogether.

I will say though, that a clear rethink from the start of how you want each element to behave will produce more efficient and effective code than using spacer divs to patch up the holes.

[quote:c738be1e3f]And any chance of a screen shot of that IEMac glitch?[/quote:c738be1e3f]

Sure.
(Shots at 50% actual pixel size.)

Your original markup:
[img:c738be1e3f]http://www.bposters.fsnet.co.uk/forum/designerstalk/smallbeer_orig.jpg[/img:c738be1e3f]

My reordered markup version:
[img:c738be1e3f]http://www.bposters.fsnet.co.uk/forum/designerstalk/smallbeer_altmarkup.jpg[/img:c738be1e3f]

12-05-2003, 03:23	#1 (permalink)
smallbeer I Ain't Losing Any Sleep™ Join Date: Apr 2003 Posts: 5,236	floats v's positioning In my designs I've been tending to opt for using floats rather than positioning for my divs. I just find it much easier to create designs than can move with the content that way. The the down side is that you're stuck with the document flow structurally, whereas absolutely positioned elements can be placed anywhere in your markup. What would be really useful is both absolutely positioned elements that could some how be kept somewhat within the document flow or relatively positioned elements that could be arranged horizontally. Has anyone been following the progress of CSS3 and seen anything on these lines been discussed? __________________ That's fuckin' ingenious, if I understand it correctly. It's a Swiss fuckin' watch.

12-05-2003, 08:19	#2 (permalink)
And Senior Member Join Date: Apr 2003 Posts: 103	Re: floats v's positioning [quote:ee8c1f8c31="smallbeer"]In my designs I've been tending to opt for using floats rather than positioning for my divs. I just find it much easier to create designs than can move with the content that way. The the down side is that you're stuck with the document flow structurally, whereas absolutely positioned elements can be placed anywhere in your markup. What would be really useful is both absolutely positioned elements that could some how be kept somewhat within the document flow or relatively positioned elements that could be arranged horizontally. Has anyone been following the progress of CSS3 and seen anything on these lines been discussed?[/quote:ee8c1f8c31] Have a look at this - http://www.w3.org/TR/css3-multicol/#introduction

12-05-2003, 10:47	#3 (permalink)
smallbeer I Ain't Losing Any Sleep™ Join Date: Apr 2003 Posts: 5,236	Hmmm...although it looks useful it doesn't really fix the problem. The content within those columns seems to be treated as one rather than as seperate entities. __________________ That's fuckin' ingenious, if I understand it correctly. It's a Swiss fuckin' watch.

12-05-2003, 11:42	#5 (permalink)
smallbeer I Ain't Losing Any Sleep™ Join Date: Apr 2003 Posts: 5,236	There wasn't really a question...just a ramble really! The problem I find is, and it really shouldn't be a problem, is say a simple 2 column layout. Left column positioned relatively with a right margin large enough to position absolutely a right column. The problem is, if you want anything to be positioned underneath these divs, a footer in most cases, the left column always has to be longer than the right. The only way I've gotten around this is to use floats. Surely there must be a better way? __________________ That's fuckin' ingenious, if I understand it correctly. It's a Swiss fuckin' watch.

13-05-2003, 02:58	#7 (permalink)
Bill Posters trouble free and loverlee Join Date: Mar 2003 Location: YooKay Posts: 2,880	Re: floats v's positioning [quote:61fa01245c="smallbeer"]The the down side is that you're stuck with the document flow structurally[/quote:61fa01245c] and that's bad because...? [quote:61fa01245c]...whereas absolutely positioned elements can be placed anywhere in your markup.[/quote:61fa01245c] and that's better because...? Imho, tidy, well-structured markup shoud be a target that we all work towards for the sake of easy x-browser/x-platform/x-media interpretation and (not least) for the sake of the next person who may be required to maintain/update your code site. Meaningfully-structured markup is a semantic ideal, not a technical limitation. It's ideally meant to about the hierarchy of information during presentation and how we can make it conform in a way that makes as much sense to as many output devices as possible. If we start urging web standards to accomodate idiosyncratically-structured markup then we only encourage the kind of browser code bloat and support problems that standards was devised to sift out. [quote:61fa01245c] The problem I find is, and it really shouldn't be a problem, is say a simple 2 column layout. Left column positioned relatively with a right margin large enough to position absolutely a right column. The problem is, if you want anything to be positioned underneath these divs, a footer in most cases, the left column always has to be longer than the right. The only way I've gotten around this is to use floats. [/quote:61fa01245c] I'm being a bit dense this morning and having trouble picturing what you are describing. Can you knock up an example or post a screenshot as what I'm imagining is not a complex task at all. Also, why do you consider using floats to be a problematic method? I'm not sure whether I'm simply not recognising the problem as you describe it or if you're hoping for a solution to a problem which isn't really a problem at all.

12-05-2003, 11:28	#4 (permalink)
And Senior Member Join Date: Apr 2003 Posts: 103	Without seeing an example of what your trying to achieve Smallbeer, it's difficult to suggest a direction. You can align relative divs against each other by experimenting with negative margins. I would suggest (if you haven't already got it) Eric Meyer's 'CSS - The Definitive Guide'. His website is quite usefull to in respect of what you can and can't do with CSS http://www.meyerweb.com/

12-05-2003, 13:07	#6 (permalink)
And Senior Member Join Date: Apr 2003 Posts: 103	I see what you mean - It can be a bit of a nightmare in that sense & I'm sure it has been addressed in the CSS 3 draft (which, going back to you first post - no I haven't read it ) I think if there was a simple solution to these problems, people wouldn't still be using tables to lay-out their pages, consistent browser support is still the biggest hurdle rather than the way CSS is written.

13-05-2003, 03:37	#8 (permalink)
smallbeer I Ain't Losing Any Sleep™ Join Date: Apr 2003 Posts: 5,236	Re: floats v's positioning [quote:6cf378f206="Bill Posters"] [quote:6cf378f206="smallbeer"]The the down side is that you're stuck with the document flow structurally[/quote:6cf378f206] and that's bad because...? [quote:6cf378f206="smallbeer"]...whereas absolutely positioned elements can be placed anywhere in your markup.[/quote:6cf378f206] and that's better because...? [/quote:6cf378f206] If you absolutely position a navigation bar for example, you can structure code so that it appears at the bottom of your html but to the left in the browser. I never use absolutely positioned divs but they do have benefits. [quote:6cf378f206="Bill Posters"] [quote:6cf378f206="smallbeer"] The problem I find is, and it really shouldn't be a problem, is say a simple 2 column layout. Left column positioned relatively with a right margin large enough to position absolutely a right column. The problem is, if you want anything to be positioned underneath these divs, a footer in most cases, the left column always has to be longer than the right. The only way I've gotten around this is to use floats. [/quote:6cf378f206] I'm being a bit dense this morning and having trouble picturing what you are describing. Can you knock up an example or post a screenshot as what I'm imagining is not a complex task at all. [/quote:6cf378f206] Like I said, it was just a ramble. If you know of a way to make an absolutely positioned div 'clear' elements that follow it though I'd be happy to hear it. [quote:6cf378f206="Bill Posters"] Also, why do you consider using floats to be a problematic method? [/quote:6cf378f206] I'm not sure they were meant to be used for layout thats all. The hacks (spacer divs) you have to use to implement them makes them no better than tables and mean we only encourage the kind of browser code bloat and support problems that standards was devised to sift out. [quote:6cf378f206="Bill Posters"] I'm not sure whether I'm simply not recognising the problem as you describe it or if you're hoping for a solution to a problem which isn't really a problem at all.[/quote:6cf378f206] It's definitely one of those. __________________ That's fuckin' ingenious, if I understand it correctly. It's a Swiss fuckin' watch.

13-05-2003, 05:39	#9 (permalink)
Bill Posters trouble free and loverlee Join Date: Mar 2003 Location: YooKay Posts: 2,880	I must be being dense (entirely possible given the lack of sleep). Can you post a simple example illustrating the problem? Fwiw, I've never even heard of people using "spacer divs" with regard to floating or any other webdev technique. I've certainly never needed to use any such thing. (I'm mentally presuming that 'spacer divs' equates to 'spacer gifs' and their function in table-based layouts.) [quote:0b89da782f] If you absolutely position a navigation bar for example, you can structure code so that it appears at the bottom of your html but to the left in the browser. I never use absolutely positioned divs but they do have benefits. [/quote:0b89da782f] I'm still not overly convinced by the benefits of this over simply placing the markup in a structural order in the first place. Imho, markup is best constructed according to the same biases as a written page: i.e. left to right and top to bottom. Doing so makes navigating and amending the code simpler and quicker in that items that appeared near the top of the rendered page would naturally be found near to the top of the (body) markup. I 'grew up' (code-wise) using entirely absolute CSS-P (mainly for its pixel-perfect capabilities). That being said, even then I saw the benefits of structuring the markup intuitively. Relative positioning slowly began to appear in the positioning of interior nested divs until I finally got in the habit of using it for the major layout components as well. My layouts appear no different to those that I would produce with absolute CSS-P. It's simply a matter of margins and floats. Nothing that requires 'hacks' as far as I'm aware. (That being said I've not done any hugely busy layouts with relative CSS-P, but I don't envisage any problems when scaling up the complexity of those layouts I have done. Mind you, there aren't any layouts, complex or otherwise, that spring to mind that can't be done with a little clear thinking ahead of time and simple, modular construction using relative positioned divs.) The only time I use absolute CSS-P is if I'm playing with DHTML animation. DHTML can still be done with relative positioing, but it's a lot easier with definite top and left values. -- Sorry if I'm being slow today, but I'm intrigued by the issue (especially the mention of 'spacer divs'). Hopefully, come the end of the discussion one of us will have learned something that we didn't know before.

13-05-2003, 06:16	#10 (permalink)
smallbeer I Ain't Losing Any Sleep™ Join Date: Apr 2003 Posts: 5,236	[quote:f7e6eff1df="Bill Posters"] I must be being dense (entirely possible given the lack of sleep). Can you post a simple example illustrating the problem? [/quote:f7e6eff1df] OK, a very simple example - http://www.lifeofsmallbeer.co.uk/tests/dt.html http://www.alistapart.com/stories/flexiblelayouts/ - This article and the further discussion details the problem that "containers will not expand when filled with absolute DIVs" [quote:f7e6eff1df="Bill Posters"] Fwiw, I've never even heard of people using "spacer divs" with regard to floating or any other webdev technique. I've certainly never needed to use any such thing. (I'm mentally presuming that 'spacer divs' equates to 'spacer gifs' and their function in table-based layouts.) [/quote:f7e6eff1df] http://www.alistapart.com/stories/practicalcss/ - Halfway down the page is an example of the need for spacer divs with floats. [quote:f7e6eff1df="Bill Posters"] [quote:f7e6eff1df="smallbeer"] If you absolutely position a navigation bar for example, you can structure code so that it appears at the bottom of your html but to the left in the browser. I never use absolutely positioned divs but they do have benefits. [/quote:f7e6eff1df] I'm still not overly convinced by the benefits of this over simply placing the markup in a structural order in the first place. Imho, markup is best constructed according to the same biases as a written page: i.e. left to right and top to bottom. Doing so makes navigating and amending the code simpler and quicker in that items that appeared near the top of the rendered page would naturally be found near to the top of the (body) markup. [/quote:f7e6eff1df] I completely agree and it's how I try to work. [quote:f7e6eff1df="Bill Posters"] Sorry if I'm being slow today, but I'm intrigued by the issue (especially the mention of 'spacer divs'). Hopefully, come the end of the discussion one of us will have learned something that we didn't know before. [/quote:f7e6eff1df] Hopefully! __________________ That's fuckin' ingenious, if I understand it correctly. It's a Swiss fuckin' watch.

13-05-2003, 07:04	#11 (permalink)
smallbeer I Ain't Losing Any Sleep™ Join Date: Apr 2003 Posts: 5,236	As to whether to use absolutely positioned divs to 'move' content around in the markup structure, here's an example. http://www.lifeofsmallbeer.co.uk/smallbeer/ This is a site I'm working on at the moment...very early stages so don't dis' the coding just yet! Now in the structural order, the 'weblog' section (positioned relatively) comes last which isn't really ideal. Positioning this section absolutely would mean I could place it anywhere I liked within the mark up, above the contact section would be a start. To me, that would now be more structurally correct. __________________ That's fuckin' ingenious, if I understand it correctly. It's a Swiss fuckin' watch.

13-05-2003, 08:17	#12 (permalink)
Stickman Dr. Lucien Sanchez Join Date: Mar 2003 Location: UK Posts: 5,628	I'm not sure what the problem is here as I've read your posts but can't be arsed to follow all of the various links. However.... [quote:05583a8df5="smallbeer"]I'm not sure they were meant to be used for layout thats all. The hacks (spacer divs) you have to use to implement them makes them no better than tables[/quote:05583a8df5] When using the float property, I fine-tune the position of a div by defining its margins, paddings and border properties - I don't see how you'd need hacks or 'spacer' divs, unless you're after something complex which doesn't warrant the float effect and therefore you shouldn't be using that property anyway. [quote:05583a8df5="smallbeer"]Now in the structural order, the 'weblog' section (positioned relatively) comes last which isn't really ideal. Positioning this section absolutely would mean I could place it anywhere I liked within the mark up, above the contact section would be a start. To me, that would now be more structurally correct.[/quote:05583a8df5] Like Bill Posters said - we read from left to right, top to bottom. If I was looking to edit your weblog (looks like a nice design coming on, btw ), I'd look to the bottom of your code first as it appears on the far right of the whole layout; from left to right, that makes it the last element. To me, that is logical and structurally correct.

13-05-2003, 08:56	#13 (permalink)
smallbeer I Ain't Losing Any Sleep™ Join Date: Apr 2003 Posts: 5,236	[quote:496ed55f15="Stickman"][quote:496ed55f15="smallbeer"]I'm not sure they were meant to be used for layout thats all. The hacks (spacer divs) you have to use to implement them makes them no better than tables[/quote:496ed55f15] When using the float property, I fine-tune the position of a div by defining its margins, paddings and border properties - I don't see how you'd need hacks or 'spacer' divs, unless you're after something complex which doesn't warrant the float effect and therefore you shouldn't be using that property anyway. [/quote:496ed55f15] Quoting ALA, when you float an element with CSS, it no longer takes up any "space". So say you had 2 floated columns within a container DIV, the container would not expand with the size of the columns unless you put some content other than the floated columns into the container DIV. (phew!) So you'd need to do this [code:1:496ed55f15] <div id="container"> <div class="spacer"></div> <div id="leftcolumn">Blah blah</div> <div id="rightcolumn">Blah blah</div> <div class="spacer"></div> </div> .spacer {display: none;} [/code:1:496ed55f15] Or at least that's what I've found I have to do. [quote:496ed55f15="Stickman"][quote:496ed55f15="smallbeer"]Now in the structural order, the 'weblog' section (positioned relatively) comes last which isn't really ideal. Positioning this section absolutely would mean I could place it anywhere I liked within the mark up, above the contact section would be a start. To me, that would now be more structurally correct.[/quote:496ed55f15] Like Bill Posters said - we read from left to right, top to bottom. If I was looking to edit your weblog (looks like a nice design coming on, btw ), I'd look to the bottom of your code first as it appears on the far right of the whole layout; from left to right, that makes it the last element. To me, that is logical and structurally correct.[/quote:496ed55f15] but we're talking about the content here aren't we, not the presentation. In the content, wouldn't it be more structurally correct to have the main content (weblog) higher up the page? __________________ That's fuckin' ingenious, if I understand it correctly. It's a Swiss fuckin' watch.

13-05-2003, 09:44	#14 (permalink)
Bill Posters trouble free and loverlee Join Date: Mar 2003 Location: YooKay Posts: 2,880	[quote:766a25616b="smallbeer"]As to whether to use absolutely positioned divs to 'move' content around in the markup structure, here's an example. http://www.lifeofsmallbeer.co.uk/smallbeer/ This is a site I'm working on at the moment...very early stages so don't dis' the coding just yet! Now in the structural order, the 'weblog' section (positioned relatively) comes last which isn't really ideal. Positioning this section absolutely would mean I could place it anywhere I liked within the mark up, above the contact section would be a start. To me, that would now be more structurally correct.[/quote:766a25616b] [quote:766a25616b] but we're talking about the content here aren't we, not the presentation. In the content, wouldn't it be more structurally correct to have the main content (weblog) higher up the page? [/quote:766a25616b] Given that your left column is floated left and the right content is floated right, there should be no probelm in switching the markup order so that the right content (weblog) is marked up directly after the header- like this (check the markup). Fwiw, the latter of the two columns is pushed down the page in IE5/Mac. On your version this is the right column (as it appears later in the markup) whilst in my markup it's the left column. This is most likely due to excessive width somewhere, so shouldn't be too hard to fix. Both version of the markup display correctly and identically in Camino, Moz, NN7 (Gecko) and Opera 6. The spacer class that you are using to [i:766a25616b]clear: both[/i:766a25616b] can (read: should) be integrated into the preceding div and can be done with a little judicial reallocation of ids, tag selectors and classes. I've shown that you can reproduce that layout and have the weblog before the left column content in the markup. With a little more time and some clear, 'modular' thinking there's no reason why you can't have the markup running in an order that best suits you and that doesn't require addition markup such as the 'spacer divs'. I'm going to read the ALA articles now as I'm curious to see precisely what they mean by some of the things you've related here.

13-05-2003, 10:25	#15 (permalink)
smallbeer I Ain't Losing Any Sleep™ Join Date: Apr 2003 Posts: 5,236	[quote:ffa471468c="Bill Posters"] The spacer class that you are using to [i:ffa471468c]clear: both[/i:ffa471468c] can (read: should) be integrated into the preceding div and can be done with a little judicial reallocation of ids, tag selectors and classes. [/quote:ffa471468c] You couldn't explain that a bit more could you please? And any chance of a screen shot of that IEMac glitch? And...you were right, some of us did learn something today __________________ That's fuckin' ingenious, if I understand it correctly. It's a Swiss fuckin' watch.

13-05-2003, 10:54	#16 (permalink)
Bill Posters trouble free and loverlee Join Date: Mar 2003 Location: YooKay Posts: 2,880	[quote:c738be1e3f="smallbeer"][quote:c738be1e3f="Bill Posters"] The spacer class that you are using to [i:c738be1e3f]clear: both[/i:c738be1e3f] can (read: should) be integrated into the preceding div and can be done with a little judicial reallocation of ids, tag selectors and classes. [/quote:c738be1e3f] You couldn't explain that a bit more could you please?[/quote:c738be1e3f] I just meant that because you use '.spacer' as a class, you can't simply add it to the preceding div if it already has a class assigned to it as it may conflict with another attribute within that class. It might just be a simple matter of copying the [i:c738be1e3f]clear: both[/i:c738be1e3f] attribute into any existing declarations assigned to the preceding div/element. Without going through the code in more depth I wouldn't want to say that this alone would remove the need for spacer divs altogether. I will say though, that a clear rethink from the start of how you want each element to behave will produce more efficient and effective code than using spacer divs to patch up the holes. [quote:c738be1e3f]And any chance of a screen shot of that IEMac glitch?[/quote:c738be1e3f] Sure. (Shots at 50% actual pixel size.) Your original markup: [img:c738be1e3f]http://www.bposters.fsnet.co.uk/forum/designerstalk/smallbeer_orig.jpg[/img:c738be1e3f] My reordered markup version: [img:c738be1e3f]http://www.bposters.fsnet.co.uk/forum/designerstalk/smallbeer_altmarkup.jpg[/img:c738be1e3f]

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search