help with div positioning

[jl9148]

ok, im trying to make a layout purely out of divs since i heard that layouts with tables are bad for some reason.

ive never really used divs EVER, so im trying. below is the code... im using just to get a hang of it.
im trying to get all the blocks to fall under the blue box and to get rid of the gap between the red and gray box(es)

<div width="738" align="center" style="background-color: #FFFFFF; text-align:center">

<div width="728">
<img border="0" src="http://img299.imageshack.us/img299/8320/navbulletblueur0.gif" width="728" height="195">
</div>

<div width="169" style="float: left">
<img border="0" src="http://img90.imageshack.us/img90/9233/navbulletredbr1.gif" width="164" height="887">
</div>

<div width="564" style="float: right">
<img border="0" src="http://img90.imageshack.us/img90/3608/navbulletdgraygz1.gif" width="85" height="60">
<img border="0" src="http://img90.imageshack.us/img90/3608/navbulletdgraygz1.gif" width="468" height="60"><br>
<img border="0" src="http://img90.imageshack.us/img90/3608/navbulletdgraygz1.gif" width="557" height="78">
</div>

</div>

and here is the preview http://www.freewebs.com/jl9148/test.htm

[ak7861]

It's not a really good idea to use pure css skittles since you'll experience countless issues with browser compatibility. Using tables also saves you space in the long run

Anyhow, to remove the gaps, create a head div with a specified width. And include the sub divs in them. For eg:


<div style="width: 733;" align="center">

<div width="169" style="float: left">
<img border="0" src="http://img90.imageshack.us/img90/9233/navbulletredbr1.gif" width="164" height="887">
</div>

<div width="564" style="float: right">
<img border="0" src="http://img90.imageshack.us/img90/3608/navbulletdgraygz1.gif" width="85" height="60">
<img border="0" src="http://img90.imageshack.us/img90/3608/navbulletdgraygz1.gif" width="468" height="60"><br>
<img border="0" src="http://img90.imageshack.us/img90/3608/navbulletdgraygz1.gif" width="557" height="78">
</div>

</div>

[mwinter]

ok, im trying to make a layout purely out of divs

What you should be aiming for is the use of semantic markup: using the most appropriate elements to mark up a document. The div element is nothing special, in fact it's just a generic block-level element and it should only be used when there's nothing better available.



since i heard that layouts with tables are bad for some reason.

There are several problems with using tables to layout a document. It was a hack that was once necessary, but no longer. One should also consider that it isn't the purpose of the table element, which should be reserved for tabular data.



im trying to get all the blocks to fall under the blue box and to get rid of the gap between the red and gray box(es)

That's isn't very helpful as none of the images are shown. Either draw an image that shows the intended layout (preferably with some sample content), or create table-based layout that we can then edit.




It's not a really good idea to use pure css skittles

Skittles?



since you'll experience countless issues with browser compatibility.

Less of the scaremongering, please. There is nothing at all wrong with using CSS to effect layout. That's what any competent author would do in this day and age.



Using tables also saves you space in the long run

Space? As in the number of bytes in a file? You couldn't be more wrong. A well-authored document is usually much less (I've seen 40% savings), and this increases over a site where style sheets are shared - in a table-based site, each document must maintain its own layout.

Mike

[ak7861]

Less of the scaremongering, please. There is nothing at all wrong with using CSS to effect layout. That's what any competent author would do in this day and age.
We've already had enough with the zindexes and the word spacing. What more?


Space? As in the number of bytes in a file? You couldn't be more wrong. A well-authored document is usually much less (I've seen 40% savings), and this increases over a site where style sheets are shared - in a table-based site, each document must maintain its own layout.
40%?!


<table align="center"><tr><td>Hello m8</td><td>Hi there buddy</tr></table>
Versus:

<div align="center"><div style="width: 150px;"><div style="float:left">Hello m8</div><div style="float:right">Hi there buddy</div></div></div>
Oh yeah, and if you combine the width div with the root, it doesnt align in the center for ie. Oh well.

[mwinter]

There is nothing at all wrong with using CSS to effect layout.

We've already had enough with the zindexes and the word spacing. What more?

We?

It seems that you've been unable to use CSS properly, but rather than accept that the fault lies with yourself, you'd prefer to pass the blame on to something else.





Space? ... A well-authored document is usually much less (I've seen 40% savings), ...

40%?!

Yes, as in the document was 60% of its original size.





<table align="center"><tr><td>Hello m8</td><td>Hi there buddy</tr></table>


That's very representative of real markup. :rolleyes:





<div align="center"><div style="width: 150px;"><div style="float:left">Hello m8</div><div style="float:right">Hi there buddy</div></div></div>


Clearly the meaning of the phrase "well-authored" is something that eludes you.

Mike

[ak7861]

Thanks. :D

You speak very ambiguously.