Today I was discussing this topic with one guy, who is interested in web development. As everyone, he also visits a lot of development forums and finds different approaches of the web site design, discussed on the forums. He said to me that he's interested to learn how to build a web page layout using DIV instead of tables, he gave me a link to the forum topic, where I found an idea of a developer, who supposes this kind of layout is more professional.
I don't want to criticize the developer, any person can have his/her own mind, but my mind sounds a little different than the one from the forum.
Before I continue writing around the topic, for those who don't know what we're talking about:
Table layout means that page's html source contains a <table> tag inside of it's <body> tag, such way, layout and positioning of each element depends on the table structure and layout, as all other elements of the page would be it's child elements.
DIV layout means that every element placed on the page is a child of a <div> element, or is itself, a <div> element. That means layout and positioning of all the elements are controlled by <div> elements.
As I think, both of the solutions are useful, interesting and rather professional. If you ask which one do I prefer, a table layout is the one I prefer.
But I want to mention, in the case of professional and correct using of these layouts, the result will be the same, be sure in that.
I didn't like the topic of the forum that I have read, because there was said that the table layout structure is old enough and in our days it's important to use only a DIV layout. As I understood the author has ambitions to use DIV layout because this one is developed later and supposed to be called as a newer technology approach. But I would say, it's not a reason to throw away a table layout.
At first, if table layout approach is old, that means that this approach is more supported by all the browsers as a default than the new one. Have in mind, none of a browser developer companies have announced the end of table layout support, am I right? (We all remember how everyone moved away from using frames, because such recommendations where announced)
At a second, I would say, a good developer must be familiar with both of these approaches, but not only with one of them.
One more thing: the guy asked me to explain the following fact:
He placed two div elements on the html page, on one line, and then he just resized the browser window, and when the size was smaller that the area containing both DIVs, the second div moved down, under the first one.
It happens because nothing has told to the second div to remain the position in first line, it's like you wrote a paragraph of text, which took several line on the page. Of course in the case of resizing the window, words of the paragraph move and change their line positions depending on the size of the browser's window. Imagine the div is a word, so everything is clear. The div moves to the next line when there is not enough space for it on the current line, like a word in the text.
How to avoid this:
Use a table layout. (A little funny, all the topic was about it)
In details: Insert a table with two cells in a row, place one div in each cells, they will remain in the same row, because table cells don't change their line positions depending on the browser's window size.
But I must say, there is another way also, using DIV layout:
Insert a div element having a width more than both of divs together, and place both divs inside the last inserted div element. That's all, but be careful, if someone entering your web site has a low resolution of a screen, he will have to scroll to the right and left to see everything on your page. But in some cases, using a table layout can bring the same problem.
Several other hints:
To make divs position on the same line, add the following attribute to both of them: style="float: left;"
To assign a width to the div, use the same style attribute as follows: <div style="width: 500px"></dv>
That's all for today.