SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: floating divs

  1. #1
    SitePoint Member
    Join Date
    Jun 2005
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    floating divs

    I'm trying to get a page design to look right and I'm not seeing any easy way to do what I want. In my code I have a <div> with an image floated right, then a table with content of variable length, some <p>s of information, then another <div> floated right.

    When the content is of a normal length, the content between the <div>s is aligned to match the width of the image in the first <div> and the <p>s are fitted to the width of the window. The other <div> occupies the same vertical space as the last few <p>s, and the effect is pretty good.

    When the table is unusually short, though, this effect falls apart. The second <div> is floated to the right of the remaining space, just left of the first <div> instead of to the right of the window.

    I could use absolute positioning, but then I'd overlap the other <div>... right? I could set the width to 100%, but then it will fall entirely below the <p>s, defeating the intended effect.

    Any thoughts on how best I can do this, assuming that I have no control or input over the length of the table?

  2. #2
    SitePoint Wizard bronze trophy conradical's Avatar
    Join Date
    Jan 2005
    Location
    Atlanta
    Posts
    2,355
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Create a master div that floats to the right. Inside this have the div's that have to float right. Unless ofcourse you want text from the left div to overflow below, in a space between the right floated div's.

  3. #3
    SitePoint Member
    Join Date
    Jun 2005
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by conradical
    Create a master div that floats to the right. Inside this have the div's that have to float right. Unless ofcourse you want text from the left div to overflow below, in a space between the right floated div's.
    Yes, that's what I was trying to do. Any advice or thoughts?

  4. #4
    SitePoint Wizard bronze trophy conradical's Avatar
    Join Date
    Jan 2005
    Location
    Atlanta
    Posts
    2,355
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    If you are having just images in your divs then just create a class and attach it to your img tag instead of creating divs.

    Are you going to have content other than images in each right floated div?

  5. #5
    SitePoint Member
    Join Date
    Jun 2005
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by conradical
    If you are having just images in your divs then just create a class and attach it to your img tag instead of creating divs.

    Are you going to have content other than images in each right floated div?
    Yes, I have running text. It's just 1 or 2 lines, but it's enought to mess that up.

  6. #6
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It would help if you showed us your code.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  7. #7
    SitePoint Member
    Join Date
    Jun 2005
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The basic code is straightforward, along these lines:

    Code:
    <h3></h3>
    <div style="float: right;"><img></div>
    <table></table>
    <p></p>
    <div class="back"><img></div>
    Here's the raw code, with some of the data stripped out (for clarity, since it's not relevant here):

    Code:
    <h3>Title</h3>
    <div style="float: right;"><img src="collet03RS.jpg" alt="#3 Round Serrated Collet Pads" title="#3 Round Serrated Collet Pads"></div>
    <table id="priceTable">
    <tr><th>Size</th><th>Quantity</th><th>Price</th></tr>
    <!-- etc. -->
    </table>
    
    <p>...content...</p>
    
    <div class="back"><a href="http://www.hemlytool.com/cgi-bin/ins/insertsearch.pl"><img src="http://www.hemlytool.com/images/inserts.jpg" alt="Inserts" title="Search our carbide inserts"></a></div>


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
  •