Re: Floats: What am I doing wrong?

Discussion in 'HTML' started by Jukka K. Korpela, Aug 10, 2010.

  1. Padmar Mushkin wrote:

    > I have a div containing a background image, a div containing text, and
    > want them to appear side by side.


    It might be easier to use just one element, containing the text, so that the
    element has a non-repeating background image and suitable padding. But the
    question is whether the text should be in a full-width column if it
    continues vertically below bottom of the image - in that case floating is
    what you want.

    > I tried floating them, but the text
    > is appearing below the image. I uploaded an example here:
    >
    > http://meechme.com/test.html


    The element for the text, <div class="text">...</div>, being a block
    element, occupies by default the entire available width (ín this case, the
    width of the content of the container element). You might set some specific
    width, but this would get difficult: what width would you use?

    There's a simpler way: just remove
    float: left
    from the CSS rule for the .text element. There is no reason to make that
    element floated; it is sufficient to make the photo float on the left, so
    that any subsequent text in the document flows on its right (and then
    returns to full width).

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Aug 10, 2010
    #1
    1. Advertising

  2. Padmar Mushkin wrote:

    > The background image will
    > come from different sources and have different sizes. Wouldn't it need
    > it's own div to make sure it fits in a 55x55 px square?


    No, you could make it a content image and format it directly. But if you
    want cropping, then a background image appears to be the simplest approach.
    Note that the image will then normally not appear if the page is printed.

    >> But the
    >> question is whether the text should be in a full-width column if it
    >> continues vertically below bottom of the image

    >
    > No, I want the space below the image to be blank.


    Then I'd say the simplest and safest approach is to use a two-cell table.
    What you seem to want is to set the total block width in em units and the
    image width (= the width of the element where you have the image as
    background) in pixels. You can do this easily with a table.

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Aug 10, 2010
    #2
    1. Advertising

  3. Padmar Mushkin wrote:
    > <> wrote:


    > I don't think this would work in my case. The background image will
    > come from different sources and have different sizes. Wouldn't it need
    > it's own div to make sure it fits in a 55x55 px square?
    >
    >> > But the
    >> >question is whether the text should be in a full-width column if it
    >> >continues vertically below bottom of the image

    > No, I want the space below the image to be blank.
    >


    Take the float off of ,text and add a left margin of the width of your
    image + whatever your margin from image...

    ..text
    {
    /* width of image 55px + 10px margin... */
    margin-left: 65px;
    margin-bottom:8px
    }



    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Aug 10, 2010
    #3
    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. Salisha Khan
    Replies:
    1
    Views:
    11,684
    JohnFol
    Aug 1, 2003
  2. Keith R. Williams

    What am I doing wrong?

    Keith R. Williams, Jul 14, 2003, in forum: VHDL
    Replies:
    4
    Views:
    1,061
    Ed Diego
    Jul 15, 2003
  3. Kosio

    Floats to chars and chars to floats

    Kosio, Sep 16, 2005, in forum: C Programming
    Replies:
    44
    Views:
    1,328
    Tim Rentsch
    Sep 23, 2005
  4. MG
    Replies:
    1
    Views:
    422
    Jukka K. Korpela
    Aug 10, 2010
  5. Denis McMahon

    Re: Floats: What am I doing wrong?

    Denis McMahon, Aug 10, 2010, in forum: HTML
    Replies:
    0
    Views:
    405
    Denis McMahon
    Aug 10, 2010
Loading...

Share This Page