Hello, I did search the forum before creating this topic but the thread I found was over 1 year old and there was a message saying its frowned upon to revive threads over 1 year old, so for that reason I created my own.
I am wondering whether I should be using floats or using position: relative/absolute to position things?
I float pretty much all my content but I wanted to know if positioning things make a site more flexible/compact. Not sure of the pro's and con's of each. I've always been advised to steer clear of positioning things absolutely, so I kinda dropped relative and never bothered to learn it.
Hmm, well it's one of those questions that is.. not the right question. All elements are positioned, the real seperation is between static (default) & relative positioning, in which elements must respect each-other in the element flow, and absolute & fixed positioning, in which they are removed from the element flow. All elements are following one positioning rule or another, so floating elements are positioned as well. However, you can't float absolutely positioned elements (I'm thinking fixed elements too, I've never checked).
It is like compairing a nail and a screw in a lot of cases, when trying to decide on how to position, or if you should float, since it depends on the job at hand more than anything. A good page will respect the element flow, don't abuse absolute positioning as the lazy option. If something seems like it should be part of the element cascade, then it probably should be! I dare say most elements should be, with the odd exception. If you take your time to fit the puzzle of elements together nicely in relation to each-other you will end up with efficient code, your pages will be less likely to fall appart, and of course it makes dynamic layout a lot simpler. Floating elements is still respecting the flow.
The answer is: "it depends"! Here is a good article to read.
But to attempt to summarise..in VERY broad terms:
(always) give 1st preference to "static";
consider "float" to achieve desired layout or, for example, to float images within a larger textual-area;
then "relative", but mainly to supply a content for "absolute" and other positioned elements;
avoid "absolute" but, if used, tend to do so in the context of another (relatively) positioned element;
"fixed" is used rarely, but occasionally is used to fix a small element at one side of the browser window.
Specific layouts are mainly achieved using floats, but some layouts can also be achieved with a combination of relative and absolute positioning. Percentage and/or fixed widths on elements are also used to achieve a desired layout and behaviour. cf liquid layouts.
People sometimes resort to positioning of elements when they haven't fully explored the use of margins and padding to separate elements.
I may have confused rather than helped?? but the links are good
__________________
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
Validate your HTML and CSS
After reading the link from Andrew, it still seems very much a gray area. I think the best way to learn would be putting it into practice and creating a simple site using positioning for everything, just to get a feel for it and see what the results are. It's definitely an area of CSS which I am lacking so i'd like to close the gap.
I'll keep updating the thread with any issues which arise but again thank you all very much for the replies. Seems there are many different opinions on it so it's definitely worth taking a stab at it for future projects. I can seem to get things where I need them using floats with ease but I'd like to try different approaches to gain the same effect.
I don't think this is the case, we've just emphasised different aspects of this topic.
__________________
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
Validate your HTML and CSS
Ok, so it's really down to my preference? I'm floating anything I need to at the minute to position it then just clearing the next element and floating, or leaving static, depending on what I need to do. Use fixed for things you want to be 'fixed' on the page or absolute when you need to do something a bit different, say overlapping it over another element?
Ok, so it's really down to my preference? I'm floating anything I need to at the minute to position it then just clearing the next element and floating, or leaving static, depending on what I need to do. Use fixed for things you want to be 'fixed' on the page or absolute when you need to do something a bit different, say overlapping it over another element?
Regards,
LC.
Yeah, kinda I think you will only obtain some clarity by exploring - putting in the time
__________________
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
Validate your HTML and CSS
When creating a site I generally go for that approach, creating a main container but I center it using margin: auto instead. Within there I usually create a heading div, either put the nav inside or create a separate div for a nav. Content div below and either the footer div inside or just outside the content div.
Got the full day now to create a simple page using the relative and absolute stuff so I'ma give it a go.
I feel I have a bit of a better understanding from before I started this thread so thanks for the replies!
I'll most likely run into issues so I'll probably post later. Will give that site another thorough read.
Before you post, read our: 
I think you will only obtain some clarity by exploring - putting in the time 
