Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS - Absolute positioning or float?

I've got a basic layout where the body div is set to a specific width. And with margins left and right are set to auto. Resulting in the div being centered.

Now, when it now comes to positioning all sub elements within this div, is it best to use absolute positioning or fixed coordinates? These sub elements are basically columns of text, some images and a few headings. I've found that floating all of them to the left makes them stack behind each other. Which is basically what I want. But would it be better to specify the coordinates? I ran into a small common margin bug with IE you see. And I know absolute positioning would fix it. But would that be a dirty fix?

I mean, the layout itself is liquid in some sense. But the body div has its width. So the sub elements won't move around regardless of resolution.

like image 763
Kenny Bones Avatar asked Feb 07 '10 19:02

Kenny Bones


People also ask

Should you use absolute positioning CSS?

As long as you structure your HTML so that the elements follow a logical order that makes sense when rendered without CSS, there is no reason why using absolute positioning should be considered bad practice.

What is the difference between position absolute and float?

Floats are meant to be used in images that you want the text to wrap around. Position absolute is meant to place elements with some kind of x and y coordinates.

Should I use relative or absolute positioning?

As a special, use “relative” positioning with no displacement (just setting position: relative ) to make an element a frame of reference, so that you can use “absolute” positioning for elements that are inside it (in markup).

Why you shouldn't use position absolute?

IF you were to use all absolute div tags you could easily have your tags overlap and hide each other when the data within them changed. Secondly, many good sites allow for the information to wrap depending on the screen resolution and browser size that a user uses to access the web page.


1 Answers

Note: the margin bug in IE can also be "fixed" by wrapping the div with a margin in a div without a margin, and floating that outer div.

As to absolute vs. float: I suggest you have a look at this page, which seems like a good summary, and ask yourself if any of the cons raise a red flag for you.

I personally would use absolute positioning if all the div's contents are static, and float if some are dynamic. But that's a subjective answer.

like image 166
Arkaaito Avatar answered Sep 17 '22 16:09

Arkaaito