CODEWITHSUNDEEP
htmlcss
rusty009
rusty009

Reputation: 866

Div in HTML not floating left with CSS

My div with class name 'header-body-right' doesn't seem to be floating to the left of my div named 'header-body-centre' and I can't understand why, here is my HTML,

    <!DOCTYPE HTML>
<HTML>
 <HEAD>
  <TITLE>  </TITLE>
  <meta charset="UTF-8" />
  <link href="main.css" rel="stylesheet" type="text/css">
  <META NAME="Generator"    CONTENT="Notepad">
  <META NAME="Author"       CONTENT="00">
  <META NAME="KEYWORDS"     CONTENT="" />
  <META NAME="DESCRIPTION"  CONTENT="" />
 </HEAD>

 <BODY>

    <div class="header-top">

    </div>

    <div class="header-body">

        <div class="header-body-centre">
            <div class="logo">
            <img src="logo.png" />
            </div>
        </div>

        <div class="header-body-right">
            test
        </div>

    </div>



    <div class="navbar">

    </div>

    <div class="content-container">

    </div>
 </BODY>

</HTML>

The CSS I am using for the code is posted below,

 body
{   
    margin:0px;
    padding:0px;
}

.header-top
{
    height:11px;
    width:100%;
    background-image: url('HeaderTopNav.png');
    background-repeat: repeat-x;
}
.header-body
{
    width:100%;
    height:100px;
}
.header-body-centre
{
    margin: 0 auto;
    height:100%;
    width:70%;
}

.header-body-right
{
    width:15%;
    height:100px;
        float:left;

}

.navbar
{
    height:35px;
    width:auto;
    border: 1px solid green;
}
.logo
{
    margin-top:35px;
    float:left;
}

.quickNav
{
    float:right;

}

.container
{
    margin: 0 auto;
    background-color: #fff;
    border: 2px solid #c9c8c8;
    border-bottom: none;
    height:auto;
    overflow:hidden;
    width: 1000px;
    clear:both;
 }

Can anyone see why? I have tried floating the header-bosy-centre and decreasing the width of the header-body-right but nothing works. Can anyone see what I have done wrong? I am out of ideas. Thanks.

Upvotes: 2

Views: 14016

Answers (2)

Stefano Cerelli
Stefano Cerelli

Reputation: 105

Here you go dude: http://jsfiddle.net/YpAN8/1/

.header-body-centre
{
    height:100%;
    width:70%;
    float:left;
    margin-left:15%;
    background-color: yellow; /* remove this */
    margin-left:
}

.header-body-right
{
    width:15%;
    height:100px;
    float:left;
    background-color: red; /* remove this */

}

Upvotes: 1

Kevin Bowersox
Kevin Bowersox

Reputation: 94469

In order to have the elements side by side you must float both elements. This css Floats .header-body-centre left also, causing the elements to appear side by side.

.header-body-centre
{
    margin: 0 auto;
    height:100%;
    width:70%;
    float: left;
}

Your prior styling did not work because of how floated elements behave. When an element is floated it is taken out of the normal flow of the document. It is shifted to the left or right until it touches the edge of it's containing box or another floated element.

https://developer.mozilla.org/en/CSS/float

Upvotes: 4

Related Questions