positioning absolute
in [CSS]
|
Prev: Using styles to create frames?
Next: Forward scanning?
From: Jeff Thies on 23 May 2010 12:05 I've always floated my columns, but I'm thinking now of switching to absolute positioning inside a relatively positioned wrapper. As long as the wrapper has a width, I see no disadvantage over floating inside the same width delimited wrapper. The advantages I see are that it's easy to reorder so that the actual content comes before any side nav or right sidebar stuff. Also, if a column should get blown out width wise, it won't wrap under. The main advantage of floating is wrapping under in narrow width UAs, but if you have a fixed width (even if it is in percent) header or wrapper, that wouldn't happen anyways. Anyone take issue of doing something like this (pseudo styles shown inline): <div id="column_wrapper" style="position: relative;"> <div id="content" style="position: relative; left: width_of_left_side_nav + left_margin; width: some_width"> .... </div> <div id="right_side" style="position: relative; left: width_of_left_side_nav + content + margins; width: some_width"> .... </div> <div id="left_side_nav" style="position: relative; left: 0; width: some_width"> .... </div> </div> I don't see a real downside, have I missed anything? The SEO advantages are leading me towards it. The fact that I haven't done this before is leading to caution. Jeff
From: Ben C on 23 May 2010 13:06 On 2010-05-23, Jeff Thies <jeff_thies(a)att.net> wrote: > I've always floated my columns, but I'm thinking now of switching to > absolute positioning inside a relatively positioned wrapper. > > As long as the wrapper has a width, I see no disadvantage over > floating inside the same width delimited wrapper. > > The advantages I see are that it's easy to reorder so that the actual > content comes before any side nav or right sidebar stuff. Also, if a > column should get blown out width wise, it won't wrap under. > > The main advantage of floating is wrapping under in narrow width UAs, > but if you have a fixed width (even if it is in percent) header or > wrapper, that wouldn't happen anyways. Anyway it's not clear that float wrapping for this kind of layout is less desirable than horizontal scrolling. > Anyone take issue of doing something like this (pseudo styles shown > inline): > ><div id="column_wrapper" style="position: relative;"> > > <div id="content" style="position: relative; left: > width_of_left_side_nav + left_margin; width: some_width"> Don't you mean "position: absolute" on this one? > ... > </div> > > <div id="right_side" style="position: relative; left: > width_of_left_side_nav + content + margins; width: some_width"> > ... > </div> Why not just use right: 0 to put it on the right instead of going all the trouble to work out how far from the left it wants to be? > <div id="left_side_nav" style="position: relative; left: 0; width: > some_width"> > ... > </div> > ></div> > > I don't see a real downside, have I missed anything? The SEO > advantages are leading me towards it. The fact that I haven't done this > before is leading to caution. It seems to me the natural and obvious way to do it.
From: Ben C on 23 May 2010 13:07 On 2010-05-23, Jeff Thies <jeff_thies(a)att.net> wrote: [...] > I don't see a real downside, have I missed anything? The SEO > advantages are leading me towards it. The fact that I haven't done this > before is leading to caution. One thing I would recommend is always also set top or bottom (probably top: 0 in this case). Otherwise you invoke the part of the spec that says browsers are allowed to take a guess at the box's position...
From: Jeff Thies on 23 May 2010 21:41 Ben C wrote: > On 2010-05-23, Jeff Thies <jeff_thies(a)att.net> wrote: >> I've always floated my columns, but I'm thinking now of switching to >> absolute positioning inside a relatively positioned wrapper. >> >> As long as the wrapper has a width, I see no disadvantage over >> floating inside the same width delimited wrapper. >> >> The advantages I see are that it's easy to reorder so that the actual >> content comes before any side nav or right sidebar stuff. Also, if a >> column should get blown out width wise, it won't wrap under. >> >> The main advantage of floating is wrapping under in narrow width UAs, >> but if you have a fixed width (even if it is in percent) header or >> wrapper, that wouldn't happen anyways. > > Anyway it's not clear that float wrapping for this kind of layout is > less desirable than horizontal scrolling. > >> Anyone take issue of doing something like this (pseudo styles shown >> inline): >> >> <div id="column_wrapper" style="position: relative;"> >> >> <div id="content" style="position: relative; left: >> width_of_left_side_nav + left_margin; width: some_width"> > > Don't you mean "position: absolute" on this one? Absolutely! > >> ... >> </div> >> >> <div id="right_side" style="position: relative; left: >> width_of_left_side_nav + content + margins; width: some_width"> >> ... >> </div> > > Why not just use right: 0 to put it on the right instead of going all > the trouble to work out how far from the left it wants to be? > >> <div id="left_side_nav" style="position: relative; left: 0; width: >> some_width"> >> ... >> </div> >> >> </div> >> >> I don't see a real downside, have I missed anything? The SEO >> advantages are leading me towards it. The fact that I haven't done this >> before is leading to caution. > > It seems to me the natural and obvious way to do it. Except, I've run into trouble with the column_wrapper having no height. I had assumed that the child divs, even though they are absolutely positioned inside, would give it height. But they do not. The usual tricks to trigger has layout don't work. And a footer is now a topper! Either I'm doing something wrong or I need to rethink. I'll post some html later. Jeff
From: rf on 23 May 2010 22:19
"Jeff Thies" <jeff_thies(a)att.net> wrote in message news:htclg4$7im$1(a)news.albasani.net... > Ben C wrote: >> Don't you mean "position: absolute" on this one? > > Absolutely! >> It seems to me the natural and obvious way to do it. > > Except, I've run into trouble with the column_wrapper having no height. Of course it won't have any height. position: absolute removes the element from the flow. As far as the layout of the rest of the content is concerned (the wrapper div) it's as if that element did not exist. Make sure you put nice big borders around all of your divs, so you can see where they are going. Or use firebug to add the borders. > I had assumed that the child divs, even though they are absolutely > positioned inside, would give it height. But they do not. Correct. For layout purposes they are no longer "child divs". They don't "take up any space". And that's the problem with this. People get as far as you have and then think "Let's give all those divs a specific height" and choose one that looks good. For them. On their system. Then a viewer comes along with a larger font size and ... well, think about it :-) > The usual tricks to trigger has layout don't work. Correct, although there are no "tricks" to make this work the way you expect it to. And it's nothing to do with has layout. The wrapper div no longer has any content, as far as its layout is concerned. > And a footer is now a topper! No, it's not. It's below the wrapper div, where it should be. Put a bit of other content inside the wrapper div, but outside the column divs and you'll see. > Either I'm doing something wrong or I need to rethink. Rethink. But only after reading very very carefully the chapters in the spec on absolute, and relative, positioning. They don't do what you think they do. |