What am I doing wrong? Trying to float <p>'s L & R within a div fails.

[Mike Barnard]

Hi again.

I KNOW this is one of the most basic things in the book, but its not
working so I'm making a fool of myself in public again.

www.thermachek.com/temp/

For a footer I have a div.

Within the div I have three <p> elements. The first has no id and it
displays with the divs styling within the div on screen.

The other two p's have id's to enable css on them. They are styled to
float left and right, (and I have coloured them purely to prove the
css is being actioned).

They float and are coloured, so the id's are OK, but they float AFTER
the div body instead of within it. I don't understand.

I *THINK* the flow should be..

1. Create box on the screen of a colour/size as described by the div.
OK.

2. Create a <p> of text as the content of the div element and position
it within the div. OK.

3. Create a <p> of text as the content of the div element and float it
left [within the element]. FAILS.

4. ditto right. FAILS.

OK, what basic mistake am I making please? I have googled for element
within div and the code I've seen looks similar.

As usual, my thanks to you for your time.

Mike.

 

[mrcakey]

Hi again.

OK, what basic mistake am I making please? I have googled for element
within div and the code I've seen looks similar.

As usual, my thanks to you for your time.

Mike.

I can't identify the basic mistake you're making, which is a bit
embarrassing since I'm starting my web design business this week, except to
say I that floating inline elements is a bit icky.

This works, but it's not very elegant.

<div id="footer">

<p> Legal information---vat number, registered office, </p>

<div id="rightfoot">
© Michael E. Barnard, Feb 2008.
</div>

<p id="leftfoot">
Here is some text.
</p>

</div> <!-- End div footer -->

#footer /* */
{
clear: left;
background-color: #666;
color: white;
font-weight: bold;
padding: 5px;
font-size: 80%;
}

#leftfoot
{
color: red;
}

#rightfoot
{
float: right;
color: green;
}

I'm sure there's a better solution and it ought to be a simple intuitive
thing to do. But my head's hurting now. Dare I suggest tables?!!!

Also, just for nitpicking's sake - you have some HTML validation errors and
I'd run a spell checker over your text.

Impressed with how it's coming along.

+mrcakey

 

[John Hosking]

I KNOW this is one of the most basic things in the book, but its not
working so I'm making a fool of myself in public again.

It's not so bad, if there are enough fools in the general population.

www.thermachek.com/temp/

For a footer I have a div.

Within the div I have three <p> elements. The first has no id and it
displays with the divs styling within the div on screen.

The other two p's have id's to enable css on them. They are styled to
float left and right, (and I have coloured them purely to prove the
css is being actioned).

They float and are coloured, so the id's are OK, but they float AFTER
the div body instead of within it. I don't understand.

OK, what basic mistake am I making please? I have googled for element
within div and the code I've seen looks similar.

Oh, you're gonna *love* this one.

Try moving the non-floated content in the source to *after* the floats.

<div id="footer">
<p id="leftfoot">
Here is some text.
</p>
<p id="rightfoot">
© Michael E. Barnard, Feb 2008.
</p>
<p> Legal information---vat number, registered office, </p>
</div> <!-- End div footer -->

Usually I also put the floated-right elements before the left floats,
but I forget at the moment why and so it just might be a cargo-cult kind
of superstition for me now. If you want to be equally superstitious, you
would put your rightfoot forward. HA HA hahahaha.

Anyway, I can't explain why the rearrangement works without me taking
the time to look up the specs on floats, checking that it's not a
browser bug, or just becoming Ben C.

 

[Mike Barnard]

I can't identify the basic mistake you're making, which is a bit
embarrassing since I'm starting my web design business this week, except to
say I that floating inline elements is a bit icky.

LOL, nice to know I'm not alone in finding this stuff a LOT to take
in.

This works, but it's not very elegant.

Snip.

I fixed it with a bit of help from google. "Constraining floats"
turns out to be a regular problem with them. And the unfloated text
was just a test. See the now fixed version.

I'm sure there's a better solution and it ought to be a simple intuitive
thing to do. But my head's hurting now. Dare I suggest tables?!!!
Noooooooooooo.

Also, just for nitpicking's sake - you have some HTML validation errors and
I'd run a spell checker over your text.

Last time I validated the only errors were with the imported search
box code. I have emailed atomz.com but had no reply.

<fx, validates...>

Yes, same seven erors in the input elements.

Impressed with how it's coming along.

Thanks, but it still looks.... amateur. I need a logo. My efforts
have been dire. I'm waiting for logoguru to get back to me.

 

[Mike Barnard]

Mike Barnard wrote:

Oh, you're gonna *love* this one.

Try moving the non-floated content in the source to *after* the floats.

I only put that in as a test after my floats failed. It's gone now.

Usually I also put the floated-right elements before the left floats,
but I forget at the moment why and so it just might be a cargo-cult kind
of superstition for me now. If you want to be equally superstitious, you
would put your rightfoot forward. HA HA hahahaha.

Anyway, I can't explain why the rearrangement works without me taking
the time to look up the specs on floats, checking that it's not a
browser bug, or just becoming Ben C.

See my other reply. "Constraining floats" in google gave a working
answer. Thanks for the reply though.

 

[Beauregard T. Shagnasty]

www.thermachek.com/temp/

For a footer I have a div.

Within the div I have three <p> elements. The first has no id and it
displays with the divs styling within the div on screen.

The other two p's have id's to enable css on them. They are styled to
float left and right, (and I have coloured them purely to prove the
css is being actioned). ...

Looks to me as if you want your footer to be much like this banner:
http://k75s.home.att.net/banner.html

Maybe those samples will give you some ideas on how to float the parts.
Only difference is top or bottom of page. <g>