Velocity Reviews - Computer Hardware Reviews

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

Reply
Thread Tools

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

 
 
Mike Barnard
Guest
Posts: n/a
 
      02-26-2008
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.
 
Reply With Quote
 
 
 
 
mrcakey
Guest
Posts: n/a
 
      02-26-2008
"Mike Barnard" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> Hi again.


<snip>

>
> 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


 
Reply With Quote
 
 
 
 
John Hosking
Guest
Posts: n/a
 
      02-26-2008
Mike Barnard wrote:
>
> 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.

--
John
Read about the UIP: http://improve-usenet.org/
 
Reply With Quote
 
Mike Barnard
Guest
Posts: n/a
 
      02-26-2008
On Tue, 26 Feb 2008 11:17:29 -0000, "mrcakey" <(E-Mail Removed)>
wrote:

>"Mike Barnard" <(E-Mail Removed)> wrote in message
>news:(E-Mail Removed).. .
>> 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.


>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.

 
Reply With Quote
 
Mike Barnard
Guest
Posts: n/a
 
      02-26-2008
On Tue, 26 Feb 2008 12:22:05 +0100, John Hosking
<(E-Mail Removed)> wrote:

>Mike Barnard wrote:


>> 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.


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.

 
Reply With Quote
 
Beauregard T. Shagnasty
Guest
Posts: n/a
 
      02-26-2008
Mike Barnard wrote:

> 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>

--
-bts
-Motorcycles defy gravity; cars just suck
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
float to string to float, with first float == second float Carsten Fuchs C++ 45 10-08-2009 09:47 AM
<div ... /> and <div ...></div> K Viltersten ASP .Net 4 03-31-2009 07:33 PM
Adding float makes nested div tags go out of parent div. Jimmy HTML 7 11-21-2008 10:44 AM
How to float a menu on the right within a div? bogdan ASP .Net 1 05-07-2008 05:33 PM
Re: float->byte->float is same with original float image. why float->ubyte->float is different??? bd C Programming 0 07-07-2003 12:09 AM



Advertisments