But something concerns me which is whether not positioning relatively and doing lots of floating will increase the chances of the laout breaking. So my question is please:
“Does floating and positioning elements relatively increase the chances of the layout breaking of yes whats the alternative?”
CSS is nto really a LAYOUT LANGUAGE per say. So once more the answer is to THINK and GAUGE the specific code you have written.
Some things you should know ( if you dont know already):
positioning an element relatively may have an effect on descendant elements which have position: absolute, as it becomes the positioning context for all decedents until either another position:relative or position:absolute parent is created.
relative positioning moves the element , but not the space it takes up.
potentially you could achieve the same horizontal shift with margin
Sometimes you will see float/position relative as a fix to IE issues ( but I tend to favour the idea of dont fix what isnt broken, so if your code doesnt exhibit IE bugs, I’d consider foregoing the position:relative fix)
If your math is on target, and your code compliant your layout should not break ( whether you use floats/ or not).
for example. if you floated two elements one 80% and one 200px wide contained in a full width div, your layout will break anytime your view port is less than 1000px! .8*1000 +200=1000 This not the result of bad code , just mathematics. So, if we can mathematically anticipate such situations we can put a caveat on the PARENT ELEMENT (min-width:1000px or even an media query) to prevent the situation.
