Home/ Questions/Q 7768363
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T15:53:51+00:00

My div with class name ‘header-body-right’ doesn’t seem to be floating to the left

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0