CSS positioning problem with floats

Likeless

05-07-2008, 03:43 PM

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/bbvid/index.cgi?action=vid_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?

abduraooft

05-07-2008, 04:21 PM

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 (http://www.hotdesign.com/seybold/) (if you have missed it)

To get a cross browser compatible layout/display we need to write valid documents having a valid DOCTYPE (http://www.alistapart.com/articles/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!

Likeless

05-07-2008, 05:05 PM

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.

Likeless

05-10-2008, 09:37 AM

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?

jhaycutexp

05-14-2008, 12:01 PM

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...

<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>

Likeless

05-14-2008, 03:33 PM

:) 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:

<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>

jhaycutexp

05-15-2008, 01:20 PM

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:(

#container{padding:10px;
background-color:#FFFF00;
}

#container img {float:left;
margin:10px;
}
#container p{width:200px;
margin:0 0 12px 0;
}

<div id="container">
<img src="img">
<p>text</p>
<p>text text text text</p>
</div>

Likeless

05-15-2008, 03:26 PM

Thanks for trying, but that code behaves the same way as my original code with the text dropping underneath when the space gets cramped. :o