Css Table-cell and relative width - css

Question

I'm struggling with a CSS issue and I was hoping for some help.
Here's the story:
I'm designing a header. It's split in two divs. First one must be 70% wide and second one 30% wide. I used the css-property "Display: table-cell" in order to place them side by side.
div.chapo {
width: 70%;
display: table-cell;
}
div.img_header {
width: 30%;
display: table-cell;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
background-image: url(...);
}
It's working fine when the text placed in the first div is long enough:
Buuuut... when text is short, it's all messy:
I can't figure out why my widths values aren't kept in this specific case.
Thanks in advance for all who would be kind enough to help me...
Here's the fiddle link: https://jsfiddle.net/vinny38/verucw8p/3/

Answer 1

I wrapped both div ce_text chapo and img_header to .test-wrap class and give it to below css:
.test-wrap {
display: table;
width: 100%;
}
body,
div {
margin: 0;
padding: 0;
font-family: 'Roboto condensed', sans-serif;
}
div.inside {
position: relative;
}
div.chapo {
background-color: #ef4056;
background-image: none;
width: 70%;
height: 255px;
display: table-cell;
vertical-align: top;
background-color: #aaa;
color: #fff;
padding: 20px 8%;
position: relative;
}
h1 {
margin-top: 0;
font: 1.4em 'Oswald', Helvetica, sans-serif;
font-weight: bold;
text-transform: uppercase;
}
div.chapo p {
width: 100%;
min-width: 100%;
position: relative;
padding: 0;
font-size: 1em;
font-weight: 300;
}
div.img_header {
width: 30%;
position: relative;
display: table-cell;
vertical-align: top;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
background-image: url(https://image.freepik.com/free-psd/abstract-background-design_1297-73.jpg);
}
div.mod_breadcrumb {
height: 40px;
margin: 0;
padding-top: 5px;
padding-right: 30px;
padding-bottom: 5px;
background-color: #e3e3e3;
padding-left: 8%;
}
.mod_breadcrumb ul li {
height: 30px;
display: inline-block;
padding: 3px 0;
color: #828282;
}
.test-wrap {
display: table;
width: 100%;
}
<div class="inside">
<div class="test-wrap">
<div class="ce_text chapo">
<h1>My header</h1>
<div class='text-chapo'>
<p>Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consectetur adipiscing </p>
</div>
</div>
<div class="img_header"></div>
</div>
<div class="mod_breadcrumb block">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>

Answer 2

This CSS it's ok... the 'float:left' option and relative width are different.
Here, I disccount the paddings left and right of total width. The float is necessary to horizontal align.
body,
div {
margin: 0;
padding: 0;
font-family: 'Roboto condensed', sans-serif;
}
div.inside {
position: relative;
}
div.chapo {
background-image: none;
width: 50%;
height: 255px;
vertical-align: top;
background-color: #aaa;
color: #fff;
padding: 20px 10%;
position: relative;
float: left;
}
h1 {
margin-top: 0;
font: 1.4em 'Oswald', Helvetica, sans-serif;
font-weight: bold;
text-transform: uppercase;
}
div.chapo p {
width: 100%;
position: relative;
padding: 0;
font-size: 1em;
font-weight: 300;
}
div.img_header {
width: 30%;
position: relative;
height: 295px;
vertical-align: top;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
float: left;
-webkit-background-size: cover;
background-image: url(https://image.freepik.com/free-psd/abstract-background-design_1297-73.jpg);
}
div.mod_breadcrumb {
height: 40px;
margin: 0;
padding-top: 5px;
padding-right: 2%;
padding-bottom: 5px;
background-color: #e3e3e3;
padding-left: 8%;
float:left;
width:90%;
}
.mod_breadcrumb ul li {
height: 30px;
display: inline-block;
padding: 3px 0;
color: #828282;
}

Answer 3

Try like this:
You have to define float property as well as you must define height:255px (as for another div you have given height as 255px )for your img_header class. It's really necessary.
body,
div {
margin: 0;
padding: 0;
font-family: 'Roboto condensed', sans-serif;
box-sizing: border-box
}
div.inside {
position: relative;
}
div.chapo {
background-color: #ef4056;
background-image: none;
width: 70%;
float:left;
height: 255px;
display: table-cell;
vertical-align: top;
background-color: #aaa;
color: #fff;
padding: 20px 8%;
position: relative;
}
h1 {
margin-top: 0;
font: 1.4em 'Oswald', Helvetica, sans-serif;
font-weight: bold;
text-transform: uppercase;
}
div.chapo p {
width: 100%;
min-width: 100%;
position: relative;
padding: 0;
font-size: 1em;
font-weight: 300;
}
.clearfix {
clear:both;
}
.img_header {
width: 30%;
height: 255px;
float: right;
position: relative;
display: table-cell;
vertical-align: top;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
background-image: url(https://image.freepik.com/free-psd/abstract-background-design_1297-73.jpg);
}
div.mod_breadcrumb {
height: 40px;
margin: 0;
padding-top: 5px;
padding-right: 30px;
padding-bottom: 5px;
background-color: #e3e3e3;
padding-left: 8%;
}
.mod_breadcrumb ul li {
height: 30px;
display: inline-block;
padding: 3px 0;
color: #828282;
}
<div class="inside">
<div class="ce_text chapo">
<div class='text-chapo'>
<h1>My header</h1>
<p>Lorem </p>
<p>Aliquam porttitor.</p>
</div>
</div>
<div class="img_header"></div>
<div class="mod_breadcrumb block">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div class="clearfix"></div>