Forum Moderators: not2easy
Essentially I am trying to create this table based code into CSS and have had little success from reading through waaaay too many posts. Any help you could give would be great.
<body>
<table width="760px">
<tr>
<td valign="bottom"><img src="placeholder.jpg" width="300px" align="absbottom" /></td>
<td> </td>
<td valign="bottom" >this is the text that goes next to a photo and aligns with the bottom of the photo no matter how tall it is.</td>
</tr>
</table>
</body>
2) [w3.org...] - Homework
3) Select and use a valid DTD. Validate HTML and CSS.
4) The edited markup below should fix you up and get you started. If the whole page or site is marked up like this I would put it in quarantine and learn by recoding from scratch.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
td {
vertical-align: bottom;
border: 1px solid red;
}
</style>
</head>
<body>
<table style="width: 760px;">
<tr>
<td>
<img src="aaa.jpg" alt="Description." style="300px; height: 300px; vertical-align: bottom;" />
</td>
<td> </td>
<td>
this is the text that goes next to a photo and aligns with the bottom of the photo no matter how tall it is.
</td>
</tr>
</table>
<!--##########
The main thing I am after is having a picture of any width align with the baseline of text of any length. The text grows upward as would the image.Essentially I am trying to create this table based code into CSS and have had little success from reading through waaaay too many posts. Any help you could give would be great.
-->
</body>
The "it" in "no matter how tall it is." is that the text or the image ?
If we know which of the image or the text will tallest, if there is a fixed height somehow, ... it's easy enough.
But lacking that, unless I can use display:table-* attributes, it's a hard one.
Even if you keep a table there, we can easily clean that up even further that what D_Blackwell did, e.g. removing the spacer cell, moving that width on the table and the vertical align of the image etc out of the inline CSS.
My problem is more complex so I thought if I could get this piece answered I might be able to work out the rest.
The 'it' is the photo. In CSS I can align divs for the image and text to the bottom with position: absolute. However, when I do these elements no longer interact the way I want them to. The text does not wrap upward, or it slides under the image. As well, I do not wish to fix the height of image div, rather I would like to keep it dynamic.
Thanks D_blackwell for your effort but not what I was after. BTW my antiquated 'absbottom' value comes straight out of DreamWeaver CS4 so my assumption was that if achieved the result I wanted it would be current and valid.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test</title>
<style type="text/css">
* {
padding:0;
margin:0;
}
.test {
width: 760px;
margin: 0 auto;
position: relative; /* give it position */
background-color: red;
}
.test img {
width: 300px;
display: block;
}
.test p {
position: absolute;
bottom:0;
left: 300px; /* width of img */
background-color: green;
}
</style>
</head>
<body>
<p>before</p>
<div class="test">
<img src="2.jpg" alt="mandatory" />
<p>"Look ma, no hands" I said, to which she
answered -after I took that head-first dive-:
"no teeth either".</p>
</div>
<p>after</p>
</body>
</html>
Works in the latest versions of FF, Safari and Opera.
Not tested in IE (any version).
It will fail if the text becomes longer than the image is tall.
The only thing a bit special is to use absolute positioning to reference a parent that has gained "position".
But since the absolute positioning means the text is now out of the flow, it means failure should the text grow too tall.
