Top Row Bottom Align and Bottom Row Top Align in CSS?

HTML & CSS
1

Hey everyone,

First post here. Can the layout below be replicated with HTML/CSS? I’ve been trying to use <ul> and <li> but am struggling.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
<table width="100%" height="400px" border="0" style="border:1px solid black;">
  <tr>
    <td valign="bottom"><img src="screenshot.png" width="300" height="225" /></td>
    <td valign="bottom"><img src="screenshot.png" width="300" height="225" /></td>
    <td valign="bottom"><img src="screenshot.png" width="300" height="225" /></td>
    <td valign="bottom"><img src="screenshot.png" width="300" height="225" /></td>
  </tr>
  <tr>
    <td valign="top">text</td>
    <td valign="top">text<br />line two</td>
    <td valign="top">text</td>
    <td valign="top">text<br />line two<br />line three</td>
  </tr>
</table>
</body>
</html>
2

Is this some kind of a gallery with descriptions?

Edit: Sorry welcome at Sitepoint :slight_smile:

3

Hey donboe, thanks for your welcome :slight_smile:

Yeah, it is a gallery of sorts. Needs to be coded in the way I have described though :slight_smile:

4

Maybe something like this:


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
	margin: 0;
	padding: 0;	
}

#wrapper {
	width: 1200px;
	margin: 20px auto 0;
}

.col {
	width: 300px;
	float: left;
	text-align: center;
}

.one {
	background: red;		
}

.two {
	background: blue;		
}

.three {
	background: yellow;		
}

.four {
	background: green;		
}

.col img {
	margin: 10px;
	display: block;
}

.col p {
	width: 280px;
	margin: 0 10px 10px 10px;
	clear: both;	
}
</style>
</head>

<body>
<div id="wrapper">
<div class="col one">
<img src="images/test.png" width="280" height="210" alt="" />
<p>text</p>
</div>
<div class="col two">
<img src="images/test.png" width="280" height="210" alt="" />
<p>text</p>
</div>
<div class="col three">
<img src="images/test.png" width="280" height="210" alt="" />
<p>text</p>
</div>
<div class="col four">
<img src="images/test.png" width="280" height="210" alt="" />
<p>text</p>
</div>
</div>
</body>
</html>

It’s just basic. I used background colors to indicate the columns. If you have any questions, just ask

5

That’s great, thanks. I should have explained this better in my first post but I will need to put another row of images and text below this initial row. However, the image in cell one in the first row may be wider and/or higher than the image in the second row. The difference between images would need to be the same no matter on the width and/or height of the image (hope this all makes sense!). Here is how it might be done with tables.

The images will range from around 50 pixels wide by 100 pixels high and 150 pixels wide and 150 high. The images will be hardcoded:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
<table width="100%" height="400px" border="1" style="border:1px solid black;">
  <tr style="1px solid black;">
    <td valign="bottom" style="1px solid black;"><img src="Tulips.jpg" width="300" height="225" /></td>
    <td valign="bottom" style="1px solid black;"><img src="Tulips.jpg" width="300" height="225" /></td>
    <td valign="bottom"><img src="Tulips.jpg" width="300" height="225" /></td>
    <td valign="bottom"><img src="Tulips.jpg" width="300" height="225" /></td>
  </tr>
  <tr>
    <td valign="top">image 1 </td>
    <td valign="top">text<br />line two</td>
    <td valign="top">text</td>
    <td valign="top">text<br />line two<br />line three</td>
  </tr>
</table>

<p>&nbsp;</p>
<table width="100%" height="400px" border="1" style="border:1px solid black;">
  <tr>
    <td valign="bottom"><img src="Tulips.jpg" width="161" height="225" /></td>
    <td valign="bottom"><img src="Tulips.jpg" width="300" height="156" /></td>
    <td valign="bottom"><img src="Tulips.jpg" width="300" height="225" /></td>
    <td valign="bottom"><img src="Tulips.jpg" width="300" height="225" /></td>
  </tr>
  <tr>
    <td valign="top">image 2 </td>
    <td valign="top">text<br />line two</td>
    <td valign="top">text</td>
    <td valign="top">text<br />line two<br />line three</td>
  </tr>
</table>
</body>
</html>
6

Will those images coming from a database or just hard coded? Are those size differences mayor or minor?

7

They will be hard coded. The images will range from around 50 pixels wide by 100 pixels high and 150 pixels wide and 150 high.

8

Then you might as well use the same what I posted before with a few adjustments:


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

html, body {
	margin: 0;
	padding: 0;	
}

.wrapper {/* changed from id to class since you're gonna use it more than once */
	width: 1200px;
	margin: 20px auto 20px;
	position: relative;
	overflow: hidden;
	background: #BDBDBD
}

.col {
	width: 300px;
	float: left;
	text-align: center;
}

.col img {
	margin: 10px auto 10px;
	display: block;
	background: #FF0000;
}

.col p {
	width: 280px;
	margin: 0 10px 10px 10px;
	clear: both;	
}
</style>
</head>

<body>

<div class="wrapper">

<div class="col">
<img src="images/test.png" width="50" height="100" alt="" />
<p>Text<br />
More text</p>
</div>

<div class="col">
<img src="images/test.png" width="150" height="100" alt="" />
<p>text</p>
</div>

<div class="col">
<img src="images/test.png" width="150" height="150" alt="" />
<p>Text<br />
More text</p>
</div>

<div class="col">
<img src="images/test.png" width="50" height="150" alt="" />
<p>text</p>
</div>

</div>

<div class="wrapper">

<div class="col">
<img src="images/test.png" width="100" height="100" alt="" />
<p>text</p>
</div>

<div class="col">
<img src="images/test.png" width="150" height="150" alt="" />
<p>text</p>
</div>

<div class="col">
<img src="images/test.png" width="50" height="100" alt="" />
<p>text</p>
</div>

<div class="col">
<img src="images/test.png" width="150" height="100" alt="" />
<p>Text<br />
More text<br /></p>
</div>

</div>

</body>
</html>

I hope this is what similar to what you mean.

9

Hi donboe, thanks very much for that. Its close but is it possible to top align the text (so that the text in the rows are all in line at via the top line of text) and bottom align the images (so that the bottom of the images are all in line)?

10

I copied the table code and can’t see much alignment (cause all the images are the same)
but… if I take donboe’s code, switch to a list and try using display: inline-block, I can get the containers of the image/text pair to align to the bottom. Without the borders on those containers though they don’t look all that lined up. Also, may not work in everyone’s favourite browser.


<!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" lang="en" xml:lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="content-language" content="en" />
    <title>tableythingies</title>
    <style type="text/css">
* {
  margin: 0; 
}
 
.wrapper {
    width: 1200px;
    margin: 20px auto;
    background-color: #bdbdbd;
}
 
ul {
  list-style: none;
  margin-bottom: 5px;
  padding-left: 30px;
}


li {
    display: inline-block;
    width: 200px;
    text-align: center;
    vertical-align: bottom;
    border: 1px solid #f00;
}
 
li p {
    text-align: center; 
}
    </style>
  </head>

<body>
  <div class="wrapper">
    <ul>
      <li>
        <img src="http://stommepoes.nl/newt.png" width="50" height="100" alt="" />
        <p>Text<br />
        More text</p>
      </li>
      <li>
        <img src="http://stommepoes.nl/newt.png" width="150" height="100" alt="" />
        <p>text</p>
      </li>
      <li>
        <img src="http://stommepoes.nl/newt.png" width="150" height="150" alt="" />
        <p>Text<br />
        More text</p>
      </li>
      <li>
        <img src="http://stommepoes.nl/newt.png" width="50" height="150" alt="" />
        <p>text</p>
      </li>
    </ul>
 
    <ul>
      <li>
        <img src="http://stommepoes.nl/newt.png" width="100" height="100" alt="" />
        <p>text</p>
      </li>
      <li>
        <img src="http://stommepoes.nl/newt.png" width="150" height="150" alt="" />
        <p>text</p>
      </li>
      <li>
        <img src="http://stommepoes.nl/newt.png" width="50" height="100" alt="" />
        <p>text</p>
      </li>
      <li>
        <img src="http://stommepoes.nl/newt.png" width="150" height="100" alt="" />
        <p>Text<br />
        More text<br /></p>
      </li>
    </ul>
  </div>
</body>
</html>
11

Hi Stomme

What would you suggest in this case? Which browsers are you referring too? At first I thought of using a min height, but It wasn’t clear to me about how many lines of text we were talking, so I took that out!

12

“everyone’s favourite browser” == IE

Inline-block needs some hackies and then also FF2 if that’s being supported.

We’ll see if the inline-block begins to do something like what the OP wants.

I’d say if it can’t, the OP may be forced into tables for this, but like I said I couldn’t see what was needed in the table code above because there the images are all the same dimensions.