SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Evangelist anjanesh's Avatar
    Join Date
    Jun 2004
    Location
    Mumbai
    Posts
    447
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Get the inner-div to flaot to left without line-break

    How do I get the inner-div to the right hand-side of the container-div ?
    Code CSS:
    <div style="float:right;background-color:yellow; vertical-align:top">
    Text 1
    <div style="float:right;">Text2</div>
    </div>
    I dont want to use margin-top:-20px on the inner div.

    Thanks
    Anjanesh

  2. #2
    SitePoint Wizard bronze trophy Tailslide's Avatar
    Join Date
    Feb 2006
    Location
    Bedford, UK
    Posts
    1,687
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    With the setup you've got there - put the inner div before the content of the outer div. Remember though that all floats must have a width unless that width is implicit (like with a photo).
    Code:
    <div style="float:right;background-color:yellow; vertical-align:top">
    <div style="float:right;">Text2</div>
    Text 1
    </div>
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project

  3. #3
    SitePoint Evangelist anjanesh's Avatar
    Join Date
    Jun 2004
    Location
    Mumbai
    Posts
    447
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    put the inner div before the content of the outer div.
    I should've figured that one out - its the same for placing an image on the right-hand side of a content.

    Remember though that all floats must have a width
    What if I I dont know the width of the inner div ?

    Thanks
    Anjanesh

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by tailslide
    Remember though that all floats must have a width unless that width is implicit (like with a photo).
    That's not true anymore and widthless floats are fine in certain situations and are designed to shrink wrap their content.

    The thing to watch out for widthless floats are that content will always try and stretch them to be 100&#37; width. This means that widthless floats are best for things like menus which contain only one or two words each. If a widthless float holds a paragraph then it will just stretch to be 100% wide.

    There is also a problem where a widthless float contains floats floated in the opposite direction and some browsers will stretch the float again to 100%. Ie will also stretch a widthless float to 100% if the inner element has a 100% width specified.

    So although its true that you can use widthless floats you do have to be ceraful when and where you use them and most times you will want to add a width

    Hope that makes sense.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •