CODEWITHSUNDEEP
css
Vjeetje
Vjeetje

Reputation: 5404

css header layout width 3 divs

I am trying to create a header with 3 divs: one is aligned left, one is aligned right and the other is in the center. enter image description here

the page is for example 1200px the black,red and yellow rectangles are 960px and centered in the page. elements in the black rectangle are added to the left, elements in the yellwo rectangle are added to the right, and the elements in the red tectangle are centered.

This is a good general case study for header of a site

Upvotes: 0

Views: 1413

Answers (3)

Kingk
Kingk

Reputation: 1021

Try this..

<style>
.header { margin: 0px auto; width: 1200px; }
.floatt { float: left; margin-right: 5px;}
.black-one { width: 40%;}
.red-one { width: 20%;}
.yellow-one { width: 40%;}
.clear { clear: both;}
</style>

<div class="header">
<div class='black-one floatt'>
Some content
</div>
<div class='red-one floatt'>
Some content
</div>
<div class='yellow-one floatt'>
Some content
</div>
<div class="clear"></div>
</div>

Upvotes: 0

bikash shrestha
bikash shrestha

Reputation: 429

This will solve your issue

<div class="header" style="width:1200px;">
<div style="width:40%;float:left;" class='black-one'>
    <div style='float:left;'>Some content</div>
    <div style="clear:both"></div>
</div>
<div style="width:20%;float:left;" class='red-one'>
    <div style="margin:10px auto;text-align:center">Some content</div>
    <div style="clear:both"></div>
</div>
<div style="width:40%;float:left;" class='yellow-one'>
<div style='float:right;text-align:right;'>Some content</div>
        <div style="clear:both"></div>
</div>
<div style="clear:both"></div>
</div>

Upvotes: 2

Phillip Dews
Phillip Dews

Reputation: 51

I wrote an article on this a while back here is my code...

<div id="mainContent">

  <div id="col1">

    Column 1

  </div>

  <div id="col2">

    Column 2

  </div>

  <div id="col3">

    Column 3

  </div>

  <div id="clearance" style="clear:both;"></div>

</div>

And here is the CSS for it....

#mainContent {

    width: 1000px;

    margin-right: auto;

    margin-left: auto;

    text-align: center;

}

#col1 {

    margin: 10px;

    float: left;

    width: 300px;

}

#col2 {

    margin: 10px;

    float: left;

    width: 300px;

}

#col3 {

    margin: 10px;

    float: left;

    width: 300px;

}

Hope this helps... Phillip Dews

Upvotes: 0

Related Questions