Sizing of DIV in IE7

HTML & CSS
1

Hi folks, I have this CSS:

#FullScreenTitleLogoDiv
{
	float: right;
	padding-top: 10px;
	padding-right: 10px;
	text-align: center;
	border: 1px solid red;
}

#FullScreenTitleLogoDiv img
{
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 5px;
	border: 1px solid blue;
}

#FullScreenTitleLogoDiv .FullScreenTitleLogoDivText
{
	font-size: 0.8em;
	border: 1px solid green;
}

In Firefox and IE8, this works exactly as expected. The DIV (with a red border) sizes itself to fit snuggly around the elements contained within it.

In IE7, that same DIV insists on being 100% of the width of the element that contains it.

I’m sure there’s a simple CSS change to make IE7 (and ideally IE6 too) behave, but I need a pointer, please.

Thanks, Nick.

2

The br is fine but you could also just do this…

<div style=“float:left; text-align:center”>
<img src=“image.jpg”>
<p>text</p>
</div>

3

Thanks again Eric.

I think there might be an issue if I float the image… I’m trying to get both the image and the text below it to be centered. For the image, I’m using “auto” on the margins and for the text I’m using “text-align”. I haven;t tried yet, but I suspect floating the image will foul up the centering…

I’ll try it later, but suspect the <br /> might be here to stay!

Thanks again for the pointers!!!

4

Good. You could float the img and say clear both on the text to remove the br prob.

5

With “block” removed from the img:

IE8 - shows the image and then the text inline next to it (rather than underneath as it was before).

Firefox - the same.

IE7 - the same and, yes, the div now “shrinks as expected”.

SO, the addition of a <br /> between the img and the text gets me to exactly where I need to be.

Eric, thanks for the pointer. It seems as if the inner “block” is causing the outer “block” to go to 100%.

I guess the only other question is whether I can find a way to get rid of the “ugly” <br />, or whether I’m justbeing over paranoid now?

Thanks

6

Glad to help.

7

Thanks Eric. Much appreciated.

8

What happens when you remove display block from the img?