Take free space if no image css - html

Question

I have following layout
<div class="post-short-content">
<div class="entry-thumb"></div>
<div class="entry-post"></div>
</div>
CSS
.post-short-content {
width: 100%;
height: 100%;
overflow: hidden;
}
.post-short-content .entry-thumb {
width: 30%;
}
.post-short-content > div {
float: left;
}
.post-short-content .entry-post {
width: 70%;
}
And for responsive layout
#media only screen and (max-width: 768px) {
.post-short-content .entry-post,
.entry-header {
padding : 0;
}
.post-short-content > div {
clear: both;
float: none;
width: 100% !important;
}
.post-short-content .entry-thumb {
text-align: center;
}
.post-short-content .entry-post {
margin-top: 0.8em;
}
}
And now it looks like this
But the problem is that, in case of no image text also takes 70% from div space like this
Is it possible using only CSS make text take 100% of width if there is no image ?
UPDATE
Sorry for forgetting to mention, that I am not allowed to use flex, because this site will be used on mobile devices.

Answer 1

With a bit of mixing and matching of width and flex, then yes. Be sure to run your flex rules through autoprefixer for cross browser support.
.post-short-content {
width: 100%;
height: 100%;
display:flex;
}
.post-short-content .entry-thumb span {
width: 30%;
background:lightBlue;
}
.post-short-content > div {
display:block;
height:3em;
}
.post-short-content .entry-post {
min-width:70%;
flex:1 0 auto;
background:Gray;
}
<div class="post-short-content">
<div class="entry-thumb">
<span>Faux Image</span>
</div>
<div class="entry-post">Lora liked to find a photo</div>
</div>
<div class="post-short-content">
<div class="entry-thumb">
</div>
<div class="entry-post">Lora liked to find a photo</div>
</div>
https://jsfiddle.net/cmckay/jd0vxh3m/
http://autoprefixer.github.io/

Answer 2

Here is the flexbox way - very short and to the point:
https://jsfiddle.net/mu3vo6vh/1/
markup same as below
styles
.image-w img { /* responsive image wrapper */
display: block;
width: 100%;
height: auto;
}
.flex-example {
display: flex; /* children will stretch deal with the space accordingly */
align-items: center; /* for vertical align */
}
.image-w {
min-width: 200px; /* try regular width and see what happens */
margin-right: 1rem
}
This is the regular way with classic float
https://jsfiddle.net/mjmbm021/
markup
<div class="block">
<div class="image-w">
<img src="http://placehold.it/600x400" alt="">
</div>
<div class="text-w">
<p>Lorem....</p>
</div>
</div>
<div class="block">
<div class="text-w">
<p>Lorem....</p>
</div>
</div>
styles
.image-w img {
display: block;
width: 100%;
height: auto;
}
.block {
width: 100%;
float: left;
border: 1px solid blue;
}
.image-w {
max-width: 30%;
float: left; /* really means let other stuff float around this */
margin-right: 1rem;
}
.text-w {
width: auto;
}

Answer 3

flexbox (see 2:nd sample) would be the obvious choice, but sometimes one need a more cross browser solution (the support of older browser, and sometimes newer too, with render issues when using flex)
Here is a suggestion using display: table. It has the same great way as flex, being dynamic and adjust to its content.
.post-short-content {
width: 100%;
display: table;
}
.post-short-content > div {
display: table-cell;
vertical-align: top;
}
.post-short-content .entry-thumb img {
display: block;
}
.post-short-content .entry-post {
width: 100%;
background: Gray;
}
#media only screen and (max-width: 768px) {
.post-short-content .entry-post,
.entry-header {
padding : 0;
}
.post-short-content > div {
display: block;
width: 100%;
}
.post-short-content .entry-thumb img {
margin: 0 auto;
}
.post-short-content .entry-post {
margin-top: 0.8em;
}
}
<div class="post-short-content">
<div class="entry-thumb">
<img src="http://lorempixel.com/100/100/animals/3" alt="">
</div>
<div class="entry-post">Lora liked to find a photo</div>
</div>
<div class="post-short-content">
<div class="entry-thumb">
</div>
<div class="entry-post">Lora liked to find a photo</div>
</div>
If you can use flexbox
.post-short-content {
display: flex;
}
.post-short-content .entry-thumb img {
display: block;
}
.post-short-content .entry-post {
flex: 1;
background: Gray;
}
<div class="post-short-content">
<div class="entry-thumb">
<img src="http://lorempixel.com/100/100/animals/3" alt="">
</div>
<div class="entry-post">Lora liked to find a photo</div>
</div>
<div class="post-short-content">
<div class="entry-thumb">
</div>
<div class="entry-post">Lora liked to find a photo</div>
</div>