Question

我有一个侧边栏，然后我的内容就在它的右侧，但我的背景却搞砸了。 See Images

HTML

<!doctype html>

<html lang="en">
<head>
<link rel="stylesheet" href="main.css">
<title>Stateline Thunder Faspitch Softball</title>
</head>
<body>
<div id="body_wrapper">
    <div id="wrapper">

        <div id="header">
            <span id="header_icon"></span>
            <div id="header_content">
                <div id="site_title">                        
                    <a href="index.html" target="_parent"><img    src="images/sltlogobolt.png" alt="LOGO" height=500 width=375></a>
                </div>
                    <p></p>       
    </div>
        </div> <!-- end of header -->

    <div id="main_content_top"></div>
    <div id="main_content_middle"><span id="main_top"></span><span id="main_bottom">                 </span>

        <div id="sidebar">        
            <div id="menu">
                <ul>
                    <li><a href="index.html" target="_parent" class="current">Home</a>   </li>                        
                    <li><a href="calendar.html" target="_parent">Calendar</a></li>
                    <li><a href="teams.html" target="_parent">Teams</a></li>
                    <li><a href="mtjsb.html" target="_parent">More Than Softball</a></li>
                    <li><a href="sponsors.html" target="_parent">Sponsors</a></li>
                    <li><a href="boardmembers.html" target="_parent">Board Members</a></li>
                    <li><a href="contact.html" target="_parent">Contact Information</a></li>
                </ul>       
            </div> <!-- end of menu -->         
        </div> <!--end sidebar-->

        <div id="content">
            <div class="content_box">
                <p>THis is the area for information places on the website for Stateline Thunder
                        Hopefully this will start looking right.</p>                    
            </div> <!--end content box-->

            <div class="content_box"><p>
                    hello this is another content box lets see how this works</p>
            </div>
            <div class="content_box"><p>This is another text area</p></div>
        </div> <!--end content-->

    </div> <!--end main content middle-->

    <div id="main_content_bottom"></div>
    </div> <!-- End of wrapper -->
</div> <!-- End of body wrapper-->
</body>
</html>

CSS：

body {
    background-image: url(images/background.jpg);
    background-position: top;
    background-repeat: repeat-x;
}

a, a:link, a:visited { 
    color: #777700; 
    text-decoration: none; 
}

a:hover { 
    color: #0066FF; 
    text-decoration: underline; 
}


#body_wrapper {
width: 100%;
background: url(images/header.jpg) center top no-repeat;
}

#wrapper {
    width: 984px;
margin: 0 auto;
/*background: url(images/headerimage.jpg) center top no-repeat;*/
}
#sidebar {
float: left;
width: 235px;
}

#header_content img {
    position: absolute;
    top: 15px;
    left: 130px;
    z-index: 1;
}

#main_content_top {
    width: 984px;
height: 30px;
    margin-top: 345px;
    background: url(images/content_top.png) no-repeat;
}

#main_content_bottom {
    width: 984px;
height: 30px;
    background: url(images/content_bottom.png) no-repeat
}

#main_content_middle {
position: relative;
    width: 900px;
padding: 10px 42px;
    background: url(images/content_middle.png) repeat-y
}


/* start menu */

#menu {
    padding-top: 30px;
    padding-left: 20px;
}

#menu ul {
margin: 0;
padding: 0;
list-style: none;
}

#menu ul li {
padding: 10px 0 0;
margin: 0;
display: block;
height: 36px;
background: url(images/menu_divider.jpg) left bottom no-repeat
}

#menu ul li a {
display: block;
height: 36px;
padding: 0 0 0 30px;
font-size: 16px;
color: #444444; 
text-decoration: none;
font-weight: normal;
outline: none;
border: none;
}

#menu ul li a:hover, #menu ul .current {
padding-left: 35px;
color: #777700;
background: url(images/softballmenu.png) left top no-repeat
}

/* end of menu */


#content {
float: right;
width: 610px;
}

.content_box {
padding-bottom: 30px;
margin-bottom: 30px;
background: url(images/horizontal_divider.jpg) center bottom no-repeat;
}

Answer 1

将属性溢出添加到您的包装器中，否则浏览器无法计算浮动元素的大小，因此背景看起来“搞砸了”

#wrapper {
    width: 984px;
    margin: 0 auto;
    /*background: url(images/headerimage.jpg) center top no-repeat;*/    
    overflow: hidden;
}

Answer 2

将内容的浮动更改为左侧。

最后有专栏工作，但弄乱了我的背景？

2 个答案: