Best Layout Techniques? Tables vs. Floats vs. ???

[OmniX]

Hi guys

I am used to the old school abussing tables and so forth for a web site layout. Now I am trying to use floats as I have been told they are better options. Are there any better options to format layout?

At the moment the problem I have is...
I have floated content to the LEFT and RIGHT and I have content below that which I wish to float LEFT and RIGHT also. These tags are floated using div tags?

I really think this would be easier using tables but im trying to adopt the new techniques as tables are out datted.

Im really hoping there are better techniques out there as floats seem abit ambiguous.

Anyways hope to hear from yas soon

Thanks, Regards X

[blocblue]

I'm a bit confused as to what exactly your question is, but floats can be added to pretty much any element. And they're a lot cleaner than tables :)

If you have a specific question, I'd be happy to try and help.

[OmniX]

Question in general what is the best method for layouts?

Second Question is more specific, I am trying to use floats as I have been told they are the 'best' but its not working too great?
Example:
A B
C D
E
A: Contains 1 image
B: Contains 2 lines of text
C: Contains 2 lines of text and 2 text fields
D: Contains 2 lines of text and 2 text fields
E: Contains a text area and submit button

I want the layout how I just specified it A near B and etc but its all over the place when I use floats.

Any ideas what I am doing wrong?

Thanks, Regards X

[blocblue]

I suppose which is the best layout technique is entirely a matter of personal preference. However, consider this... If you have a website layout built using tables, and you perhaps want to move all the elements that are adjacent to one another to be underneath each other instead; to do this, you'd need to rewrite the HTML code, because the elements would need to be in different table rows for the new layout.

With floating div's, you only have to change the stylesheet, and the entire website can be given a new layout. The HTML wouldn't need to be touched.

With regard to your second question, I would ask how you're approaching your floating layout? Whenever I start a new layout, I consider everything to be in containers (building blocks if you will).

So if I want A and B to be adjacent to one another, and inline with eachother, I would have some code such as:

<div class="row">
[INDENT]<div id="a" class="example">
[INDENT]<img src="x" alt="x image" />[/INDENT]
</div>
<div id="b" class="example">
[INDENT]<p>This is my first paragraph.</p>
<p>This is my second paragraph.</p>[/INDENT]
</div>[/INDENT]
</div>

<div class="row">
[INDENT]<div id="c" class="example">
[INDENT]<img src="x" alt="x image" />[/INDENT]
</div>
<div id="d" class="example">
[INDENT]<p>This is my first paragraph.</p>
<p>This is my second paragraph.</p>
<p><input class="textField" type="text" name="textField1" /></p>
<p><input class="textField" type="text" name="textField2" /></p>[/INDENT]
</div>[/INDENT]
</div>

<div class="row">
[INDENT]<div id="e" class="example">
[INDENT]<p><textarea class="textBlock" name="textBlock1" cols="10" rows="7"></textarea</p>
<p><input class="submit" type="submit" name="saveForm" value="Save" /></p>[/INDENT]
</div>[/INDENT]
</div>

All you'd then need to do is set the properties for your classes and other elements in a stylesheet. E.g.

.row {
[INDENT]float: left;
width: 800px;[/INDENT]

.example {
[INDENT]float: left;
width: 390px;
margin: 5px[/INDENT]
}

This would give you a grid layout like you specified, with all the elements in alignment with their neighbours. Of course, each container doesn't have to be equal in width.

Hope this helps.

R

[OmniX]

Post was useful, thankyou.

I found a concept a few css layouts which i liked.

I like the idea of 'building blocks' makes everything easy.
Ill try ur example when I get a chance and with also
the table example yes you would but more so if you have a
big web page it looks very disgusting with all table, tr, td tags all over the place :(

Thanks, cant wait to put your suggestion into practice ill let you know how it goes and let me know if you or anyone else has any more ideas?

Thanks, Regards X

[jbennet]

tables are also bad because the confuse the hell out of mobile devices, bots, and screen readers