Forum Moderators: open
However, this transition and change causes more than a few problems. It is easy to replace a simple table layout with DIVs. But it is very easy to get caught up in the DIVs and CSS.
Using DIVs and CSS you can make the page look exactly the way you want, with less code bloat than the old TABLE layout. But sometimes I have seen examples posted on here where the developer has added a zillion DIVs, nested in a complicated way that makes the code hard to update and almost impossible to read.
I'm not saying that you shouldn't use DIVs. I'd use them over tables any day. But it is important to be careful.
If you are leaving the table layout, remember the full power of CSS. It is wise to make use of absolute positioning as well as float attributes for individual elements within the DIVs. Another property worth remembering is clearing the float.
There are lots of very useful examples here. I admit that there are times when a complicated layout is the only solution. But before resorting to a jungle of DIVs, try to see if there's a simpler solution. Look for examples here on Webmaster World.
It will save you a couple of gray hairs later. ;)
>>>. Another property worth remembering is clearing the float.
Could you explain this property?
Birdman
Enter CSS. Developers now have a toolbox that provides a means to create fast loading, lightweight pages. Some have taken the simplicity to heart and are designing stylish pages using only a fraction of the code previosly required.
Others, like over-eager, eyes-bigger-than-their-stomachs, gluttons in a buffet line heap every possible flavor and CSS dainty onto their many plates until each overflows with a mish-mosh that is both hideous and certain to cause severe indigestion.
And just as simply knowing HTML does not ensure a good "designer," neither does knowing CSS. Some, new to the concept will undoubtably mature in the process and hone their design skills and refine their personal CSS toolbox. Others will not. Life goes on... ;)
<img align="left">
you can write
img { float: left; }
It detatches it from its "natural" position in the document flow, and allows it to "float" towards the left (or right, if you've specified right) as far as it goes -- usually to the border of the containing element, unless there is another floated object in the way. Content then "flows" around it.
Related to that is the clear property, which replaces <br clear="left" /> (or "right" or "all"). This places the element at the first available position where the specified border(s) of the containing element is/are clear -- i.e. no floated objects in the way.
unfortunately, browser do need to catch up so that they would display the divs (and its positioning) correctly and perfect unlike tables.
well, float is one cool feature of css.
I think during my time at WMW I have the same content running on a bout half as much code..and its still getting whittled down.
This is definetely something I want to get hands on with.
