css question

[windandwaves]

Hi Dudettes and Dudes,

Sad as it may be, I am still having trouble with the float business.

If I want to put two divs next to each other and let them slip one under the
other in no way then how do I do that.

My plan was:

<DIV ID="main">
<DIV ID="menu" STYLE="float: left;">menu items</DIV>
<DIV ID="copy" STYLE="float: right;">copy stuff</DIV>
</DIV>

but it does not seem to work (COPY ends up under MENU - btw I am using HTML
strict)

what am i doing wrong?

TIA

- Nicolaas

 

[Mark Parnell]

I am still having trouble with the float business.
http://www.w3.org/TR/CSS2/visuren.html#floats

<DIV ID="main">
<DIV ID="menu" STYLE="float: left;">menu items</DIV>
<DIV ID="copy" STYLE="float: right;">copy stuff</DIV>
</DIV>

what am i doing wrong?

For one, you aren't including a width - width is required when using
float[1]. My guess would be that the browser is assuming a width of 100%
or something, but who knows?

Depending on what you are doing, you probably don't need to specify
float: right on the second one. In fact, you may be better off using
float: left, but that depends on the desired result.

[1] In most situations, including this one.

 

[William Hughes]

Hi Dudettes and Dudes,

Sad as it may be, I am still having trouble with the float business.

If I want to put two divs next to each other and let them slip one under the
other in no way then how do I do that.

My plan was:

<DIV ID="main">
<DIV ID="menu" STYLE="float: left;">menu items</DIV>
<DIV ID="copy" STYLE="float: right;">copy stuff</DIV>
</DIV>

but it does not seem to work (COPY ends up under MENU - btw I am using HTML
strict)

what am i doing wrong?

TIA

- Nicolaas

In *.css:

div.menu { float: left; width: 25%; color: #000000; background: #c0c0c0
url(./img/bg-menu.gif) }
div.main { float: right; width: 73% }

Note: I deliberately left a 2% "gutter" for spacing, otherwise the text in
"main" winds up hard against "menu".


In *.htm:

<div class=menu>
<!--#include virtual="./includes/menu.htm"-->
</div>

<div class=main>

PAGE BODY HERE

</div>

 

[windandwaves]

In *.css:

div.menu { float: left; width: 25%; color: #000000; background:
#c0c0c0 url(./img/bg-menu.gif) }
div.main { float: right; width: 73% }

Note: I deliberately left a 2% "gutter" for spacing, otherwise the
text in "main" winds up hard against "menu".


In *.htm:

<div class=menu>
<!--#include virtual="./includes/menu.htm"-->
</div>

<div class=main>

PAGE BODY HERE

</div>

that works magically (www.wapitipark.co.nz/AV/)