Hello everyone. I’ve picked up many bits and pieces here and managed to learn quite a bit in the last few days. I am however still struggling to get items positioned correctly. I need a proper ‘guide’ on when to use which command because even though I manage to get items where I want them, I’m pretty sure it’s not the right way to do it and I get a little lost sometimes.
You are asking a larger question than you realize. The choice of absolute, relative, float, etc, depends entirely on the context in which it is used. There is not just one way to use each property.
I strongly recommend buying a book about HTML and CSS and reading through it cover to cover and working ALL of the examples as you go through the book with the intent of understanding how and why each one works. It will take a couple or three weeks to do this, but it will be time well spent. You’ll be amazed.
The SitePoint Reference is an excellent basic CSS reference document, but it’s not a tutorial and it does not cover HTML nor CSS3.
Hi,
The css faq has a little introduction on positioning which I reproduce below:
FAQ:Static Positioning :
When you lay out an element on a page and you do not specify it’s position (e.g. position:absolute) then the element is laid out as part of the normal flow of the document. That is it will be placed after any preceding elements and other elements will follow it, as long as all these elements have no position defined other than static which is the default.
Static is the initial value of the position property and is used by default, which means that it doesn’t need to be declared. e.g. position:static is the same as if you hadn’t entered anything at all. Static content will flow around any floated elements.
Also any attempt to position a static element with values for left and top will be ignored for obvious reasons (i.e. static element positions are governed by the normal flow of the document and not by positioning with values. You can of course position the element away from other static elements by using margin-left , margin-right, margin-top or margin-bottom).
FAQ:Relative Positioning:
Relative positioning is the most mis-understood and incorrectly applied positioning system because many beginners do not understand how it works and what it is doing.
You will very rarely use relative: positioning (other than for stacking context (without co-ordinates)) for structural layout because it is not really meant for that but is mainly used for more subtle and advanced effects.
Relative positioning is putting the element in the normal flow of the document and then offsetting it by some distance using the properties left, right, top and bottom. This may cause the element to overlap other elements that are on the page, which of course may be the effect that is required.
Basically you are moving the element relative to where it would have been had it not been moved. This means that the element is moved visually but not physically. It is a means of re-positioning an element without altering the flow of the document in any way except by visual appearance.
When an element is moved with relative position the space that it previously occupied is preserved and that space will still have an effect on surrounding content as if it were still there.
So there are three main things to remember with relative positioning:
-
The element is positioned relative to where it would usually be in the normal flow of the document.
-
The space that the element occupies in the normal flow is preserved, which may mean that you are left with a gap if the element is positioned a long way away.
-
The element may overlap other elements on the page.
FAQ:Absolute Positioning :
An absolutely positioned element is removed from the normal flow of the document and placed precisely at the co-ordinates specified by top,left, right or bottom.
But what is the element absolutely positioned from? It is positioned absolutely from the top left hand corner of its containing block (i.e. its parent). The containing block of the positioned element is the nearest ancestor element which has a value for the property position other than
static. If there is no ancestor then the containing block is the root element , which is the html element outside of all margins set on the body.
So what this boils down to is that an element will be absolutely positioned from the top left of the viewport unless it is nested in another element that has a value for the property position other than static. e.g. position:relative or position:absolute. In these cases the element will position itself the specified amount from the top left of its parent elements.
So the usual way to place an element in relation to its parent is to give the parent a position:relative without co-ordinates which keeps the parent in the flow of the document. The nested child element will then takes its absolute positioning co-ordinates using the parents top left co-ordinates as its starting point.
There is also a section on floats that you might find useful although it could do with updating.
When you lay out a page you should try as much as possible to ‘maintain the flow’ of the page which rules out using absolute positioning for things like columns and content sections. Absolute positioning is good in small doses where areas are protected or of fixed height so that the absolute element will not overlap other elements in the way.
If you want columns then there are three choices these days:
floats
Floated columns are good but you have to maintain and clear then correctly and most sites are designed with floated columns where necessary.
display:inline-block
You can also use display:inline-block to create columns and not worry about containing floats but there are white space gaps to overcome which is why they have not been used as much as floats and for the fact that for IE7 and below to understand this rule you need to add a hack to make it work.
display:table-cell
For ie8+ the display table/cell properties are very good for creating equal height columns but haven’t been used as much as floats because they were not supported prior to IE8. However these days they are a good choice if you don’t need to support older browsers.
In the future there will be flexbox and grids which will all add another dimension to this but at the moment don’t have much browser support.
The main important point is to let elements flow logically form one to the next and just shift them around using margins which means you can add/delete/change content accordingly and the design just adapts. When you want horizontal alignment then you can float and element into position or if it is something small absolutely place it in respect to a position:relative parent but remember to keep other content clear.
If you need a series of inline-blocks then use display:inline-block if you don;t mind the whitespace gap between then (although there are fixed for this). Or just float them but remember floats will snag when wrapped if of uneven height.
Most layouts are a combination of the above techniques but with the biggest emphasis on statically place elements (no positioning at all) so that one element flows to the next in an orderly fashion.
Thanks for the reply. What book do you reckon I start with considering that positioning items seems to be something I find most difficult at the moment? I have read some very basic books and have an idea of the bare basics but when I have too many paragraphs and images on a page and want to go about putting them in the right place, I end up creating a mess lol.
Thanks for that information. I have tried floating and it has worked in cases where there was less content on the pages. When there is more content it gets very frustrating. I would probably also ask you the same question, where do you reckon I should start with learning to position things correctly?
It really depends on the element you are trying to position. Why not take each page element separately. You could post an example layout (say a header, or column elements) and ask us to suggest the best layout method for each element.