Float vs. Absolute (Which One Would You Use?)

@banksworld1986Dec 21.2007

Hello everyone.

This is a general question that’s been bugging me.

I’m developing my first site by writing out the code first (I’ll use DreamWeaver once I have a working knowledge of HTML/CSS).

I’m redesigning my site because I’ve been told I used absolute positioning to much (also I have other issues with the site as well).

It was suggested to me that absolute positioning isn’t necessary and that everything can go within the normal flow of the document and positioned by using float (margin/padding).

Now, I want to be as precise as possible when coding. I don’t want to use excessive coding where it isn’t needed. But I’m thinking that depending on the type of site you are developing (or the complexity) – one w/ high graphic images i.e. model sites, fashion sites vs. one that’s highly text based i.e. yahoo.com, msn.com – you would choose the type of positioning necessary.

Like entertainment sites that are image driven aren’t that complex and pages really don’t have much clutter – or if this is your intent, then absolute positioning will suffice because it makes things easier. Whereas sites with a lot of text, columns, and images may need float positioning because if you update the site w/ replacement images, text or w/ addtl…you don’t want to break up the flow. You want everything to be locked in as much as possible.

What are your thoughts please….

to post a comment

CSS

11 Comments(s) _↴

@CentauriDec 21.2007 — #I would always advocate using standard margin / padding positioning, with floats as appropriate, for any type of site. About the only time you need absolute positioning is when you want elements over top of others (for effect, or placing corner graphics etc) or when the display order is very different to the html order (ie, you may want content before navigation, or header stuff after everything else, in the html).

One of the big problems using absolute as a general positioning method occurs when the user resizes the text - when elements cannot move to accomodate increased sizes of others, text overlap or cutoff can easily happen.

@Declan1991Dec 21.2007 — #I don't ever see a need for absolute positioning for a whole document. I think it makes it more difficult and more difficult to maintain.

@banksworld1986authorDec 21.2007 — #But what if you are designing a site like this.. www.kooklub.co.uk ....

You can't increase the font size because it's a highly graphic designed

site. Images are saved separately and increasing the font size would ruin the

look. This is what I mean by entertainment sites or high graphic design

dependent sites.

Using float/margin/padding may be easier (I don't know yet because I haven't

used it), but how can absolute/relative positioning ruin a site like this?

@CentauriDec 21.2007 — #That is a flash site, so everything is set in the flash - positioning methods don't come into play here....

But it would be nice to be able to increase the text size on that site - it is a bit small to read properly.

@banksworld1986authorDec 21.2007 — #Well....

The point was if it's a highly graphic designed site like that one, then adjusting the font would make everything look weird...so why not use absolute positioning.

But also, I've been playing around with the float property and it's seems that if I need to have an image overlap another image or appear on top of another image, then this wouldn't be the best method to use.

Is this the case...or is there a solution using float?

@CentauriDec 21.2007 — #You cannot (nor should you try to) prevent a user from resizing text, so you have to do your best to cater for that. There are various tricks to make graphics look like they are fluid.

Overlapping elements is one of the uses for absolute positioning I mentioned above, although sometimes this can be done with negative margins too.

Floating is just another tool in the arsenal of positioning methods you can use. Generally, most positoning can be done wth the default of "static" along with margins and padding.

@aj_nscDec 21.2007 — #I think people here have given you the idea that absolute positioning is rarely ever needed, and therefore, kind of frowned upon. I don't know why.

Floats have their places and so do absolutely positioned elements, but, as with most things, it is finally up to the designer which to use. In a lot of cases I think it's personal preference if either can be used, whatever he/she is more comfortable with using.

The ultimate goal is getting the site to render correctly across all browsers and if you can do that no matter with a resize or not, then your goal is accomplished and you've done a good job.

@drhowarddrfineDec 21.2007 — #Float was originally developed to allow text to wrap around images and sidebars, similar to what you would see in newspapers and magazines. I feel many use float as a cureall that takes the place of proper positioning.

Use absolute positioning when/where you feel it's necessary and use it with no fear. It's there to be used and there are reasons for it.

@nap0leonDec 22.2007 — #A good case of when you want to use absolute positioning...

you have a flashmovie that plays as a "background" to your webpage which is on top of the Flash. Absolue positioning within the div holding the Flash allows you to position your text precisely where you need it for the graphics to not interfere with the text and vice-versa.

For general page layout, if the page changes frequently and stuff "grows and shrinks" as you update the page's contents, I recommend using float. If content rarely ever changes, the use whichever method you want.

@banksworld1986authorDec 22.2007 — #Just wanted to say thank you for the different views to all of you. I have a much better idea of how to approach web design now.

Thanks.?

@felgallDec 22.2007 — #Most uses for position:absolute involve placing it inside another element with position:relative. That wat the element is absolutely positioned relative to the element it belongs with and not to the page as a whole and therefore when the page reflows for a different browser size or because your visitor has resized the text the elements will still be positioned correctly. Using position:absolute by itself positions relative to the browser window and should be used for elements that need to move independently from the rest of the page.

The main reason why so many people think that using floats is better than using relative and absolute positioning is that floats are easier for beginners to understand and harder for beginners to stuff up. There is nothing wrong with laying out a page using relative and absolute positioning provided that it is done properly so as to allow for different browser and text sizes. Generally beginners tend to code using positioning in such a way as to have their layout break as soon as any of the factors under your visitor's control are changed. It's not a matter of one way being right and the other wrong, its a matter of one being much easier for beginners to code correctly.

Also in #CSS _↴

Bit off more than I could chew How To css layout

Success!

Help @banksworld1986 spread the word by sharing this article on Twitter...

Tweet This

Float vs. Absolute (Which One Would You Use?)

11 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Float vs. Absolute (Which One Would You Use?)

11 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

11 Comments(s) _↴

Also in #CSS _↴