How to line up these two div boxes inside a parent div of fixed width

HTML & CSS
1

I’ve set the width and height of the first div. How do I line them up without setting width for the second div. I want it to grow dynamically.
Still, even I set width and height for the second div and get it worked. They line up in very ugly order. The picture overlaps its parent div.


<div class="content-container">
	<div class="thumbnail-container">
		<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
	</div>
	<div class="excerpt-container">
		<?php the_excerpt(); ?>
	</div>
	<div class="clear"></div>
</div>



.content-container {
	width: 100%;
	display: block;
}
.thumbnail-container {
	width: 80px;
	height: 80px;
	margin-right: 10px;
	display: inline-block;
}
.thumbnail-container img {
	width: 80px;
	height: 80px;
	padding: 2px;
	border: 1px solid #ccc;
}
.excerpt-container {
	display: inline-block;
}
.clear { clear: both; }

Thank you

2

My question is why have you not used the float?

use em up and probably there is margin, padding problem

Used padding: 2px; while you have to increase the width of container or lessen the image.

3

When you set your elements to display:inline-block. they ‘shinkwrap’ that is they will be as long as their CONTENT allows. This may seem it’s what you want, but it’s not. For example if a line of TEXT CONTENT is 100% of the width got your container element, than your element will THAT WIDTH ( 100% of the container) so of course any other element (inline, floated, inline-block will drop) Also remember that when using display:inline-block there is additional “white space” between the elements to consider. This is not margin , but the space created by ONE character of whitespace , from the space between the lines of code, e.g…: ‘</div> <p>’. Doing this ‘</div><p>’ eliminates that issue… but it’s really more trouble than it’s worth and as a matter of principle you shouldn’t format your code to appease your CSS.

BTW, you don’t head the clearing DIV since you are not floating anything and if thou were to float your elements you can give the parent element overflow:hidden and contain the floats that way.

con side this solution:


<div class="content-container">
	<div class="thumbnail-container">
		<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
	</div>
	<div class="excerpt-container">
		<?php the_excerpt(); ?>
	</div>
</div>
.content-container,.excerpt-container {overflow:hidden;}
.thumbnail-container {
	width: 80px;
	height: 80px;
     float:left; 
	margin-right: 10px;
	padding: 2px;
	border: 1px solid #ccc;
}
.thumbnail-container img {
     width:100%;
     height:100%;
}
4

Thanks, it works. There’s overlap image border but I fixed it.