Buon Giorno from Pitch black 9 degree C Wetherby UK,
I'm in the midst of designing the layout of the header section of a website> Now so far Ive been positioning elements by floating & positioning relatively as illustrated here: http://i216.photobucket.com/albums/cc53/zymurgy_bucket/layout-theory-1.jpg
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?"
Thanks in advance,
It really depends on HOW it's done.
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):
1) 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.
2) relative positioning moves the element , but not the space it takes up.
3) potentially you could achieve the same horizontal shift with margin
4) 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.
hope that sheds some light on the subject