Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    May 2008
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question CSS positioning problem with floats

    Hello

    I've been using tables for HTML layout for years, and I'm trying to move into CSS layout, but I'm stumbling over what I'm sure are very basic issues.

    On this page you can see my problem in action. Each of the yellow blocks with a card picture is a div with float:left. It contains two more float:left divs: one for the image and one for the text:

    http://www.blackborder.com/cgi-bin/b...d_single&vid=5

    Now, if you stretch and squish the page, you see that there's a point at which the text falls below the card image. This is what I wish to prevent. I would like the yellow containing blocks to drop down to the next line when they run out of space, not rearrange their contents.

    I know two ways I could achieve this effect:

    1) I could make an HTML table inside the containing div and put the image in a left cell and the text in the right cell.
    2) I could give the containing div a fixed width, but this would mess with the text, which would not always fit properly in the fixed space.

    I tried a few positioning properties, but they didn't work. Is there an easy way to achieve this without using tables?

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Hello, a warm welcome to this forum.
    I've been using tables for HTML layout for years, and I'm trying to move into CSS layout, but I'm stumbling over what I'm sure are very basic issues.
    I still see a lot of tables used just for layout.

    I'd recommend you to read Why tables for layout is stupid: problems defined, solutions offered (if you have missed it)

    To get a cross browser compatible layout/display we need to write valid documents having a valid DOCTYPE as the very first line.

    We can check the validity by the w3-validator http://validator.w3.org

    Here is a good tutorial on how to create a standard 2 column layout, http://bonrouge.com/2c-hf-fixed.php

    Good luck!
    Last edited by abduraooft; 05-07-2008 at 05:07 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    May 2008
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks. I had already read those resources when I first posted. That is why I was trying to do a few things using CSS instead of tables. But I could not find the answer to my problem in the beginners documentation.

  • #4
    New Coder
    Join Date
    May 2008
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Unhappy

    Despite having read several tutorials and tried out floating, relative and absolute positioning, I still can't solve this problem. Is this possible with CSS?

  • #5
    Regular Coder
    Join Date
    Apr 2008
    Location
    Manila, Philippines
    Posts
    263
    Thanks
    3
    Thanked 12 Times in 12 Posts
    ok i think this is what you want... just try to understand... i know you have the background since youre using tables before..

    welcome to the world of divs...

    Code:
    <style type="text/css">
    #yellow_box{background-color:#FFFF00;
    			width:400px;}
    img {margin:10px;
    float:left
    }
    #text{float:left;
    width:180px;
    }
    .clear{clear:both;}
    </style>
    <body>
    <div id="yellow_box">
    <div><img src="pan22.jpg"></div>
    <div id="text">
    <p>Buy Card Name</p>
    <p>Buy Card Name</p>
    <p>Buy Card Name</p>
    <p>Buy Card Name</p>
    <p>Buy Card Name</p>
    <p>Buy Card Name</p>
    <p>Buy Card Name</p>
    <p>Buy Card Name</p>
    <p>Buy Card Name</p>
    <p>Buy Card Name</p>
    <p>Buy Card Name</p>
    <p>Buy Card Name</p>
    <p>Buy Card Name</p>
    <p>Buy Card Name</p>
    <p>Buy Card Name</p>
    <p>Buy Card Name</p>
    
    </div>
    <div class="clear"></div>
    </div>
    Last edited by jhaycutexp; 05-14-2008 at 12:24 PM.

  • #6
    New Coder
    Join Date
    May 2008
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thank you jhaycutexp, I see what you mean, only I was trying to find a solution without fixed widths (though I may well end up using it).

    The problem is that the content is dynamically generated: I don't know the width of the images or the text.

    If this helps anyone understand what I'm after, I'll write exactly the behaviour I'm shooting for using a table. The following would do exactly what we need:

    Code:
    <style type="text/css">
    #float_container {float:left}
    </style>
    
    <div class="float_container"><table border=0>
    <tr>
    <td><img src="myimg.jpg"></td>
    <td nowrap>Some text here<br><br>
    Some text here<br><br>
    Some text here</td>
    </tr>
    </table>
    </div>

  • #7
    Regular Coder
    Join Date
    Apr 2008
    Location
    Manila, Philippines
    Posts
    263
    Thanks
    3
    Thanked 12 Times in 12 Posts
    No problem dude...

    i think heres the solution if the image is dynamic... the idea is just to have something that bounds it to overlap...

    forgive me if this code goes wrong.. im in a cafe and writing the codes here directly and just visualizing what i'm doing.. no tools to help

    Code:
    #container{padding:10px;
                    background-color:#FFFF00;
                   }
    
    #container img {float:left;
                           margin:10px;
                          }
    #container p{width:200px;
                       margin:0 0 12px 0;
                      }
    Code:
    <div id="container">
    <img src="img">
    <p>text</p>
    <p>text text text text</p>
    </div>

  • #8
    New Coder
    Join Date
    May 2008
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks for trying, but that code behaves the same way as my original code with the text dropping underneath when the space gets cramped.


  •  

    Posting Permissions

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