CODEWITHSUNDEEP
csshtml
El_L
El_L

Reputation: 355

div layout as columns

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: enter image description here

What style I should set?

I want it to work in all browsers even mobile browsers

http://jsfiddle.net/bniya_dev/SYPNC/2/

Upvotes: 1

Views: 68

Answers (6)

zhouji
zhouji

Reputation: 5336

* {
    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 (*^__^*)...

Upvotes: 1

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

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

Upvotes: 0

codingrose
codingrose

Reputation: 15699

Try this:

You need to clear floats before header.

.clr{clear:both;}

DEMO

Upvotes: 2

underscore
underscore

Reputation: 6887

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

Upvotes: 0

somesh
somesh

Reputation: 599

Give width for below in percentage according to your requirement

div#details1
{
   float:left; width:90%;
}

Upvotes: 0

T3 H40
T3 H40

Reputation: 2436

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

Upvotes: 0

Related Questions