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

Discussion in 'HTML' started by Mike Barnard, Feb 26, 2008.

  1. Mike Barnard

    Mike Barnard Guest

    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.
     
    Mike Barnard, Feb 26, 2008
    #1
    1. Advertising

  2. Mike Barnard

    mrcakey Guest

    "Mike Barnard" <> wrote in message
    news:...
    > 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
     
    mrcakey, Feb 26, 2008
    #2
    1. Advertising

  3. Mike Barnard

    John Hosking Guest

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

    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/
     
    John Hosking, Feb 26, 2008
    #3
  4. Mike Barnard

    Mike Barnard Guest

    On Tue, 26 Feb 2008 11:17:29 -0000, "mrcakey" <>
    wrote:

    >"Mike Barnard" <> wrote in message
    >news:...
    >> 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.
     
    Mike Barnard, Feb 26, 2008
    #4
  5. Mike Barnard

    Mike Barnard Guest

    On Tue, 26 Feb 2008 12:22:05 +0100, John Hosking
    <> 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.
     
    Mike Barnard, Feb 26, 2008
    #5
  6. 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
     
    Beauregard T. Shagnasty, Feb 26, 2008
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. bd
    Replies:
    0
    Views:
    673
  2. bogdan
    Replies:
    1
    Views:
    814
    bogdan
    May 7, 2008
  3. Jimmy
    Replies:
    7
    Views:
    5,051
    Chaddy2222
    Nov 21, 2008
  4. K Viltersten

    <div ... /> and <div ...></div>

    K Viltersten, Mar 30, 2009, in forum: ASP .Net
    Replies:
    4
    Views:
    813
  5. Carsten Fuchs
    Replies:
    45
    Views:
    1,660
    James Kanze
    Oct 8, 2009
Loading...

Share This Page