Here's the CSS and here is the main page.

So My question is fairly simple, or so I think. I set the body's width to 800px, yet when I colored the background (just for feeler's sake, my taste isn't that horrendous!) it turns out the Color bleeds waaay beyond 800px. Why is this?

And just in case you need it...here's the CSS again:

/* Body */
.html {
}
body {
display: block;
background-color: #6fff69;
width: 800px;
}
.nav_bar {
    width: 300px;
}
.newsbox {
    left: 400px;
    max-height: 400px;
    bottom: 350px;
    z-index: 0;
    position: relative;
    width: 350px;
    background-color: #9a9a9a;
    float: right;
}
.content {
}
a:visited {
color: blue;
}
.member_nav {
display: block ;
margin: 1em 0 ;
}

/* Header */
h1 a, h1 a:visited {
text-decoration: none;
color: black;
}

/* Forms */
form {
width: 500px;
}
label {
float: left;
margin-bottom: 15px;
clear: both;
width: 375px;
}
input, select {
float: right;
}
.form_cat {
color: blue;
clear: both;
display: block;
margin: 0 0 10px 20px;
}
.form_sect {
margin: .5em 0 1em;
}
#mrna_nam  {
width: 150px;
}
#drw_dpth, #area, #dsrd_rnt, #clrnce_hght,  {
width: 100px;
}
#submit {
display: block;
clear: both;
}
#check_id {
float: left;
}


/* Listings */
ul {
    list-style-type: none;
}
li {
max-height: 4em;
margin-bottom: 10px;
text-overflow: ellipsis;
}


/* Dock Listings */
.listed_dock {
width: 761px;
margin: 0; 
padding: 15px;
border-top: groove;
border-bottom: groove;
border-left: ridge;
border-right: ridge;
border-width: 5px;
border-color: #6699CC;
background-color: #FFFFCC;
}
.list_cat1, .list_cat {
color: blue;
clear: both;
display: block;
margin: 0 0 5px 15px;
}
.dock_id1 {
color: blue;
clear: both;
display: block;
margin: 0 0 5px 15px;
}


/* Detailed Listings */
.detailed_dock {
height: 913px;
padding-left: 15px;
padding-bottom: 15px;
padding-right: 15px;
padding-top: 15px;
margin: 0;
border-top: groove;
border-bottom: groove;
border-left: ridge;
border-right: ridge;
border-width: 5px;
border-color: #6699CC;
background-color: #ffffcc;
}
.view_header {
    font-weight: bold;
    letter-spacing: 1px;
    font-size: 1.15em;
    bottom: 15px;
    padding-bottom: 10px;
    padding-top: 10px;
    position: relative;
    right: 15px;
    width: 790px;
    display: block;
    text-align: center;
    background-color: #1cafff;
}
.img_box2 {
    right: 60px;
    background-color: #060606;
    position: relative;
    display: block;
    float: right;
}
#basic_details {
    float: none;
}
#details_details {
    right: 65px;
    bottom: 310px;
    position: relative;
    float: right;
}
#listercndtns_details {
    max-height: 285px;
    width: 420px;
    height: 250px;
    display: inline-block;
    background-color: #282828;
    position: relative;
}
#lnk2dtls {
letter-spacing: 1px;
font-weight: bold;
font-size: 1.1em;
right: 15px;
width: 790px;
background-color: white;
padding-bottom: 10px;
padding-top: 10px;
text-align: center;
bottom: 305px;
position: relative;
display: inline-block;
}
.dock_id2 {
color: blue;
clear: both;
display: block;
margin: 0 0 5px 15px;
}


/* Member Listings 
background-color: #7b7b7b; 
background-color: #4f3bff; */

.listed_member {
padding: 15px 0 0 15px;
border-width: 7px;
border-style: groove;
border-color: #6699CC;
background-color: #FFFFCC;
}
.view_header3 {
font-weight: bold;
letter-spacing: 1px;
font-size: 1.15em;
bottom: 15px;
padding-bottom: 10px;
    padding-top: 10px;
    position: relative;
    right: 15px;
    width: 786px;
    display: block;
    text-align: center;
    background-color: #1cafff;
}
.other_dock {
position: relative;
width: 725px;
height: 230px;
margin-bottom: 10px;
padding: 10px;
background-color: #b8b8b8;
border-width: 5px ;
border-style: groove ;
border-color: #32ccc7 ;
}
.dock_id3 {
letter-spacing: 1px;
font-weight: bold;
font-size: 1.25em;
margin-bottom: 5px;
margin-right: 0;
margin-top: 0;
right: 10px;
bottom: 10px;
padding: 5px;
width: 460px;
position: relative;
text-align: center;
background-color: #8e80ff;
color: #fff2f5;
clear: both;
display: block;
}
.further_details {
    z-index: 1;
    left: 550px;
    top: 170px;
    position: relative;
}
.img_box3 {
    text-align: center;
    left: 459px;
    bottom: 68px;
    position: relative;
    width: 275px;
    background-color: white;
    height: 250px;
}
.dock_img3 {
    top: 10px;
    position: relative;
}
.dock_uls3 {
    letter-spacing: 0.75px;
    position: relative;
    bottom: 275px;
}

/* images: 1.display 2.details 3.member */
.dock_img1, .dock_img2, .dock_img3 {
height: 200px;
width: 250px;
}

1 answer

3
points
This was chosen as the best answer

BODY is not really like div's and tables, you carnt apply a set width or height to it and if you do it ignores them which is why the background colour is bleeding out like that.

You need to create a div container for your content which would then take on a colour and width.

add this to the top of your index.php just before the header div so it looks like this:

<div class="container">
    <div class="header">

Don't forget to add a closing </div> at the bottom of your index.php before the </BODY> tag

Then add this to your style sheet:

body {

}

.container {
display: block;
background-color: #6fff69;
width: 800px;
}

taking care to delete the existing body style, thats it!!

Answered over 6 years ago by richard bruce