Aligning DIV with Text

I’m not really sure if this is a HTML or a CSS issue. I have two divs (div.two and div.three) that are wrapped in div.one.

I’ve putting various differing size photo thumbs in div.two and a comment in div.three. I did it like this because I thought that it would all line-up nicely but if and when the text in div.three wraps down to the next live, although it isn’t enough to extend passed the height I’ve set div.three to it throws div.one out of live.

Paste in my code below into your editor and you’ll see what I mean. I could get around this with tables but it has got to the point that I am rather intrigued as to how text in div.three effects the alignment of it’s containing div.one… as well as how to get around it.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

 <head><title></title></head>
 <style>
 
 .one {
 display: inline-block;
 width: 200px;
 background-color: green;
 border: 3px solid black;
 margin: 5px;
 } /* Wrapper */
 
  .two {
 height: 100px;
 background-color: red;
 } /* Where I'll put differing sized images */
 
  .three {
 height: 150px;
 background-color: yellow;
 } /* where I'll put my comments */

 </style>
 <body>

<div class="one">
<div class="two">
</div><!-- two -->
<div class="three">
A Single Line is Fine
</div><!-- three -->
</div><!-- one -->

<div class="one">
<div class="two">
</div><!-- two -->
<div class="three">
A Single Line is Fine
</div><!-- three -->
</div><!-- one -->

<div class="one">
<div class="two">
</div><!-- two -->
<div class="three">
But when I have text that wraps down to another line... although it doesn't alter the height of my set div, the whole main div goes out of align with the rest. What is happening here?
</div><!-- three -->
</div><!-- one -->

<div class="one">
<div class="two">
</div><!-- two -->
<div class="three">
A Single Line is Fine
</div><!-- three -->
</div><!-- one -->

 </body>
</html>

Appreciate any advice, Karl.

I didn’t have a look at the entire code but i think your problem is solved if you use float: left; on div one

Brilliant donboe!
I have been learning allot of code this past year but took a break for a few months as other things pressed, amazing how quickly I got in a muddle again! :rolleyes:

Float works fine!

Thanks again, Karl.

There is sometimes so much to remember :slight_smile:

Too true… :wink:

Hi Karl, glad you have the issue solved!

But I would like to try help you understand what happened. :slight_smile:

It is of course the inline-block display causing it, because:
The .one divs are sitting on a text-line that gets its text base line level from the texts lowest line, and:
The texts in the divs has different lowest line levels.

Now try vertical aligning the elements on that text line:

 .one {
 display: inline-block;
[COLOR="Red"] vertical-align:bottom;[/COLOR]  /* then test baseline, middle, top with all nested divs' display set as inline-blocks */
 width: 200px;
 background-color: green;
 border: 3px solid black;
 margin: 5px;
 } /* Wrapper */

Then, first time while keeping the inner divs’ height setting and second time without heights, check what happens at different levels when all nested divs are set inline-block. :slight_smile: