fixed width div holding variable width divs

Forum Moderators: not2easy

Message Too Old, No Replies

fixed width div holding variable width divs

why are we shifting down

TooMuchRock

4:11 am on Apr 13, 2004 (gmt 0)

Okay in a table it is 10 seconds work. I've been putzing with this for hours. The code says it all:

CSS:

div.container {
margin-top: 10px;
position: relative;
top: 10px;
left: 10px;

width: 500px;
height: 139px;

border-style: dashed;
border-color: green;
border-width: 1px;
}

img {
height: 135px;

float: left;

border-width: 2px;
border-style: solid;
border-color: black;
}

div.textBlurb {
height: 139px;

float: left;
margin-left: 5px;
background-color: black;

color: white;
font-family: courier;
font-size: 12px;
}

HTML:

<div class="container">
<img src="http://toomuchrock.com/home.cgi?2004_band_photos/decemberists-20040327/Thumbnails/59.jpg">
<div class="textBlurb">
<p>If the text it too wide for the container it
drops to the next line. Why does it do that?</p>
</div>
</div>

Purple Martin

6:26 am on Apr 13, 2004 (gmt 0)

If the text it too wide for the container it drops to the next line. Why does it do that?

Do you mean why does it word-wrap? Because it's supposed to! ;) The text (the <p> tag and everything in it) is inline, which means it flows to fill whtever block-level element it is in. So the text flows from left to right until it reaches the right edge of the textBlurb div, which is at the right edge of the container div, which is fixed 500 pixels to the right of the left edge of the container div, and then the text flows down to the next line and continues flowing to the right, until it reaches the right edge... and so on until all the text is rendered.

TooMuchRock

3:12 pm on Apr 13, 2004 (gmt 0)

No it doesn't wrap instide of the div of type textBlurb. Once it hits the edge of the div it then drops the entire div of type textBlurb down below the div of type container.

Well I can't do images and I can't even preserve
spacing (even with "code") you'll have to imagine
the below diagram

+---+-----------+ Ś i Ślittle textŚ Ś m Ś Ś Ś g Ś Ś +---+-----------+

+---+-----------+ Ś i Ś Ś Ś m Ś Ś Ś g Ś Ś +---+-----------+ +------------+ Ś bigger textŚ Ś comes here Ś Ś and wraps Ś +------------+

or visit [toomuchrock.com ]

TooMuchRock

3:26 pm on Apr 13, 2004 (gmt 0)

Okay i took out the float: left on textblurb and now it works fine. I dunno why though. Someone can explain that to me if they're feeling kind?

Bonusbana

3:38 pm on Apr 13, 2004 (gmt 0)

First of all, the administrators of this site doesnt like personal urls, so they will likely remove it soon. In general, its better if you post the relevant code here like you did in your first post.

I did have a look though and I think I know what might be causing the problem.

First, you should use a proper header and doctype for your document. In my example I used the xhtml transitional.

Second, comments in css should look like this: /* comment */
Double slashes will most likely cause problems when parsing your css.

Third, your starting css style tag should be:
<style type="text/css" media="screen">

Now to your css:

In your container DIV, you specified a relative position, yet you use attributes like top and left, which should only be used when positioning absolute.

You specified a height for your img tags, this will most likely disturb the rendering when you have different sizes of the images (like in your example).

You also specified a height for your textBlurb and container, and as I see it, the height should be relative to the content, no?

Here is my example, I hope it helps:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<style type="text/css" media="screen">

body {
background-color: pink;
}

div.container {
margin-top: 10px;
position: relative;
width: 500px;
border-style: dashed;
border-color: green;
border-width: 1px;
}

img {
float: left;
margin: 0;
border-width: 2px;
border-style: solid;
border-color: black;
}

div.textBlurb {
margin-left: 5px;
background-color: black;
color: white;
font-family: courier;
font-size: 12px;
}

p {
margin: 0px 0px 0px 0px;
padding: 1em;
}

</style>
</head>
<body>

<div class="container">
<img src="http://toomuchrock.com/home.cgi?2004_band_photos/decemberists-20040327/Thumbnails/59.jpg">
<div class="textBlurb">
<p>If the text it too wide for the container it drops to the next line. Why dos it do that?</p>
</div>
<div style="clear:both;"></div>
</div>

</body>
</html>