[Gadifae]

I am trying to layout a page, using CSS, with an image on one side of the page and a caption about that image on the other. Located several pixels to the right of the image is a vertical line that joins with horizontal lines on the bottom and top of the page.

To get an idea of the layout I am trying to achive, this is my best result so far. It features the image on the left side and nothing on the right.

http://diagram32.com/sample/sample1.html

The problem I am running into is that I cannot get the right side of the layout to line up properly with the left side of the page. Instead of appearing flush -- both the top of the image and the top of the caption should be 15 pixels below the top line -- with the top of the image, its above the image and breaks the vertical line.

Here is the what I have thus far:

http://diagram32.com/sample/sample2.html

The style sheet for this layout is here:

http://diagram32.com/sample/sample.css

I am certain it just needs a little bit of adjusting to get the caption to display down a bit, but so far none of my adjustments have worked.

I have tested this, so far, using Safari 1.1.1 and IE 5.2.3 under Mac OS X 10.3.1.

Insight and suggestions on how I can get this to work, and why my current implementation does not work, would be most appreciated.

G.

[mzllr]

give this a whirl...

[php]
#caption
{
border-bottom-color: 1px dotted #999966;
border: 1px dotted #CCCC33;
margin-left: 555px;
margin-right: 15px;
margin-top: 15px;
position: absolute;
}
[/php]

this worked in safari, netscape 7, and ie for mac when i checked it.

[Nebagakid]

seems like someone needs some

"float:right" going on here, YOU KNOW WAHT IAM SAYING!?

[Gadifae]

Originally posted by Nebagakid:
seems like someone needs some

"float:right" going on here, YOU KNOW WAHT IAM SAYING!?

Apparently, what you're saying is that I could use float:right...thanks for the suggestion.

Tried the position:absolute bit suggested by mzllr, it worked like a charm. Thanks, mzllr!

What benefit might float:right offer over the already working position:absolute solution?

G.

[mzllr]

Originally posted by Gadifae:
... What benefit might float:right offer over the already working position:absolute solution? ...

none, really. without getting too technical, float: right; and margin-left: 555px; position: absolute; should be interchangeable (emphasis on should).

the only problem is that some browsers have trouble rendering floats properly, so using absolute positioning and adjusting the magins is preferable (this will also give you better control as to where the layer sits, instead of floated all the way to the right).

either way, glad it worked out for ya...

[Synotic]

Originally posted by Gadifae:
Apparently, what you're saying is that I could use float:right...thanks for the suggestion.

Tried the position:absolute bit suggested by mzllr, it worked like a charm. Thanks, mzllr!

What benefit might float:right offer over the already working position:absolute solution?

G.

float:right would be more flexible and could adapt to any variable size the image was. Unless you're using PHP or something and can fill in that CSS value, then position: absolute should work fine.

BTW, if you want to keep your captions full width instead of collapsing because of the margins, remove all the "margin-" parts, so that it's just right: xx, left: xx.

[ameat]

unrelated to css positioning, one of the beauties of using css for layout is that your xhtml can be more meaningful and reflect the structure of your information rather than your design. so for this page, you're doing this:

Code:
<div id="caption">
Sasquatch<br>
Mount Rainier, Washington<br>
</div>


<div id="photo">
<div class="placeholder">
Placeholder for photographs of varying dimensions...
</div>
</div>

where it could be easier to do this:

Code:
<div id="photo">
     <img src="" width="" height="" alt="Sasquatch, Mount Rainier, Washington" />
     <p>Sasquatch<br/>Mount Rainier, Washington</p>
</div>

this does two things: it associates the caption with the photo as one coherent informational chunk (which it is) and it also cleans up your html and provides you with a direct css hook:

Code:
#photo     {/* container style */}
#photo img {/* photo style */}
#photo p   {/* caption style */}

[Gadifae]

Originally posted by Synotic:
float:right would be more flexible and could adapt to any variable size the image was. Unless you're using PHP or something and can fill in that CSS value, then position: absolute should work fine.

Hmm, good point. There likely will be a couple different image widths -- I was thinking of setting up different classes for each (i.e. #photo .vert, #photo .horzontal), but if I could use one ID tag that would be prefered.

Thanks for the insight.

G.

[ameat]

Originally posted by Gadifae:
Hmm, good point. There likely will be a couple different image widths -- I was thinking of setting up different classes for each (i.e. #photo .vert, #photo .horzontal), but if I could use one ID tag that would be prefered.

Thanks for the insight.

G.

just be warned that floating elements gets funky in older browsers. just make sure you do some extensive testing, especially windows IE (+5.x). there are tricks but each fix is unique...

[Gadifae]

Edit:

Never mind, I was able to figure it out after noticing the comments you entered at the very end of the your suggestion--renaming #caption to #photo p--though my initial tests required me to do the following:

Code:
<div id="photo">
 <p>Sasquatch<br/>Mount Rainier, Washington</p>
<img src="020515_01.jpg" width="" height="" alt="Sasquatch, Mount Rainier, Washington" />
</div>

Thanks for the suggestion.



How would such an approach work with my current design? I like the vertical line intersecting with the horizontal lines at the top and bottom. The solution I was able to come up with was the only way I could think to do it, but I prefer the cleaner layout of your code.

Thanks,

G.

Originally posted by ameat:
unrelated to css positioning, one of the beauties of using css for layout is that your xhtml can be more meaningful and reflect the structure of your information rather than your design.

where it could be easier to do this:

Code:
<div id="photo">
     <img src="" width="" height="" alt="Sasquatch, Mount Rainier, Washington" />
     <p>Sasquatch<br/>Mount Rainier, Washington</p>
</div>

this does two things: it associates the caption with the photo as one coherent informational chunk (which it is) and it also cleans up your html and provides you with a direct css hook:

Code:
#photo     {/* container style */}
#photo img {/* photo style */}
#photo p   {/* caption style */}

[ameat]

Originally posted by Gadifae:
Ameat,

How would such an approach work with my current design? I like the vertical line intersecting with the horizontal lines at the top and bottom. The solution I was able to come up with was the only way I could think to do it, but I prefer the cleaner layout of your code.

Thanks,

G.

ok, really doing this quickly off the top of my head. no hacks, no testing, so it might be off but it'll give you a quick idea...

Code:
#photo {
     margin: 0;
     padding: 0;
     border-top: 1px dotted #555;
     border-bottom: 1px dotted #555;
}

#photo img {
     padding: 20px;
     border-right: 1px dotted #555;
     /* positional code */
}

#photo p {
     padding: 20px;
     /* positional code */
}

there are a few ways to play with the positioning code. how you decide to do it depends on whether or not you're planning on using fixed sizes anywhere or not. fixed sizes make things a lot easier...

i'm choosing to cop out on actually figuring it out for you, because this part gets frustrating and i'm at work.

hope this helps
amit

[Gadifae]

A rough version of what I was able to come up with is here:

http://diagram32.com/sample/sample3.html

That example is missing the masthead graphic at the top and might look funny in Safari until you force reload the page.

All I had to do was rename my old #caption code to #photo p and reverse the order of your code, where the image tag preceded the paragraph tag. (When I had the image tag precede the paragraph tag, the caption information appeared below the bottom of the image. Any thoughts as to why? I think I would rather have the caption appear below the image with an unstyled browser.)

Originally posted by ameat:
ok, really doing this quickly off the top of my head. no hacks, no testing, so it might be off but it'll give you a quick idea...

Code:
#photo {
     margin: 0;
     padding: 0;
     border-top: 1px dotted #555;
     border-bottom: 1px dotted #555;
}

#photo img {
     padding: 20px;
     border-right: 1px dotted #555;
     /* positional code */
}

#photo p {
     padding: 20px;
     /* positional code */
}

there are a few ways to play with the positioning code. how you decide to do it depends on whether or not you're planning on using fixed sizes anywhere or not. fixed sizes make things a lot easier...

i'm choosing to cop out on actually figuring it out for you, because this part gets frustrating and i'm at work.

hope this helps
amit

[ameat]

Originally posted by Gadifae:
A rough version of what I was able to come up with is here:

http://diagram32.com/sample/sample3.html

That example is missing the masthead graphic at the top and might look funny in Safari until you force reload the page.

All I had to do was rename my old #caption code to #photo p and reverse the order of your code, where the image tag preceded the paragraph tag. (When I had the image tag precede the paragraph tag, the caption information appeared below the bottom of the image. Any thoughts as to why? I think I would rather have the caption appear below the image with an unstyled browser.)

check this article out. it might answer some questions:
- http://www.stopdesign.com/also/articles/absolute/

[Synotic]

Currently you're trying to absolute position the caption on top of the page and hoping it flows with the rest of the image. Imagine that your image was under a piece of glass. What you're doing is pasting the caption on top of the glass. Bad analogy I know... but the point is that your caption isn't really flowing with the page right now. And it still suffers from the problem of not dynamically moving based on the size of your image. From what I gather, you'll only have two sizes, one from landscape images, another for portrait. So a fully dynamic layout isn't exactly needed... But it makes it easier than always changes ids like "vertical", "horizontal" etc... It's also helpful in the rare case that you have an image that's perhaps been cropped and isn't a standard size.

Here's an example I've come up with that use pairs of floats to achieve the effect you're looking for. I realize people say that floats are sometimes a bit buggy in older browsers, so you're going to have to check in them if you want to use this particular code. It does work in Safari and IE5:mac.

A few notes on the code...

First of all it's not a completely conforming page as it is, I left out the head tags, html tags and all of that. I just wrote it up quickly and was too lazy to get all of the doctype stuff. But the rest should be compliant code.

The paragraph is underneath the image like you wanted it (and how it should be).

I've used ems for all the margins and padding. The reason may not be apparent at first but if you resize the text you may see why I chose to use ems. 1 em is the size of box around an 'm' of the current font. So essentially it adapts to whatever the size or face the font is. The margins predictably increase as the font increases. You can take it even further and use ems for the borders so that they also increase. But you may or may not want this for stylistic reasons.

The layout is based on ameat's code, I'm just plugging in some positioning. The positioning works by floating two blocks: your image and your caption. By floating it we are essentially taking the objects at of the natural flow. It's similar to making them inline, but using floats is more reliable. Unfortunately by doing this, the objects no longer affect the footer. It ends up being right under the header. To combat this, I've used one minor "hack". It's simply a break return that makes sure that nothing floats next to the blocks and resumes the natural flow of the page. So the '<br clear="all">' is crucial to the layout.

Also just a few minor cosmetic comments... I've equalized a few of the margins so that at least the horizontal margins are the same and the vertical margins are the same. This creates some consistency and makes the design a lot cleaner in my opinion. I'm also not too fond of the shade of yellow you chose the comments. Maybe you should just stick with gray or choose a more colorful yellow or even a different color.

*phew* I hope this helps

[ameat]

nice. i hate having to use the

Code:
<br style="clear:all;" />

cause it confuses people who might have to work with the template at a later point (this is a huge consideration for me at work, where our clients generally maintain their sites after the initial launch). besides the confusion and extra markup meant for design and not content purposes, this is probably the most useful and accomodating solution.

i tried something similar earlier using a

Code:
<br style="clear:both;" />

but it didn't work, and didn't realize that "all" was an option. good to know...

thanks

Originally posted by Synotic:
Currently you're trying to absolute position the caption on top of the page and hoping it flows with the rest of the image. Imagine that your image was under a piece of glass. What you're doing is pasting the caption on top of the glass. Bad analogy I know... but the point is that your caption isn't really flowing with the page right now. And it still suffers from the problem of not dynamically moving based on the size of your image. From what I gather, you'll only have two sizes, one from landscape images, another for portrait. So a fully dynamic layout isn't exactly needed... But it makes it easier than always changes ids like "vertical", "horizontal" etc... It's also helpful in the rare case that you have an image that's perhaps been cropped and isn't a standard size.

Here's an example I've come up with that use pairs of floats to achieve the effect you're looking for. I realize people say that floats are sometimes a bit buggy in older browsers, so you're going to have to check in them if you want to use this particular code. It does work in Safari and IE5:mac.

A few notes on the code...

First of all it's not a completely conforming page as it is, I left out the head tags, html tags and all of that. I just wrote it up quickly and was too lazy to get all of the doctype stuff. But the rest should be compliant code.

The paragraph is underneath the image like you wanted it (and how it should be).

I've used ems for all the margins and padding. The reason may not be apparent at first but if you resize the text you may see why I chose to use ems. 1 em is the size of box around an 'm' of the current font. So essentially it adapts to whatever the size or face the font is. The margins predictably increase as the font increases. You can take it even further and use ems for the borders so that they also increase. But you may or may not want this for stylistic reasons.

The layout is based on ameat's code, I'm just plugging in some positioning. The positioning works by floating two blocks: your image and your caption. By floating it we are essentially taking the objects at of the natural flow. It's similar to making them inline, but using floats is more reliable. Unfortunately by doing this, the objects no longer affect the footer. It ends up being right under the header. To combat this, I've used one minor "hack". It's simply a break return that makes sure that nothing floats next to the blocks and resumes the natural flow of the page. So the '<br clear="all">' is crucial to the layout.

Also just a few minor cosmetic comments... I've equalized a few of the margins so that at least the horizontal margins are the same and the vertical margins are the same. This creates some consistency and makes the design a lot cleaner in my opinion. I'm also not too fond of the shade of yellow you chose the comments. Maybe you should just stick with gray or choose a more colorful yellow or even a different color.

*phew* I hope this helps

[Synotic]

Originally posted by ameat:
nice. i hate having to use the

Code:
<br style="clear:all;" />

cause it confuses people who might have to work with the template at a later point (this is a huge consideration for me at work, where our clients generally maintain their sites after the initial launch). besides the confusion and extra markup meant for design and not content purposes, this is probably the most useful and accomodating solution.

Hopefully we'll wait 'til it's fully tested though. As for the confusing code... I never really thought about it, although it is a good point. Perhaps you could do something like:

<!-- STOP! THE CODE BELOW IS CRUCIAL TO THE LAYOUT AND SHOULD NOT BE MODIFIED! -->
<br clear="all" />
<!-- END DANGEROUS CODE -->

Or something like that.

[ameat]

Originally posted by Synotic:
Hopefully we'll wait 'til it's fully tested though. As for the confusing code... I never really thought about it, although it is a good point. Perhaps you could do something like:

<!-- STOP! THE CODE BELOW IS CRUCIAL TO THE LAYOUT AND SHOULD NOT BE MODIFIED! -->
<br clear="all" />
<!-- END DANGEROUS CODE -->

Or something like that.

"don't press the big, shiiiiny, red button..."

[Gadifae]

Originally posted by Synotic:
Currently you're trying to absolute position the caption on top of the page and hoping it flows with the rest of the image. Imagine that your image was under a piece of glass. What you're doing is pasting the caption on top of the glass. Bad analogy I know... but the point is that your caption isn't really flowing with the page right now. And it still suffers from the problem of not dynamically moving based on the size of your image. From what I gather, you'll only have two sizes, one from landscape images, another for portrait. So a fully dynamic layout isn't exactly needed... But it makes it easier than always changes ids like "vertical", "horizontal" etc... It's also helpful in the rare case that you have an image that's perhaps been cropped and isn't a standard size.

First of all, thanks for taking the time to not only make the example, but also to write such an detailed explanaton of what you've done and why you made the choices you made.

I prefer having the dynamic layout. I want the vertical bar to appear a set number of pixels from the edge of the image -- what you've done sounds like it will do just that. (I'm still absorbing what you've done and have yet to examine the code behind it too closely.)

I'm also not too fond of the shade of yellow you chose the comments. Maybe you should just stick with gray or choose a more colorful yellow or even a different color.

You are right about the yellow border -- just as you were about making the margins consistant -- it exists only for development purposes. The final version will omit the border completely.

*phew* I hope this helps

It does, it does. Now all I need to do is study it so I can fully understand it.

More questions will likely follow.

G.

[Simon Mundy]

Originally posted by Synotic:
Hopefully we'll wait 'til it's fully tested though. As for the confusing code... I never really thought about it, although it is a good point. Perhaps you could do something like:

<!-- STOP! THE CODE BELOW IS CRUCIAL TO THE LAYOUT AND SHOULD NOT BE MODIFIED! -->
<br clear="all" />
<!-- END DANGEROUS CODE -->

Or something like that.

Just ditch the <br clear="all /> and update the footer id to have the attribute 'clear: both' - much cleaner and simpler!

[ameat]

Originally posted by Simon Mundy:
Just ditch the <br clear="all /> and update the footer id to have the attribute 'clear: both' - much cleaner and simpler!

did you try it? i think the div with the two floats will collapse if the break isn't following the two floats...

[Gadifae]

Originally posted by ameat:
did you try it? i think the div with the two floats will collapse if the break isn't following the two floats...

Ameat is right, using clear:both in the footer id eliminates the top line of the footer. Using <br clear="all"> does not. So, the latter remains.

Good suggestion though.

G.

[Gadifae]

Originally posted by Synotic:
Here's an example I've come up with that use pairs of floats to achieve the effect you're looking for. I realize people say that floats are sometimes a bit buggy in older browsers, so you're going to have to check in them if you want to use this particular code. It does work in Safari and IE5:mac.

Playing around with Synotic's float-based solution a bit more tonight, I discovered one quirk:

If the window is resized enough, to the point where the vertical scroll bar nearly overlaps the caption block, the caption block jumps out of the way, landing beneath the photograph and breaking the vertical line.

In the absolute-based solution, the text in the caption block scrunches up but the block itself remains on the right side of the unbreached line. The scrunching down of the text is something I can live with in order to have the line remain unbreached, but would rather not have if possible.

I'm wondering if there is a best of both worlds solution to this? I love the ultra clean style sheet of Synotic's float-based solution, but I also like the non-line breaking aspect of the absolute-based implementation.

G.

[Simon Mundy]

Originally posted by Gadifae:
I'm wondering if there is a best of both worlds solution to this? I love the ultra clean style sheet of Synotic's float-based solution, but I also like the non-line breaking aspect of the absolute-based implementation.

G.

Sure:-

#photo p
{
border-bottom-color: 1px dotted #999966;
border: 1px dotted #CCCC33;
margin-left: 525px;
line-height: 17px;
position: absolute;
white-space: nowrap;
}

or you could replace 'white-space: nowrap' with 'width: 200px' or something similar. Depends on how you want to treat the caption content.

Of course the only downside to the 'absolute' route is that if the content of the caption ends up being deeper than the lh-side image, it will overlay on top of the type beneath it. That's where the 'float' solution works a lot better. But, again, the one problem with a float is that if the copy box is deeper, then your 'middle' border won't meet the footer!

Anyway, hope that hasn't put a spanner in the works! Good luck with it.

[Gadifae]

Originally posted by Simon Mundy:
Sure:-

#photo p
{
border-bottom-color: 1px dotted #999966;
border: 1px dotted #CCCC33;
margin-left: 525px;
line-height: 17px;
position: absolute;
white-space: nowrap;
}

or you could replace 'white-space: nowrap' with 'width: 200px' or something similar. Depends on how you want to treat the caption content.

Of course the only downside to the 'absolute' route is that if the content of the caption ends up being deeper than the lh-side image, it will overlay on top of the type beneath it. That's where the 'float' solution works a lot better. But, again, the one problem with a float is that if the copy box is deeper, then your 'middle' border won't meet the footer!

What I love about the float solution is it allows for any sized image: the caption will always (or at least in my tests) appear a set number of pixels to the right of the image. What I've seen of absolutes suggests that I'd need different classes (with different margin-left values) if I wanted to add an image with a different width.

Thinking about the middle way solution I was seeking -- a layout that uses floats but has the line extending from the top horizontal line down to the bottom horizontal line -- it struck me the line being broken was not the problem. No, the problem was the line itself.

Removing the middle line and making a couple minor changes to the CSS, I was able to get the look I sought by using floats.

As the example shows, another advantage of the no-line solution is I could easily add more than one image to the page and still have the page resize gracefully.

Thanks to everyone who contributed to this thread!

G.