For each post box, I want the thumbnail to float to the left and the text to float to the right. I do not want the thumb to wrap around the text.
Here is my html code:
<div class="post-container">
<div class="post-thumb"><img src="thumb.jpg" /></div>
<div class="post-title">Post title</div>
<div class="post-content"><p>post description description description etc etc etc</p></div>
</div>
I've tried a few ways and still can't get it to work... the text won't show on the right...
Here's my CSS code:
.post-container{
margin: 20px 20px 0 0;
border:5px solid #333;
}
.post-thumb img {
float: left;
clear:left;
}
.post-content {
float:right;
}
Is this what you're after?
h3 (header) tag, because it's a more semantic choice than using a div.Live Demo #1
Live Demo #2 (with header at top, not sure if you wanted that)
HTML:
<div class="post-container">
<div class="post-thumb"><img src="http://dummyimage.com/200x200/f0f/fff" /></div>
<div class="post-content">
<h3 class="post-title">Post title</h3>
<p>post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc </p>
</div>
</div>
CSS:
.post-container {
margin: 20px 20px 0 0;
border: 5px solid #333;
overflow: auto
}
.post-thumb {
float: left
}
.post-thumb img {
display: block
}
.post-content {
margin-left: 210px
}
.post-title {
font-weight: bold;
font-size: 200%
}
.post-container{_x000D_
margin: 20px 20px 0 0; _x000D_
border:5px solid #333;_x000D_
width:600px;_x000D_
overflow:hidden;_x000D_
}_x000D_
_x000D_
.post-thumb img {_x000D_
float: left;_x000D_
clear:left;_x000D_
width:50px;_x000D_
height:50px;_x000D_
border:1px solid red;_x000D_
}_x000D_
_x000D_
.post-title {_x000D_
float:left; _x000D_
margin-left:10px;_x000D_
}_x000D_
_x000D_
.post-content {_x000D_
float:right;_x000D_
}<div class="post-container"> _x000D_
<div class="post-thumb"><img src="thumb.jpg" /></div>_x000D_
<div class="post-title">Post title</div>_x000D_
<div class="post-content"><p>post description description description etc etc etc</p></div>_x000D_
</div>Solution using display: flex (with responsive behavior): http://jsfiddle.net/dkulahin/w3472kct
HTML:
<div class="content">
<img src="myimage.jpg" alt="" />
<div class="details">
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
CSS:
.content{
display: flex;
align-items: flex-start;
justify-content: flex-start;
}
.content img {
width: 150px;
}
.details {
width: calc(100% - 150px);
}
@media only screen and (max-width: 480px) {
.content {
flex-direction: column;
}
.details {
width: 100%;
}
}
Just need to float both elements left:
.post-container{
margin: 20px 20px 0 0;
border:5px solid #333;
}
.post-thumb img {
float: left;
}
.post-content {
float: left;
}
Edit: actually, you do not need the width, just float both left
Set the width of post-content and post-thumb so that you get a two-column layout.
Check out this sample: http://jsfiddle.net/Epgvc/1/
I just floated the title to the left and added a clear:both div to the bottom..
I almost always just use overflow:hidden on my text-elements in those situations, it often works like a charm ;)
.post-container {
margin: 20px 20px 0 0;
border:5px solid #333;
}
.post-thumb img {
float: left;
}
.post-content {
overflow:hidden;
}
Source: Stackoverflow.com