CSS rendering is not as it should

Question

This is how my page look, and anybody can notice that it's not rendered right: enter image description here

I will post here in my question the HTML and parts of my CSS.

<body>
<img id="logo" src="res/img/logo.png" />
<div id="content">
    <div id="main-panel">
      <div class="headline">People in the database</div>
      <table width="100%" border="0" id="people">
          <tr class="table-headline">
            <td width="3%">#</td>
            <td width="90%">Name</td>
            <td width="7%">&nbsp;</td>
           </tr>
      </table>
    </div>

    <div id="right-panel">
        <div class="headline">Here is where the tools will be posted</div>
        This is the tools panel.
    </div>
</div>
</body>
</html>

and the CS...

html {
    text-align: center;
    background-color: #eeeeee;
    -webkit-box-shadow: 10px 20px 20px #666;
    box-shadow: 10px 20px 20px #666;
}
body {
    margin-left: auto;
    margin-right: auto;
    background-color: #ffffff;
    width: 960px;
    text-align: left;
    border-radius: 4px;
    border: 1px solid #666;
    padding-top: 10px;
    -webkit-box-shadow: 0px 6px 15px 0px #aaa;
    box-shadow: 0px 6px 15px 0px #aaa;
    -moz-box-shadow: 0px 6px 15px 0px #aaa;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
}

#logo {
    width: 150px;
    height: auto;
    margin-bottom: 10px;
}

#content {
    position: relative;
    min-height: 400px;
    font-size: 14px;
}
#content .headline  {
    height: 24px;
    padding-left: 5px;
    padding-right: 5px;
    font-family: "Segoe UI";
    font-size: 12px;
    line-height: 24px;
    background-image: url(img/headlineBackground.png);
    clear: right;
    float: none;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-color: #666666;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
}

#content #main-panel {
    width: 740px;
    margin-right: 10px;
    float: left;
    position: relative;
}
#content #right-panel {
    float: right;
    position: relative;

}

I would search on Google, but I really don't know what to look for... Please tell me where is the mistake, and maybe ways to improve my CSS... Of course tell me if you need anything more to help me!

score 2 · Answer 1 · edited May 23 '17 at 11:57

You are floating the elements inside the container element, just add this line before your parent div closes to clear the floats

<div style="clear: both;"></div>
<!-- Don't use inline styles, I've used it only for a demo 
     purpose here, consider using a self clearing class or a 
     class with a property clear: both; -->

Demo

For more on clear: both;

There are various other ways to clear floats, like using overflow: hidden; on the container element, which I don't recommend using it, or using a self clearing class like this

.clear:after {
   clear: both;
   display: table;
   content: ' ';
}

Note: :after won't work in IE8, you can use CSS3 pie as a polyfill to make the CSS3 pseudo selectors work.

@Victor Not each `div`, only to the end of the parent element which holds floating div, you can read my article, why use clear both, I've provided a link in my answer, you'll get it — Mr. Alien, Jul 24 '13 at 11:40

score 0 · Answer 2 · answered Jul 24 '13 at 11:34

Clear the line underneath the floating divs like this:

<body>
<img id="logo" src="res/img/logo.png" />
<div id="content">
    <div id="main-panel">
      <div class="headline">People in the database</div>
      <table width="100%" border="0" id="people">
          <tr class="table-headline">
            <td width="3%">#</td>
            <td width="90%">Name</td>
            <td width="7%">&nbsp;</td>
           </tr>
      </table>
    </div>

    <div id="right-panel">
        <div class="headline">Here is where the tools will be posted</div>
        This is the tools panel.
    </div>
    <br style="clear: both;" />
</div>
</body>
</html>

Alternatively you could use display: inline-block to set both next to each other.

CSS rendering is not as it should

2 Answers2