[hiddentrack]

Ok, the CSS problem I'm having will probably turn out to be incredibly basic. I've done some quick Google searchs but haven't come up with anything yet.

On the project I'm working on right now, I have three containers #gallery, .photo, and #details. In #details there are two other classes: .left and .right. Everything lives inside #gallery.

The content of #gallery, as the class titles suggest, is a photograph. The content of #details is the title/location information for a the photograph on one side and navigation controls on the other. I have the content of the #details blocks flush to the left and right side of the image.

The #details container has its width set to 100%, which I'm interpreting as 100% the width of the #gallery container. The #width .left and #width .right containers are both set to 50%. The #gallery container, however, is set to a fixed pixel width. (The #gallery container is centered within a #frame container, should that matter.)

How would I set my #gallery container up so the width of it is equal to the width of the image, thus accomodating different size images without having to set a fixed size for #gallery?

Again, this will probably turn out to be fairly basic, but I've yet to find a solution.

~ ht

[Chuckit]

Just don't give it a fixed width? Elements expand to fix their children unless they're constrained to a certain size.

[hiddentrack]

Originally Posted by Chuckit

Just don't give it a fixed width? Elements expand to fix their children unless they're constrained to a certain size.

Tried that, alas without success. I have put together stripped down version of my problem page.

http://www.trumpetlamp.com/sandbox/blocktest/

On it, the image is a large blue rectangle. Beneath it, in yellow and red, are two blocks which should (were this working as I expected) and surrounding those is a solid burgundy line.

Combined together, the blue and yellow boxes should have the same width as the blue rectangle; each box should consume half the width of the blue box.

Thanks for the suggestion. I was hopeful it would work.

~ht

[Millennium]

Is it possible to set the display: on the image to block, or would this disrupt your layout? It may be worth a try.

[Sage]

Chuckit: A block element will never naturally wrap around an inline element (unless of course that inline element has a width of 100%).

The only way I can think of is to set #gallery to [font=Courier, Courier New, Monaco]display: inline-table;[/font], but it looks like Safari is the only browser that supports it (even FF doesn’t).

Otherwise, the only advice I can offer you is to fudge it by giving the image three borders (sans the bottom), then use the bottom elements to draw the rest of the borders. You’ll have to be extra careful with margins and padding though.

[Chuckit]

Originally Posted by Sage

Chuckit: A block element will never naturally wrap around an inline element (unless of course that inline element has a width of 100%).

What do you mean? If you have a sizeless div with an image inside it, the div's border will not contain the image? Because that goes against pretty much all my experience…

[hiddentrack]

@Millennium - Alas, setting the display: for the image to block (sounds like something from Hollywood Squares, doesn't it?) also failed to work. Like Sage's suggestion, nice suggestion.

@sage - Setting the display: element to inline table did help a little, but there is still a little overhang on the right size with Safair. That and the fact it doesn't work with Firefox... Nice suggestion though.

@ChuckIt - The div certainly contains my image, it is just that I want the size of the div to correspond with whatever the width/height of the image within the div. If there is a 565px wide image within the div, I want a div that is 565px wide to serve as a wrapper div for both my image and the details div that appears below the image. If the image is 250px wide, I want the div to be 250px wide without having to create a new div class in my style sheet each time an image with unique dimensions is added to the page.

Sage's comment seems to back up my experience to a capital T; if you can alter the source for the sample I posted above which goes with your experience, I would love to see it.

Thanks for all the suggestions.

B.

[Super Mario]

Well, I created left and right floats to divide the gallery div in half. The floats have 0 margins. Your ID = details with the left and right divs I put them inside the leftbox within the same div as the blue square image so they appear directly under it and together are the same width as the image.

I also gave fixed pixel widths to the container and left and right boxes. The Details IDs and class still have 50% widths.

I repeated the same in on the right side of the gallery container just to fill space.

The HTML validates with no errors. There is a little overhang that can be fixed with some margin nudging if your backgrounds are transparent. Firefox and Safari render the following the same. Don't know about IE. (Remember to close your img tags next time )

/ This is the CSS /

body {
background-color:#ffffff;
}

#gallery {
border: 1px solid #662f18;
width:980px;
margin-left:auto;
margin-right:auto;
}

#leftbox {
margin-top:0;
margin-left:0;
margin-bottom:0;
margin-right:0;
width:490px;
float:left;
}

#rightbox {
background-color:#FFFFFF;
margin-top:0;
margin-left:0;
margin-bottom:0;
margin-right:0;
width:490px;
float:right;
}


#details {
border: 1px solid #3c4b6d;
background: #1cffdd;
height: 50px;
width:490px;
}

#details .left {
text-align: left;
width:50%;
float: left;
background: #ff0f1e;
}

#details .right {
width:50%;
text-align: right;
float: right;
background: #ffc23f;
}

/ This is the HTML /


<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="imgtest.css"/>
<title>Trumpetlamp</title>
</head>

<body>

<div id="gallery">

<div id="leftbox">
<img src="samplesquare.png" />

<div id="details">

<div class="left">
<p>left side</p>
</div>

<div class="right">
<p>right side</p>
</div>

</div>
</div>

<div id="rightbox">
<div id="details">

<div class="left">
<p>Just filling...</p>
</div>

<div class="right">
<p>...the space on the right</p>
</div>

</div>
<img src="samplesquare.png" />
</div>

<br clear="all" />

</div>

</body>
</html>

[Sage]

Originally Posted by Chuckit

What do you mean? If you have a sizeless div with an image inside it, the div's border will not contain the image?

Nope. A div (or any block element), given no width constraints, will default to 100% – there’s no way to make a block-level element “compress” itself to fit around another element, unless you set explicit widths for both (which is what hiddentrack wants to avoid).

I’ve put together a little demonstration here.

[hiddentrack]

Originally Posted by Super Mario

Well, I created left and right floats to divide the gallery div in half. The floats have 0 margins. Your ID = details with the left and right divs I put them inside the leftbox within the same div as the blue square image so they appear directly under it and together are the same width as the image.

I also gave fixed pixel widths to the container and left and right boxes. The Details IDs and class still have 50% widths.

The original problem, one which unfortunately, does not seem to be possible involves an optimal solution which does not require fixed pixel widths to be applied to any of my containers, be it the gallery, details or photo containers. In my unattainable optimal solution, the pixel width setting would be set only in the HTML, not within the CSS.

Thanks for the attempt, Super Mario. Even though it doesn't seem to solve the problem, I'm still curious about what benefit comes from splitting the gallery div via left and right floats? Is that so the details divs remain the same width as the img within the gallery box? Alternatively, what is the benefit of your approach over my approach in regards to your left and right floats in the gallery div.

B.

[Super Mario]

The details div is best made the same width as the blue square if it is nested in the same div. Alternatively you can use top, bottom, left and right fixed positioning but that's a very difficult solution because if your content later increases the height of your layout the details divs won't move.

The benefit of a left and right box would be that if you want to change the content later on all you would have to do is create divs for any new ideas and nest them in whatever side you want. Say you want an advert box, you create an id for it and put the div in the left box. But then you change your mind and want it on the right, all you have to do is cut and paste it across to the right. The same with any content.

[Synotic]

It isn't perfect, and I haven't tested it with MSIE (it could be a whole new can of worms; although, I'm using fairly innocuous stuff. So it shouldn't fail too badly). This is what I was able to come up with. It seems to work well in Safari and Firefox. You can resize the text to see how the layout flows, as well. It also seems to work surprisingly well in ie:mac, except for some weirdness with the caption on the last gallery box. It just seems to be a random bug, but it might be fixable, were it necessary.

It fits your major criterion, that the each box flow to the size of its contents. I just used floated divs, which achieve that effect. A couple problems include that you won't be able to center these boxes by any method (I am 98% sure, unless you're willing to include image sizes in the HTML, which could be dynamically achieved through PHP); and that if your captions get too long, they will flow underneath the navigation (this can be made more aesthetically pleasing by setting a red background for the paragraph, and then putting a left border on the paragraph, rather than on the caption. Ideally, the red caption would flow to a second line. I haven't put too much thought into it, but I don't think it's entirely impossible).

Anyway, this might all be for naught if it fails in MSIE, but hopefully it throws some ideas around

[hiddentrack]

Thanks everyone for all of the suggestions, I finally stumbled upon a solution by looking at the problem from a slightly different angle.

Instead of trying to devise a magical CSS block which would accomodate all dimensions, I used an approach where I change the width of the block in the HTML portion of my layout.

The style sheet contains all the major details: centering the blocks, setting the font options, and sets the width of my main block, #gallery .area, to the most common width. When I need the block to have a different width, I change that using "style="width:545px" on the page itself.

http://trumpetlamp.com/sandbox/blocksolution/

This approach works perfectly in the latest versions of Safari, Firefox, OmniWeb and IE.

~ B

Originally Posted by Synotic

It isn't perfect, and I haven't tested it with MSIE (it could be a whole new can of worms; although, I'm using fairly innocuous stuff. So it shouldn't fail too badly). This is what I was able to come up with. It seems to work well in Safari and Firefox. You can resize the text to see how the layout flows, as well. It also seems to work surprisingly well in ie:mac, except for some weirdness with the caption on the last gallery box. It just seems to be a random bug, but it might be fixable, were it necessary.

It fits your major criterion, that the each box flow to the size of its contents. I just used floated divs, which achieve that effect. A couple problems include that you won't be able to center these boxes by any method (I am 98% sure, unless you're willing to include image sizes in the HTML, which could be dynamically achieved through PHP); and that if your captions get too long, they will flow underneath the navigation (this can be made more aesthetically pleasing by setting a red background for the paragraph, and then putting a left border on the paragraph, rather than on the caption. Ideally, the red caption would flow to a second line. I haven't put too much thought into it, but I don't think it's entirely impossible).

Anyway, this might all be for naught if it fails in MSIE, but hopefully it throws some ideas around