2 divs fill horizontal space - html

Question

I have 2 div's in parent wrapper. I would like to make the following:
these 2 divs share 100% space in width, so there is no gap between them, everything is red color.
When you scale the wrapper down, div b falls into new line below div a (this behaves as it should), but in this case I want both divs to be 100% width, so they make 2 lines of red color.
Is it possible to do this just with css (no tables!) and no additional elements?
Making wrapper background color red to compensate for this is not the solution.
<div class="wrapper">
<div class="a">left</div>
<div class="b">right</div>
</div>
http://jsfiddle.net/EAkLb/75/

Answer 1

Just change the CSS to width:50%; for both a and b, add a media query to set them to 100% at smaller viewports.
.wrapper{
position: relative;
max-width: 400px;
height:30px;
background-color: #fff;
}
.a{
float: left;
background-color: red;
text-align: left;
width:50%;
height:30px;
}
.b{
float: right;
background-color: red;
text-align: right;
width:50%;
height:30px;
}
#media screen and (max-width: 500px) {
.a, .b {
width: 100%;
}
}
<div class="wrapper">
<div class="a">left</div>
<div class="b">right</div>
</div>

Answer 2

Flexbox can do that:
JsFiddle demo
.wrapper {
position: relative;
max-width: 400px;
height: 30px;
background-color: #fff;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.a {
background-color: red;
text-align: left;
flex: 0 0 110px;
height: 30px;
}
.b {
background-color: red;
text-align: right;
flex: 0 0 120px;
height: 30px;
}
#media screen and (max-width: 400px) {
.a,
.b {
flex: 1 0 100%;
}
}
<div class="wrapper">
<div class="a">left</div>
<div class="b">right</div>
</div>

Answer 3

Consider you are using CSS media queries, you can simply change the width and the css float property of your divs. It's not the modern way, but it's work.
.wrapper{
position: relative;
max-width: 400px;
height:30px;
background-color: #fff;
}
.a, .b {
float: left;
width: 50%;
}
.a{
background-color: red;
text-align: left;
height:30px;
}
.b{
background-color: red;
text-align: right;
height:30px;
}
#media screen and ( max-width: 400px ) {
.a, .b {
float: none;
width: 100%;
}
}

Answer 4

The beauty of flex is that mediaqueries can often be avoided.
Using a combination of flex with min-width and flex-wrap we can achieve the desired effect without a media query.
.wrapper{
position: relative;
max-width: 400px;
height:30px;
background-color: #fff;
display: flex;
flex-wrap: wrap;
}
.child {
flex-grow: 1;
background-color: red;
height:30px;
}
.a{
min-width:110px;
text-align: left;
}
.b{
min-width:120px;
text-align: right;
}
<div class="wrapper">
<div class="child a">left</div>
<div class="child b">right</div>
</div>
Here's a JSFiddle.

Answer 5

My solution uses also Flex - but I use a min-width attr. to tell the flex container when to switch to 2 lines
.wrapper{
position: relative;
max-width: 100%;
height:30px;
background-color: #fff;
display: flex;
flex-wrap:wrap ;
}
.a,.b {
background-color: red;
width:50%;
min-width:130px;
height:30px;
flex-grow:1;
flex-shrink:0;
flex-basis:50%
}
.b {
background-color:green;
text-align:right;
}
fiddle
use the slider to make the window smaller
I used green as back for the 'b' element