Making centred div hug content

[mikeym]

Hi,

I have a page with images centred by putting them in a div with a class "center".

Code: Select all

.center { text-align: center; margin-left:auto; margin-right:auto; }

but when I try and put a div within this (I want to use 4 divs with background properties set to make a frame or a dropshaddow effect) I find that the div stretches right across the page rather than hugging the image.

Any ideas?

[Stuart]

Could you post a link or your full code (including CSS)?

[Aso]

If you don't set a width on .center, it will stretch across the entire page. Check out the A List Apart article on CSS drop shadows. This should help with what you want to acheive

[Monie]

Yes, thats true aso186. You must set the width of the div elements (that you want to center), otherwise it will stretching to occupy it's Parent DIV

[mikeym]

Oh. So it's impossible to make it hug without giving it a width.

So my code where the size of the image is not known is not possible.

[MikeHopley]

Originally Posted by mikeym

Oh. So it's impossible to make it hug without giving it a width.

So my code where the size of the image is not known is not possible.

Thankfully, your logic is slightly flawed.

Yes, centred elements need an explicit width. But no, you do not have to set this width yourself. The image itself sets the width; all you need is for the box to "shrink-wrap" around it (but you should set the image's width explicitly in your <img> tag).

Floating an element causes it to "shrink-wrap". So to start with, float your outermost <div> with {float: left}. Then add another <div> around the outside, and position this in the centre with {margin: 0 auto}.

You'll probably run across some IE bugs, unfortunately. Test in Firefox first to see whether it works at all.

[mikeym]

Um....

I'm afraid neither of these are working for me.

the floating div with the center div round it does shrink wrap it but it just floats to the left anyway.

Giving the div a width doesn't make it shrink at all.

Code: Select all

.center { text-align: center; margin: 0 auto}
 .t {float: left; background: url(dot2.gif) 0 0 repeat-x } /* just remove float for non hugging version */ 
.b {background: url(dot2.gif) 0 100% repeat-x}
.l {background: url(dot2.gif) 0 0 repeat-y}
.r {background: url(dot2.gif) 100% 0 repeat-y}
.bl {background: url(bl2.gif) 0 100% no-repeat}
.br {background: url(br2.gif) 100% 100% no-repeat}
.tl {background: url(tl2.gif) 0 0 no-repeat}
.tr {background: url(tr2.gif) 100% 0 no-repeat; }

<div id="DSCN7518.jpg" class="center"><div class="t" width="620" height="470"><div class="b" width="620" height="470"><div class="l" width="620" height="470"><div class="r" width="620" height="470"><div class="bl" width="620" height="470"><div class="br" width="620" height="470"><div class="tl" width="620" height="470"><div class="tr" width="620" height="470">
<a href="Trip6/DSCN7518.jpg"><img src="Trip6/small/DSCN7518.jpg" border="0" alt="" width="600" height="450"></a>
</div></div></div></div></div></div></div></div>
<div class=comment>
<div id="DSCN7518.jpg" class="submitcomment">
<div class="total">
<p>
0 comments so far
</p>
</div>
</div></div>
</div>

[MikeHopley]

Post a link for lazy people like me.

[mikeym]

Tricky to post a link because it's a live website - here's a version of it though http://www.getoutofglasgow.com/test.htm

[MikeHopley]

I don't see the problem on your test page, but note that you have a massive 113 XHTML errors. If you don't fix the errors, it makes a mockery of the whole debugging process.

[mikeym]

OK,

It's taken all night (my pages are dynamically created - well not the test page) but they now adhere to the strict XHTML standard (my css is still a bit dodgy) but no change.

http://www.getoutofglasgow.com/test.htm
http://www.getoutofglasgow.com/test2.htm

Any ideas?

[mikeym]

And now I've fixed the css with the css validator.

Still no joy!

[Lchad]

Is this what you want it to do?
CSS

Code: Select all

.center {
    text-align: center;
    margin: 0 auto;
    overflow: hidden;
    width: 600px;
}
 .t {float: left; background: url(dot2.gif) 0 0 repeat-x } /* just remove float for non hugging version */ 
.b {background: url(dot2.gif) 0 100% repeat-x}
.l {background: url(dot2.gif) 0 0 repeat-y}
.r {background: url(dot2.gif) 100% 0 repeat-y}
.bl {background: url(bl2.gif) 0 100% no-repeat}
.br {background: url(br2.gif) 100% 100% no-repeat}
.tl {background: url(tl2.gif) 0 0 no-repeat}
.tr {background: url(tr2.gif) 100% 0 no-repeat; }

No change to html

[MikeHopley]

Hmm.

Perhaps the image needs to be set to {display: block}.

At this stage, I would consider creating a minimal test case, just to prove the concept of using a wrapper to centre a float. Prove the idea right or wrong, and then move on from there.