CSS image in a div tag overlaps the border

My problem is that my image on the left does not push the div container it is in like the text does. How do I make it do that?



CSS:

.reviewbox {
background-color: #D3D7DB;
border: 1px solid #0C4A92;
width: 776px;
margin: 0 0 10px 0;
}

.reviewimg {width: 100px; height: 100px; position: absolute;}

.reviewbox img {padding: 10px 0 0 10px;}

.reviewbox p {padding-left: 100px; width: 666px;}

html:

<div class="reviewbox">

<div class="reviewimg"><img src=""></div>

<p>
text goes here.
</p>

</div>


thanks.

Edit: I can't put a reviewbox height because on different pages there is different amounts of text.

 

try get rid of the

height:100px;
position:absolute;

Code (markup):

 

It doesn't work with IE6 and lower, but you can use min-height on the review box to set the minimum height.


min-height:120px;


When there is more text it will expand, when there is little text, it will be the height you specify.

There are a couple hacks for IE6 and below

http://www.greywyvern.com/code/min-height-hack

 

that doesn't work. it just pushes the text down so it is not inline with the image.

 

I'd rather not use hacks for something that seems so simple. there must be a better way to do this. I was wondering how the text can push the box down but not the image?

 

Just use floats, very simple contain around your text and float all 3 divs left or make sure .reviewbox has layout and float the text and img div. There's a few other ways but imo that's the simplest.

 

You should use a fixed height.
Make your review box content into a frame.
Place a continue link that display the next portion of the texts.

 

<style>
.reviewimg {
background-color: #D3D7DB;
border: 1px solid #0C4A92;
width: 776px;
margin: 0 0 10px 0;
}
.reviewimg img {padding: 10px 0 0 10px; float:right}
.reviewimg p {padding-left: 100px; width: 666px; clear:both}
</style>
<div class="reviewimg">
<img  src="images/photo_03.gif"/>
<p>This element encloses text which is intended to be taken from another source--a long quotation. Note that browsers will not automatically put in quotation marks around the quoted test. Some browsers don't indent quoted text very much; some developers put quotes around the text to make sure the quotation is properly indicated.
This element encloses text which is intended to be taken from another source--a long quotation. Note that browsers will not automatically put in quotation marks around the quoted test. Some browsers don't indent quoted text very much; some developers put quotes around the text to make sure the quotation is properly indicated.
</p>
</div>

Code (markup):

really this my try is it work for u

 

thanks, it didn't work, but I changed some things around and came up with this and it worked.

.reviewimg {
background-color: #D3D7DB;
border: 1px solid #0C4A92;
width: 776px;
margin: 0 0 10px 0;
}
.reviewimg img {padding: 12px 0 0 10px; float:left;}
.reviewimg p {padding-left: 16px; width: 652px; float: left;}

I also added a div with a clear:both before closing the .reviewimage

 

There is still one problem I need help with though.

In IE all <p> text is pushed to the top of its container with no gap.

However in FireFox the <p> text has a nice gap at the top.

How do I set a value for this in the stylesheet so that it both does the same thing?

thanks.

 

Man, I can't believe what was going on with this code earlier-- the first response was the right one-- when you absolutely position something, it's NOT in the page anymore-- that's why it can't push down the box. The box doesn't know its there! Content on a page can't see absolutely positioned things and absolutely positioned things only see their nearest positioned ancestor.
The min-height one could have worked, though it's only covering up for the fact that the img was absolutely positioned.

The clearing div when you floated the img (you don't have to float the p too unless you didn't want it to wrap under the image if it got longer than the img) does work, but it's kinda frowned upon because it means you're adding extra markup in the html. There are ways to do this in CSS too, if you want.
Take a look.

Anyway, the p-- did you remove all default margins and padding from p's? Cause I'm wondering if it's FF has padding or margin by default on the p's while IE doesn't.

You can also have top-padding on the reviewbox itself, though this may push your img down too far since it also has padding on the top-- but I like using padding-top on containers instead of the children because it'll push all children down by the same amount and I wouldn't have to write so much code setting padding on all the children.

 

Thanks, I didn't really know what I was doing with the absolute position. It was just a guess to try and get it to work. Obviously it didn't.

Post number 7 was the randomest lol. I've never had one which suggests something that odd.

thanks for the link as well.

 

.reviewbox {
background-color: #D3D7DB;
border: 1px solid #0C4A92;
width: 776px;
margin: 0;
padding:0;
position:relative;
}

.reviewbox img {margin: 10px; width: 100px; height: 100px; float:left;}

.reviewbox p{
font-family:Arial, Helvetica, sans-serif;
font-size:12px
}

/*to clear float <br class="spacer" />*/
.spacer{float:none; line-height:0;}