01908 565755
info@methodandclass.com

Absolute positioning or floats?

Ok before you begin reading this post I must warn you it's of a techy nature and will not be for everyone... It discusses the floating of DIVs in CSS and HTML....

In the red corner... absolute position

Absolute positioning in HTML and CSS allows you to create pixel perfect layouts and designs for every browser and platform out there. The positives of this are that you know it will look the same for everyone. It might mean creating various incarnations of the same style sheet to cater for each browser, but at least you know how it will look. The problems arise when you start to increase font sizes on the fly. The absolute heights get blown away as text expands outside of backgrounds, navigations push through their holding bars and become weird floating text links etc. In an age when accessibility is a key deliverable for a web site, the option to resize text is a must have feature - your web site design should accommodate this without collapsing.

In the blue corner... the floats

By floating tags left or right it allows you to increase font sizes and stretch containing DIVs and tags to accommodate the larger text. Our site is built using floated DIVs, if you increase the font size (ctrl + on the PC or apple + on the Mac) you will notice that the fonts sizes do increase, but the backgrounds and containing backgrounds also expand to accommodate the larger text.

From experience we have found that floating DIVs offers greater flexibility and scalability for web site layouts. Sure there is often a need to position things absolutely or use negative margins, but predominatley we use a float accompanied by margins and padding to position elements on a page.