25 replies [Last post]
dugawug
Offline
Regular
Last seen: 11 years 18 weeks ago
Joined: 2008-06-19
Posts: 13
Points: 0

What I'm curious of is this:

I have a fixed width site I'm working on and the layout framework (header, footer, navbar, content) is all done with floated divs. But for all the boxes (divs) within those (and boxes within those), so far I've chose to use floats almost exclusively and I move things around via padding and margins. This still feels a little bit of an imprecise method and seems to be taking a long time.

So what would be so bad about using relative positioning for these "sub-divs" instead? That is, say I have my floated content div as I have now. Then I also set that to position: relative and every div within it would be set position:absolute and moved exactly where I want inside the content container div.

I don't have time in my project to play around with this as I'm guessing though theoretically this would work fine, there may be major browser issues (i'm trying to support IE 6&7, Firefox, Safari).

How do most people approach their "micro-layout" as I'll call it. Stick with floating about every "sub-div" or start using positioning relative to the larger container?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 9 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Using absolute positioning

Using absolute positioning for everything means that you remove the ability for the layout to expand vertically based on content length or text size because you'd have to manually calculate heights and set vertical positions.

If your main columns are set up with floats, why do you have to float everything inside them?

Using absolute positioning isn't necessarily wrong as long as you take into account what happens to your layout when it's viewed under different conditions than what you expect to be the default, e.g. different window size, text size, sidebars open, images off etc.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

dugawug
Offline
Regular
Last seen: 11 years 18 weeks ago
Joined: 2008-06-19
Posts: 13
Points: 0

thanks for the reply. i'm

thanks for the reply. i'm not sure i totally understand how absolute positioning removes vertical expansion though. keep in mind, i'm talking about floating your main areas (header, footer, nav, content, etc.). then setting position:relative to any of those (content for example) and absolute positioning child divs within, which i understand will position them absolutely but relative to the parent div, content in my example.

so in that case, does absolute positioning still cause a problem? sorry, i wish i could give an example but you'll just have to visualize.

to answer your question, i'm honestly not sure why i've floated child divs at this point. i don't have "div-itis", my markup is really minimal and clean, but it always seemed for the rather intricate design i'm dealing with, i've needed to use floats within the larger floated content div to position things. i guess i could play with taking the floats off of some of them and see what happens.

in any case then, is the general protocol for most CSS developers, when you starts getting into intricate design that calls for many sub-divs to your main parent Content div, to continue to use floats, relative/absolute positioning or nothing at all?

when i'm at work tomorrow maybe i can give a code example to better illustrate what i'm talking about...

thanks for the help.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 9 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

dugawug wrote:when i'm at

dugawug wrote:

when i'm at work tomorrow maybe i can give a code example to better illustrate what i'm talking about.

I think you'll need to because I don't believe there's one single way to approach all layouts.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

jyotigarg
jyotigarg's picture
Offline
Regular
Last seen: 10 years 30 weeks ago
Timezone: GMT-6
Joined: 2008-06-03
Posts: 41
Points: 0

Plz Provide a basic code for div site :(

Can u help me what is the basic concept to make div site(lik float, absolute , relative)Plz give me the example and code for basic layout in div with css code

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 7 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

While I occasionally use

While I occasionally use asbsolute positioning for children depending on the situation, I almost never use relative positioning for anything but triggering haslayout or giving a ref for the abso-po'd children.

Floats with their margins, if the margins and widths are set in px, can be very precise. If everything is done in ems or % then everything may not be precise as far as actual distances, but everything remains in the same relation to each other upon text enlarge (esp in Mozillas).

If the design is intricate, you will indeed find your CSS really growing and floating or abso-po-ing everything. Usually you want the document flow to do as much of the work for you as possible, but with some designs that can't be.

I'm no expert, but I fake one on teh Internets

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 9 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

jyotigarg wrote:Can u help

jyotigarg wrote:

Can u help me what is the basic concept to make div site(lik float, absolute , relative)Plz give me the example and code for basic layout in div with css code

There are plenty of sites with example layouts out there - time to sharpen your Google skills.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

dugawug
Offline
Regular
Last seen: 11 years 18 weeks ago
Joined: 2008-06-19
Posts: 13
Points: 0

thanks. i'm too busy at

thanks. i'm too busy at work to get around to giving an example, but Stomme poes seems to understand what I mean here. so good to hear, it sounds rare that anyone uses relative/absolute positioning for the majority of their child divs in their layout.

i'm still getting used to full CSS development, have read a lot but a few things are becoming clearer now that i'm knee deep in a massive project. floating does seem the way to go though i have absolutely positioned a few elements relative to their parent Content div for some cases where that made more sense. (one where it was the only way to get around it...too hard to explain).

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 7 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

You'll get a better

You'll get a better understanding of when to abso-po and when not to AFTER you've done it with some sites and have played with them (text-enlarge, adding-removing content, rearranging stuff now and then)... if you are completely new to css positioning, go see if your library has HTML Utopia: Desigining Without Tables by Rachel Andrew and Dan Shafer, cause it's what kinda got me started on CSS positioning (it's definitely only a start, but there's a good explanation of the setbacks abso-po'd stuff can get, and also issues with floats (though it only shows a single clearing method, which I don't like too much), and is just a nice, light basis.

Sometimes places where you think abso-po-ing is the only way, you'll find someone doing the same effect in some other way and you're like, oh wow that's a neat trick! So, you'll come out of this massive project knowing a lot more : )

I'm no expert, but I fake one on teh Internets

greg420blues
greg420blues's picture
Offline
Enthusiast
Denton, TX
Last seen: 11 years 5 weeks ago
Denton, TX
Timezone: GMT-5
Joined: 2006-01-17
Posts: 74
Points: 0

It's funny ...

I've been using full CSS layouts for about 3 years now and have really fine tuned my layouts. Generally, I do mostly one or two column layouts and float the main div elements. Within those elements, the only time I really float any object WITHIN the layout divs is if I need it to justify something.

I can't think of a time in the past 2 1/2 years where I've used absolute positioning. Not to say that it's not a 100% valid tool, but I just don't use it. MAYBE in putting a footer directly attached to the bottom of the page. But in my opinion, almost any layout can be achieved with a simple float and adding margin or padding.

Tips? I started off learning via the Ruthsarian method of layout but quickly moved to One True Layout. Do a Google search and look them up. Ultimately, I'm using a combination of both ... incorporating NiftyCorners to achieve equal column height.

I'd LOVE to share the knowledge with ya ... lemme know if you still want help.

greg
http://www.browncomedia.com/
http://www.unt.edu/presidentsreport/
http://www.unt.edu/unt-dallas/

Greg Altuna
BrownCo Media
http://www.browncomedia.com/

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 9 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

greg420blues wrote:I can't

greg420blues wrote:

I can't think of a time in the past 2 1/2 years where I've used absolute positioning. Not to say that it's not a 100% valid tool, but I just don't use it.

I use AP quite a bit whether it be for dropdown menus, for removing elements from the screen (like form labels) with the offset method or for placing elements in the top or bottom corners of their parent elements. It's definitely got it's place in web design. What I don't use so much is to use position: relative to place elements because anything moved this way leaves the space that it would normally occupy behind but it's handy if something's just one or two pixels out of lining up with something else.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

greg420blues
greg420blues's picture
Offline
Enthusiast
Denton, TX
Last seen: 11 years 5 weeks ago
Denton, TX
Timezone: GMT-5
Joined: 2006-01-17
Posts: 74
Points: 0

Tyssen wrote:greg420blues

Tyssen wrote:
greg420blues wrote:

I can't think of a time in the past 2 1/2 years where I've used absolute positioning. Not to say that it's not a 100% valid tool, but I just don't use it.

I use AP quite a bit whether it be for dropdown menus, for removing elements from the screen (like form labels) with the offset method or for placing elements in the top or bottom corners of their parent elements. It's definitely got it's place in web design. What I don't use so much is to use position: relative to place elements because anything moved this way leaves the space that it would normally occupy behind but it's handy if something's just one or two pixels out of lining up with something else.

Word. I just can't say that I've found a decent use for it. Again ... NOT that it doesn't have it's place, it's just that with the way my mind thinks at this time, I don't normally find the need to use it. Offset method is great, especially for "skip to content" links ... but I usually just make them small text that fits in the margin between my wrapper and the top of the body.

HOWEVER ... Tyssen has a great point. They ARE very useful ... relative positioning? Not so much ... so I agree with ya.

Greg Altuna
BrownCo Media
http://www.browncomedia.com/

jyotigarg
jyotigarg's picture
Offline
Regular
Last seen: 10 years 30 weeks ago
Timezone: GMT-6
Joined: 2008-06-03
Posts: 41
Points: 0

how to open image window over the site

This comment has been moved here.

leobag
Offline
newbie
Last seen: 11 years 22 weeks ago
Joined: 2008-07-09
Posts: 3
Points: 0

position on floats

There have been some good comments made—but I feel that people aren't getting what dugawug is getting getting at.

First, about relative positioning:
Relative positioning is very, very useful. Not necessarily because it allows you to "position" an element using top/bottom/left/right, but more because it gives your element a _position_ so that child elements can be positioned with respect to the parent [relatively positioned] element. It is used to give elements that reference point without moving it from the flow. So what dugawug is doing is giving his divs a relative position and then absolutely positioning the child divs within those relatively positioned divs. This will allow for whatever layout you want, because the absolutely positioned divs will move with respect to the relative divs (which will flow with the page).

but here is the interesting question—one that I am also curious about:
is it proper to give elements *both* a position (whether it is relative, absolute, or whatever) *and* a float? ...because in a sense, "float" is a type of position. So something that has both [position: relative] and [float: left] essentially has two positions. Applying both has helped me in the past, but I'm not sure if it is proper use of the attributes.

Stomme poes: are you sure [position:relative] evokes hasLayout? I think only position:absolute does (when dealing with the position attribute).

—Leo

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 9 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

leobag wrote:is it proper to

leobag wrote:

is it proper to give elements *both* a position (whether it is relative, absolute, or whatever) *and* a float? ...because in a sense, "float" is a type of position. So something that has both [position: relative] and [float: left] essentially has two positions. Applying both has helped me in the past, but I'm not sure if it is proper use of the attributes.

Applying position: relative to an element without specifying top, bottom, left, right values does nothing to change it's position. If you use any of those values on a floated element, the element will be moved in whichever direction you've specified after it's floated position has been calculated but as with using position: relative in any situation, the space the element would normally occupy is left behind so it's not advisable to use it for moving elements a large distance.

Using position: relative is often needed to overcome different bugs in IE.

There's no point floating an absolutely positioned element however cos the float gets ignored.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

leobag
Offline
newbie
Last seen: 11 years 22 weeks ago
Joined: 2008-07-09
Posts: 3
Points: 0

sooo...

so what you're saying is: "yes, it is fine to give floats a position of relative"

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 9 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Yes, but I wouldn't use it

Yes, but I wouldn't use it for positioning; I'd use margins instead. The only reasons I'd add position: relative to a float would be:

  • establish a new positioning context for AP children
  • set a new stacking order
  • overcome IE bugs

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 7 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Quote:Applying position:

Quote:

Applying position: relative to an element without specifying top, bottom, left, right values does nothing to change it's position.

No, but leobag said it gives the element a position, which it does (even if it's still 0, Innocent. It stops being a static elements and has become a "positioned" element. Visually, no difference.

I use position: relative on floats, but only because it doesn't seem to count as a "positioned parent" to abso-po'd children inside. This is a good thing-- often, I want the abso-po'd children to reference a grandparent or a great-grand-parent, yet parents themselves might be floated, and I don't want the children to automatically reference the floats!

Quote:

Stomme poes: are you sure [position:relative] evokes hasLayout? I think only position:absolute does (when dealing with the position attribute).

Aboslute, relative, float, setting width, height, zoom, and a few other things, they all trigger haslayout.

When I was doing some Haslayout tests for someone on DP (or was it here?) with their code, I saw differences in how it worked out. The guy had a left-floated thingie with a set width, and then he wanted the text on the "rightside" to wrap. He had it in a float too, so I took it out, and let that box have no Layout, and warned him of Haslayout... and then, to make sure I wasn't just talking out of my ass and spreading misinformation (which I seem to be rather good at), I tested, and while setting position: relative on #rightside did indeed set Haslayout, #rightside did act differently when I triggered it using height. With height, I had to wait for float drop to get the text on the right side underneath the left float (#rightside needed to drop). With pos: rel, something interesting happened-- #rightside (which had a red background for testing) would eventually jump over and cover the left float, while the inline elements inside (the text) dropped underneath where the float was, which would look like proper wrapping if there had been no background colour. In other words, I didn't have to wait for the whole box to drop. However, instead of #rightside sitting UNDER the float like it should have in modern browsers, it was indeed sitting OVER the float. I tested by trying to click the links which were in the left float-- they were unclickable in IE.

*edit, when I say "wrap", I mean the text was to wrap when the browser window got smaller-- all these tests were done by growing and shrinking the browser window.

*edit2, if you want to see the page I was talking about, it's here: http://stommepoes.nl/joebloggs.html however the links have been removed as they had an annoying Javascript in them which screwed with me while testing, and maybe I should change the title text too... bah, I'm lazy. Don't bother looking in anything other than IE, just copy the code and play with the positions on the rightside... you'll see position: relative clearly stop the rightside from sliding under the float like it does in everyone else.

I'm no expert, but I fake one on teh Internets

leobag
Offline
newbie
Last seen: 11 years 22 weeks ago
Joined: 2008-07-09
Posts: 3
Points: 0

relative positioning on floats and hasLayout

Stomme poes wrote:

I use position: relative on floats, but only because it doesn't seem to count as a "positioned parent" to abso-po'd children inside.

I did a few tests and all showed that setting a floated element's position to "relative" does make it count as a "positioned parent" - are you sure you've run across a case where this behavior is not present?

Quote:

"Aboslute, relative, float, setting width, height, zoom, and a few other things, they all trigger haslayout."

I looked through the code you posted and it looked like every element gained hasLayout by some css declaration (either it floats or has a width). I've read numerous places that relative positioning is not included in the list of items that cause an element to haveLayout. What you may have experienced is a buggy relative positioning issue (in ie6), but I don't think it had to do with elements and hasLayout.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 9 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

leobag wrote:I've read

leobag wrote:

I've read numerous places that relative positioning is not included in the list of items that cause an element to haveLayout.

Yep, that's right.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 21 hours 34 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

The following trigger

The following trigger hasLayout:

          CSS property: Value
          --------------------
          display:      inline-block
          height:       any value
          float:        left or right
         *max-height:   any value
         *max-width:    any value
         *min-height:   any value
         *min-width:    any value
         *overflow:     not visible
          position:     absolute
          width:        any value
          writing-mode: tb-rl
          zoom:         any value
 
         *added with IE7

Another oddity of IE is that having position is not sufficient to be a positioned ancestor. It must also have layout. This may be the cause of some confusion about whether and when IE honors position.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 7 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

That must be it.

leobag wrote:
Stomme poes wrote:

I use position: relative on floats, but only because it doesn't seem to count as a "positioned parent" to abso-po'd children inside.

I did a few tests and all showed that setting a floated element's position to "relative" does make it count as a "positioned parent" - are you sure you've run across a case where this behavior is not present?

You misunderstood me, and I should have been clearer:
I use position: relative on floats, but only because float doesn't seem to count as a "positioned parent" to abso-po'd children inside.
Meaning, if I'm floating something, it may have Layout but if I also want it to be a positioned parent, I add "position: relative" as well. I use this constantly on my "calendars" on our second home page. I wanted the date info to be in relation to the box holding the floated months, not each month itself.

leobag wrote:

What you may have experienced is a buggy relative positioning issue (in ie6), but I don't think it had to do with elements and hasLayout.

That must be it, since it did behave differently in how it jumped over to cover the float from the others when I truly set Layout on them. (see above where I seem to be good at spreading misinformation : )

I'm no expert, but I fake one on teh Internets

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 12 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

gary.turner wrote:The

gary.turner wrote:

The following trigger hasLayout:

          CSS property: Value
          --------------------
         *overflow:     not visible
 
         *added with IE7

overflow has always triggered hasLayout.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 21 hours 34 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

Hi Chris, I don't have the

Hi Chris,

I don't have the reference handy, but I'm pretty sure that the overflow triggering hasLayout was a very late addition to IE7. View the overflow demo in enclosing float elements using IE6.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 21 hours 34 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

small update

I found that Suzy wrote about it over on Webmaster World. I got 404 errors on the MSDN links she posted.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 12 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Oops, I think you're

Oops, I think you're right.

I use overflow because with it, all browsers, i.e. IE and non-IE, behave very similarly. I still need to trigger hasLayout with width or zoom.

Sorry for the confusion!