Two DIV's with auto-width [duplicate] - html

Question

This question already has answers here:
CSS side by side div's auto equal widths
(5 answers)
Closed 8 years ago.
In my layout in the main part of site I need two flexible columns. The height is known and always the same. But the width should be auto-increases with the width of the browser.
I need this because in div#1 should be different content (float right I supposed) and background than in div#2 (float left I supposed). Whole layout is increasing their width with browser (width 100%).
It would be easy to make if the background of div 1 and 2 is the same (wrapper + background set on parent) but in this example backgrounds are different. I do not know how to auto-increase the width of these two divs.

Answer 1

adjust the width parameter of div#1 and div#2
div #header {
display: block;
position: absolute;
top: 0px;
height: 100px;
}
div #div1 {
display: block;
position: absolute;
top: 100px;
width: 50%;
left: 0px;
}
div #div2 {
display: block;
position: absolute;
top: 100px;
width: 50%;
right: 0px;
}

Answer 2

this is what you want:
<div class="container">
<div class="header">
This is header
</div>
</div>
<div class="container">
<div class="div1">
This is left div
</div>
<div class="div2">
This is right div
</div>
</div>
<div class="container">
<div class="footer">
This is footer
</div>
</div>
.container{
max-width:960px;
padding:0 15px;
height:auto;
position:relative;
clear:both;
}
.header{
position:relative;
height:100px;
background-color:yellow;
width:100%;
display:block;
}
.div1{
position:relative;
height:400px;
background-color:pink;
width:50%;
float:left;
}
.div2{
position:relative;
height:400px;
background-color:green;
width:50%;
float:left;
}
.footer{
position:relative;
height:100px;
background-color:cyan;
width:100%;
display:block;
}
I've created a jsfiddle demo

Answer 3

What about a good, simple, semantic layout? The below uses positioning to maintain a fixed footer, here is an example without
Demo Fiddle
HTML
<header></header>
<section></section>
<section></section>
<footer></footer>
CSS
html, body {
height:100%;
width:100%;
margin:0;
}
header, footer, section {
position:absolute;
width:100%;
}
header, footer {
background:green;
height:50px;
}
footer {
bottom:0;
}
section {
top:50px;
bottom:50px;
width:50%;
background:yellow;
overflow-x:auto;
}
section:last-of-type {
background:blue;
left:50%;
}

Answer 4

Try this
#container{
width:100%;
clear:both;
}
#header{
width:100%;
}
#div1{
height:400px;
width:50%;
float:left;
}
#div2{
height:400px;
width:50%;
float:right;
}
#footer{
width:100%;
}