div layout as columns - css

Question

i have the following code:
see in http://jsfiddle.net/bniya_dev/SYPNC/2/
<div>
<div id="mainHeader">
<div id="details1">
<span>details1</span>
</div>
<div id="details2">
<span>details2</span>
</div>
</div>
<div id="header">
<span>header </span>
</div>
</div>
css
div#details1
{
float:left; width:100px;
}
div#details2
{
float:right;
}
I want it to look like the following picture:
What style I should set?
I want it to work in all browsers even mobile browsers
http://jsfiddle.net/bniya_dev/SYPNC/2/

Answer 1

Try this:
You need to clear floats before header.
.clr{clear:both;}
DEMO

Answer 2

* {
margin: 0;
font-family: Arial ;
font-size: 35px;
line-height: 65px;
}
div#mainHeader {
width: 777px;
height: 65px;
background-color: aqua;
text-align: right;
}
div#details1 {
width: 620px;
height: 65px;
background-color: #ED1C24;
float: left;
}
div#details2 {
width: 157px;
height: 65px;
background-color: #22B14C;
float: left;
text-align: center;
}
div#header {
text-align: left;
}
This is the Demo
Maybe you should change the font by yourself (*^__^*)...

Answer 3

Try this one:
http://jsfiddle.net/SYPNC/9/
This should match your requirements. You can still adjust the width of your header1/header2

Answer 4

Give width for below in percentage according to your requirement
div#details1
{
float:left; width:90%;
}

Answer 5

Your html,css both should be change like bellow
HTML
<div id="details1"> <span>details1</span>
</div>
<div id="details2"> <span>details2</span>
</div>
<div id="header"> <span>header </span>
</div>
CSS
body{
width:500px;
}
#details1 {
float:left;
width:300px;
height:50px;
background-color:red;
}
#details2 {
float:right;
width:200px;
height:50px;
background-color:green;
}
DEMO

Answer 6

Try this:
div#details1
{
float:left;
background: red;
width: 90%;
text-align: right;
}
div#details2
{
float:right;
background: green;
width: 10%;
}
#header{
clear: both;
}
demo
But better way to markup like this.....
<div id="mainHeader">
<div id="details">
<span class="one">detail1</span>
<span class="two">detail2</span>
</div>
Then you can float: right; to #details