CODEWITHSUNDEEP
htmlcss
Victor
Victor

Reputation: 14632

CSS rendering is not as it should

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!

Upvotes: 0

Views: 55

Answers (2)

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18133

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.

Upvotes: 0

Mr. Alien
Mr. Alien

Reputation: 157414

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.

Upvotes: 2

Related Questions