网站浮动内容容器问题

我正在构建一个模板来练习我的技能，但是我并肩担负着浮动列的巨大问题。（div的名称：.sidebar和.content）我希望他们两个都是左边的，并排坐在一起。在这里我会提供我的代码，直到这一刻。有什么建议么？网站浮动内容容器问题

@font-face { 
 
    font-family: "myriadpro"; 
 
    src: url("../fonts/myriad-pro-bold-condensed-webfont.eot"); 
 
    src: url("../fonts/myriad-pro-bold-condensed-webfont.eot?#iefix") format("embedded-opentype"), 
 
     url("../fonts/myriad-pro-bold-condensed-webfont.woff2") format("woff2"), 
 
     url("../fonts/myriad-pro-bold-condensed-webfont.woff") format("woff"), 
 
     url("../fonts/myriad-pro-bold-condensed-webfont.svg#myriadpro") format("svg"); 
 
    font-weight: bold; 
 
    font-style: bold; 
 
} 
 

 
@font-face { 
 
\t font-family: "myriadpro_regular"; 
 
\t src: url("../fonts/myriadproregular.eot"); 
 
\t src: local("myriadproregular"), url("../fonts/myriadproregular.woff") format("woff"), url("../fonts/myriadproregular.ttf") format("truetype"); 
 
\t font-weight: 300; 
 
\t font-style: normal; 
 
} 
 

 
* { margin: 0px; padding: 0px; outline: 0; box-sizing: border-box; } 
 

 
body, html { height: 100%; } 
 
body { 
 
\t font-family: "Bentham", serif, "Arial", sans-serif; 
 
\t font-size: 14px; 
 
\t line-height: 1.667; 
 
\t background: #f1f1f1; 
 
\t color: #3f3f3f; 
 
} 
 

 
/* Main Template Settings */ 
 

 
.container { width: 960px; margin: 0 auto; } 
 
.header { margin-top: 8px; } 
 
.main { background: #fff; height: 100%; overflow: hidden; } 
 
.sidebar { display: block; width: 206px; padding: 6px 14px 0 6px; } 
 
.content { float: left; margin-left: 206px; padding: 9px 12px; overflow: hidden; } 
 
.sidebar:after, 
 
.clearfix:after { content: ''; display: table; clear: both; font-size: 0; line-height: 0; height: 0; } 
 

 
/* Header CSS Styles */ 
 

 
.logo { width: 353px; float: left; margin: 28px 0 18px 6px; } 
 
.logo img { max-width: 100%; height: auto; } 
 

 
.customer-nav ul { float: right; list-style: none; } 
 
.customer-nav ul li { display: inline-block; margin-right: 12px; } 
 
.customer-nav ul li a { font-family: "myriadpro_regular", sans-serif; font-size: 13px; color: #8e8e8e; text-decoration: none; } 
 
.customer-nav ul li a:hover { color: #bebebe; } 
 

 
.search:after, 
 
.clearfix:after { content: ''; display: table; clear: both; font-size: 0; line-height: 0; height: 0; } 
 
.search { position: relative; top: 63px; z-index: 2; } 
 
.search-field { position: absolute; left: 75.6%; padding: 7px; background: #5a9abe; border-radius: 0; border-top-left-radius: 5px; border-top-right-radius: 5px; } 
 

 
.field { width: 221px; border: 0; border-top: 1px solid #7f7f7f; border-left: 1px solid #7f7f7f; border-radius: 3px; padding: 7px 10px 5px 35px; color: #a0a0a3; font-style: italic; } 
 

 
.icon { position: relative; } 
 
.icon-magnifier:after { content: ''; position: absolute; top: 0; left:8px; width: 12px; height: 16px; background: url(../images/magnifier.png) no-repeat 0 0; } 
 
.shadow-line { width: 2px; position: absolute; top: 9px; left: 34px; } 
 
.shadow-line img { max-width: 100%; height: auto; } 
 

 
.main-nav { min-width: 100%; height: 48px; position: relative; z-index: 999999; } 
 
.main-nav { 
 
\t background: rgb(149,197,222); 
 
    background: -moz-linear-gradient(top, rgba(149,197,222,1) 0%, rgba(141,188,212,1) 100%); 
 
    background: -webkit-linear-gradient(top, rgba(149,197,222,1) 0%,rgba(141,188,212,1) 100%); 
 
    background: linear-gradient(to bottom, rgba(149,197,222,1) 0%,rgba(141,188,212,1) 100%); 
 
} 
 

 
.navigation { border-top: 7px solid #5a9abe; } 
 
.navigation ul { list-style: none; margin: 9px 0 0 18px; } 
 
.navigation ul li { display: inline-block; } 
 
.navigation li a { font-family: "Bentham", serif; font-style: normal; font-weight: 400; font-size: 15px; color: #fff; text-decoration: none; text-transform: uppercase; /* SOME PADDING */ } 
 
.navigation ul li a:hover { color: #528bac; } 
 
.navigation ul li + li:before { content: ''; border-right: 1px solid #74accb; margin: 0 15px 0 15px; } 
 

 
/* Sidebar CSS Styles */ 
 

 
.widgeds { width: 200px; list-style: none; } 
 

 
.widget h3 { font-family: "Bentham", serif; font-size: 14px; font-style: normal; text-transform: uppercase; padding: 9px 12px 7px 12px; margin-bottom: 6px; } 
 
.widget h3 { 
 
\t background: rgb(238,238,238); 
 
    background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(222,222,222,1) 100%); 
 
    background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(222,222,222,1) 100%); 
 
    background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(222,222,222,1) 100%); 
 
} 
 
.widget { background: #fafafa; border: 1px solid #e2e2e2; margin-bottom: 6px; } 
 
.widget ul { list-style: none; padding-bottom: 2px; } 
 
.widget ul li { margin-bottom: 1px; } 
 
.widget ul li a { display: block; font-family: "myriadproregular", sans-serif; font-size: 14px; padding: 0px 11px 2px 12px; text-decoration: none; color: #3f3f3f; line-height: 25px; } 
 
.widget ul li a:hover { color: #528bac; } 
 

 
.product-image { display: block; width: 162px; border: 1px solid #bebebe; } 
 
.product-image img { max-width: 100%; height: auto; } 
 
.product-image:hover { opacity: 0.8; } 
 

 
.title { font-family: "myriadproregular", sans-serif; font-size: 14px; padding: 0px 0px 0px 0px; } 
 
.price { text-align: center; font-family: "myriadproregular", sans-serif; font-size: 14px; color: #528bac; padding: 0 4px 12px 4px; } 
 

 
.btn { display: inline-block; padding: 3px 12px 1px 12px; color: #fff; border: 0; border-radius: 4px; border-bottom: 1px solid #336990; text-decoration: none; } 
 
.btn-details { 
 
\t background: rgb(99,157,197); 
 
    background: -moz-linear-gradient(top, rgba(99,157,197,1) 0%, rgba(61,125,171,1) 100%); 
 
    background: -webkit-linear-gradient(top, rgba(99,157,197,1) 0%,rgba(61,125,171,1) 100%); 
 
    background: linear-gradient(to bottom, rgba(99,157,197,1) 0%,rgba(61,125,171,1) 100%); 
 
} 
 

 
.view-featured { font-family: "myriadproregular", sans-serif; font-size: 12px; text-align: center; padding: 0 5px 7px 8px; } 
 
.view-featured a { text-decoration: none; color: #3f3f3f; } 
 
.view-featured a:hover { color: #528bac; } 
 

 
/* Content CSS Styles */ 
 

 
.product-labels { font-family: "myriadproregular", sans-serif; } 
 
.product-labels h1 { font-size: 12px; color: #528bac; text-transform: uppercase; padding-bottom: 2px; } 
 
.product-labels p { float:left; font-size: 11px; color: #b2b2b2; padding-left: 2px; margin-bottom: 22px; letter-spacing: 0.03em; } 
 

 
.product-list { text-align: justify; float: left; } 
 
.item { text-align: center; } 
 

 

 
.product-list ul { margin-right: -22px; } 
 
.product-list ul li { list-style: none; float: left; width: 162px; margin: 0 26px 47px 0; } 
 
.product-list ul li img { max-width: 100%; height: auto; border: 1px solid #b7b7b7; } 
 
.product-list ul li a { color: #fff; } 
 
.product-list ul li a:hover { opacity: 0.8; } 
 

 
.footer { background: #5d9dc0; padding: 25px 0 23px 0; text-align: center; color: #fff; font-family: "Arial", sans-serif; font-size: 12px; border-top: 1px solid #e2e2e2; } 
 
.footer { clear: both; } 
 

 
::-webkit-input-placeholder { color: #a0a0a3; font-style: italic; } 
 
:-moz-placeholder { color: #a0a0a3; font-style: italic; } 
 
::-moz-placeholder { color: #a0a0a3; font-style: italic; } 
 
:-ms-input-placeholder { color: #a0a0a3; font-style: italic; } 
 

 

 
@media (max-width: 959px) { 
 
    .container { width: 768px; padding: 0 20px; } 
 
    .footer { background: red; } 
 
} 
 

 
@media (max-width: 767px) { 
 
    .container { width: 100%; padding: 0 15px; } 
 
    .footer { background: green; } 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
\t <meta charset="UTF-8"> 
 
\t <title>Bedding Store Template</title> 
 
\t <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1, user-scalable=0"> 
 
\t <link href="https://fonts.googleapis.com/css?family=Bentham" rel="stylesheet"> 
 
\t <link rel="stylesheet" href="css/style.css"> 
 
</head> 
 
<body> 
 
\t <div class="container"> 
 
\t \t <header class="header"> 
 
\t \t \t <div class="logo"> 
 
\t \t \t \t <img src="images/logo.png" width="353" height="46" title="someText" alt="someText"> 
 
\t \t \t </div><!-- /.logo --> 
 
\t \t \t <nav class="customer-nav"> 
 
\t \t \t \t <ul> 
 
\t \t \t \t \t <li><a href="#">Login</a></li> 
 
\t \t \t \t \t <li><a href="#">My Account</a></li> 
 
\t \t \t \t \t <li><a href="#">View Cart</a></li> 
 
\t \t \t \t \t <li><a href="#">Checkout</a></li> 
 
\t \t \t \t </ul> 
 
\t \t \t </nav><!-- /.customer-nav --> 
 
\t \t \t <div class="search"> 
 
\t \t \t \t <div class="search-field"> 
 
\t \t \t \t \t <a href="#" class="icon icon-magnifier"></a> 
 
\t \t \t \t \t <img src="images/shadow-line.png" width="2" height="26" title="someText" alt="someText" class="shadow-line"> 
 
\t \t \t \t \t <input type="search" name="search" id="search-input" placeholder="Search" class="field"> 
 
\t \t \t \t </div><!-- /.search-field --> 
 
\t \t \t </div><!-- /.search-field --> 
 
\t \t \t <div class="main-nav"> 
 
\t \t \t \t <nav class="navigation"> 
 
\t \t \t \t \t <ul> 
 
\t \t \t \t \t \t <li><a href="#">home</a></li> 
 
\t \t \t \t \t \t <li><a href="#">new products</a></li> 
 
\t \t \t \t \t \t <li><a href="#">specials</a></li> 
 
\t \t \t \t \t \t <li><a href="#">my account</a></li> 
 
\t \t \t \t \t \t <li><a href="#">about us</a></li> 
 
\t \t \t \t \t \t <li><a href="#">blog</a></li> 
 
\t \t \t \t \t \t <li><a href="#">contact us</a></li> 
 
\t \t \t \t \t </ul> 
 
\t \t \t \t </nav><!-- /.nav --> 
 
\t \t \t </div><!-- /.main-nav --> 
 
\t \t </header><!-- /.header --> 
 
\t \t <main class="main"> 
 
\t \t \t <aside class="sidebar"> 
 
\t \t \t \t <ul class="widgeds"> 
 
\t \t \t \t \t <li class="widget"> 
 
\t \t \t \t \t \t <h3>Shop by categories</h3> 
 

 
\t \t \t \t \t \t <ul> 
 
\t \t \t \t \t \t \t <li><a href="#">Comforters</a></li> 
 
\t \t \t \t \t \t \t <li><a href="#">Sheets</a></li> 
 
\t \t \t \t \t \t \t <li><a href="#">Qults &amp; Bed Covers</a></li> 
 
\t \t \t \t \t \t \t <li><a href="#">Pillows &amp; Bedding Basics</a></li> 
 
\t \t \t \t \t \t \t <li><a href="#">Bath Shop</a></li> 
 
\t \t \t \t \t \t \t <li><a href="#">Gifts</a></li> 
 
\t \t \t \t \t \t \t <li><a href="#">Clearance</a></li> 
 
\t \t \t \t \t \t </ul> 
 
\t \t \t \t \t </li><!-- /.widget --> 
 

 
\t \t \t \t \t <li class="widget"> 
 
\t \t \t \t \t \t <h3>more information</h3> 
 

 
\t \t \t \t \t \t <ul> 
 
\t \t \t \t \t \t \t <li><a href="#">About Us</a></li> 
 
\t \t \t \t \t \t \t <li><a href="#">Shipping Information</a></li> 
 
\t \t \t \t \t \t \t <li><a href="#">Return Policy</a></li> 
 
\t \t \t \t \t \t \t <li><a href="#">FAQ</a></li> 
 
\t \t \t \t \t \t \t <li><a href="#">Contact Us</a></li> 
 
\t \t \t \t \t \t </ul> 
 
\t \t \t \t \t </li><!-- /.widget --> 
 
\t \t \t \t \t 
 
\t \t \t \t \t <li class="widget"> 
 
\t \t \t \t \t \t <h3>featured products</h3> 
 
\t \t \t \t \t \t \t <div class="item"> 
 
\t \t \t \t \t \t \t \t <a href="#" class="product-image"><img src="images/la-crosse-down-comforter.jpg" width="162" height="162" title="someText" alt="someText"></a> 
 
\t \t \t \t \t \t \t \t <p class="title">La Crosse&copy; Down Comforter</p> 
 
\t \t \t \t \t \t \t \t <!-- /.title --> 
 
\t \t \t \t \t \t \t \t <p class="price">&dollar;197.00</p><!-- /.price --> 
 
\t \t \t \t \t \t \t \t <a href="#" class="btn btn-details">Details</a> 
 
\t \t \t \t \t \t \t </div><!-- /.item --> 
 
\t \t \t \t \t \t <p class="view-featured"><a href="">View All Featured</a></p> 
 
\t \t \t \t \t </li><!-- /.widget --> 
 
\t \t \t \t </ul><!-- /.widgeds --> 
 
\t \t \t </aside><!-- /.sidebar --> 
 
\t \t \t 
 
\t \t \t <div class="content"> 
 
\t \t \t \t <div class="product-labels"> 
 
\t \t \t \t \t <h1>products > comforters</h1> 
 
\t \t \t \t \t <p>Displaying 1-12 of 12 Product(s)</p> 
 
\t \t \t \t </div><!-- /.products-label --> 
 
\t \t \t \t <div class="product-list"> 
 
\t \t \t \t \t <ul> 
 
\t \t \t \t \t \t <li> 
 
\t \t \t \t \t \t \t <div class="item"> 
 
\t \t \t \t \t \t \t \t <a href="#"><img src="images/white-bay-supersize.jpg" width="162" height="162" title="someText" alt="someText" class="product-example"></a> 
 
\t \t \t \t \t \t \t \t <p class="title">White Bay&copy; Supersize</p> 
 
\t \t \t \t \t \t \t \t <!-- /.title --> 
 
\t \t \t \t \t \t \t \t <p class="price">&dollar;339.00</p><!-- /.price --> 
 
\t \t \t \t \t \t \t \t <a href="#" class="btn btn-details">Details</a> 
 
\t \t \t \t \t \t \t </div><!-- /.item --> 
 
\t \t \t \t \t \t </li> 
 
\t \t \t \t \t \t <li> 
 
\t \t \t \t \t \t \t <div class="item"> 
 
\t \t \t \t \t \t \t \t <a href="#"><img src="images/supersize-baffled-square.jpg" width="162" height="162" title="someText" alt="someText" class="product-example"></a> 
 
\t \t \t \t \t \t \t \t <p class="title">Supersize Baffled Square</p> 
 
\t \t \t \t \t \t \t \t <!-- /.title --> 
 
\t \t \t \t \t \t \t \t <p class="price">&dollar;229.00</p><!-- /.price --> 
 
\t \t \t \t \t \t \t \t <a href="#" class="btn btn-details">Details</a> 
 
\t \t \t \t \t \t \t </div><!-- /.item --> 
 
\t \t \t \t \t \t </li> 
 
\t \t \t \t \t \t <li> 
 
\t \t \t \t \t \t \t <div class="item"> 
 
\t \t \t \t \t \t \t \t <a href="#"><img src="images/framework-tcs-down.jpg" width="162" height="162" title="someText" alt="someText" class="product-example"></a> 
 
\t \t \t \t \t \t \t \t <p class="title">Framework TCS&copy; Down</p> 
 
\t \t \t \t \t \t \t \t <!-- /.title --> 
 
\t \t \t \t \t \t \t \t <p class="price">&dollar;219.00</p><!-- /.price --> 
 
\t \t \t \t \t \t \t \t <a href="#" class="btn btn-details">Details</a> 
 
\t \t \t \t \t \t \t </div><!-- /.item --> 
 
\t \t \t \t \t \t </li> 
 
\t \t \t \t \t \t <li> 
 
\t \t \t \t \t \t \t <div class="item"> 
 
\t \t \t \t \t \t \t \t <a href="#"><img src="images/st-tropez-solid.jpg" width="162" height="162" title="someText" alt="someText" class="product-example"></a> 
 
\t \t \t \t \t \t \t \t <p class="title">St. Tropez&copy; Solid</p> 
 
\t \t \t \t \t \t \t \t <!-- /.title --> 
 
\t \t \t \t \t \t \t \t <p class="price">&dollar;114.00</p><!-- /.price --> 
 
\t \t \t \t \t \t \t \t <a href="#" class="btn btn-details">Details</a> 
 
\t \t \t \t \t \t \t </div><!-- /.item --> 
 
\t \t \t \t \t \t </li> 
 
\t \t \t \t \t \t <li> 
 
\t \t \t \t \t \t \t <div class="item"> 
 
\t \t \t \t \t \t \t \t <a href="#" class="product-image"><img src="images/legends-damask-baffled.jpg" width="162" height="162" title="someText" alt="someText"></a> 
 
\t \t \t \t \t \t \t \t <p class="title">Legends&copy; Damask Baffled</p> 
 
\t \t \t \t \t \t \t \t <!-- /.title --> 
 
\t \t \t \t \t \t \t \t <p class="price">&dollar;509.00</p><!-- /.price --> 
 
\t \t \t \t \t \t \t \t <a href="#" class="btn btn-details">Details</a> 
 
\t \t \t \t \t \t \t </div><!-- /.item --> 
 
\t \t \t \t \t \t </li> 
 
\t \t \t \t \t \t <li> 
 
\t \t \t \t \t \t \t <div class="item"> 
 
\t \t \t \t \t \t \t \t <a href="#"><img src="images/diamond-supersize.jpg" width="162" height="162" title="someText" alt="someText" class="product-example"></a> 
 
\t \t \t \t \t \t \t \t <p class="title">Diamond&copy; Supersize</p> 
 
\t \t \t \t \t \t \t \t <!-- /.title --> 
 
\t \t \t \t \t \t \t \t <p class="price">&dollar;259.00</p><!-- /.price --> 
 
\t \t \t \t \t \t \t \t <a href="#" class="btn btn-details">Details</a> 
 
\t \t \t \t \t \t \t </div><!-- /.item --> 
 
\t \t \t \t \t \t </li> 
 
\t \t \t \t \t \t <li> 
 
\t \t \t \t \t \t \t <div class="item"> 
 
\t \t \t \t \t \t \t \t <a href="#"><img src="images/la-crosse-supersize.jpg" width="162" height="162" title="someText" alt="someText" class="product-example"></a> 
 
\t \t \t \t \t \t \t \t <p class="title">La Crosse&copy; Supersize</p> 
 
\t \t \t \t \t \t \t \t <!-- /.title --> 
 
\t \t \t \t \t \t \t \t <p class="price">&dollar;143.00</p><!-- /.price --> 
 
\t \t \t \t \t \t \t \t <a href="#" class="btn btn-details">Details</a> 
 
\t \t \t \t \t \t \t </div><!-- /.item --> 
 
\t \t \t \t \t \t </li> 
 
\t \t \t \t \t \t <li> 
 
\t \t \t \t \t \t \t <div class="item"> 
 
\t \t \t \t \t \t \t \t <a href="#"><img src="images/white-bay-midsize.jpg" width="162" height="162" title="someText" alt="someText" class="product-example"></a> 
 
\t \t \t \t \t \t \t \t <p class="title">White Bay&copy; Midsize</p> 
 
\t \t \t \t \t \t \t \t <!-- /.title --> 
 
\t \t \t \t \t \t \t \t <p class="price">&dollar;319.00</p><!-- /.price --> 
 
\t \t \t \t \t \t \t \t <a href="#" class="btn btn-details">Details</a> 
 
\t \t \t \t \t \t \t </div><!-- /.item --> 
 
\t \t \t \t \t \t </li> 
 
\t \t \t \t \t \t <li> 
 
\t \t \t \t \t \t \t <div class="item"> 
 
\t \t \t \t \t \t \t \t <a href="#"><img src="images/st.tropez-stripe.jpg" width="162" height="162" title="someText" alt="someText" class="product-example"></a> 
 
\t \t \t \t \t \t \t \t <p class="title">St. Tropez&copy; Stripe</p> 
 
\t \t \t \t \t \t \t \t <!-- /.title --> 
 
\t \t \t \t \t \t \t \t <p class="price">&dollar;114.00</p><!-- /.price --> 
 
\t \t \t \t \t \t \t \t <a href="#" class="btn btn-details">Details</a> 
 
\t \t \t \t \t \t \t </div><!-- /.item --> 
 
\t \t \t \t \t \t </li> 
 
\t \t \t \t \t \t <li> 
 
\t \t \t \t \t \t \t <div class="item"> 
 
\t \t \t \t \t \t \t \t <a href="#"><img src="images/legends-imperial.jpg" width="162" height="162" title="someText" alt="someText" class="product-example"></a> 
 
\t \t \t \t \t \t \t \t <p class="title">Legends&copy; Imperial</p> 
 
\t \t \t \t \t \t \t \t <!-- /.title --> 
 
\t \t \t \t \t \t \t \t <p class="price">&dollar;820.00</p><!-- /.price --> 
 
\t \t \t \t \t \t \t \t <a href="#" class="btn btn-details">Details</a> 
 
\t \t \t \t \t \t \t </div><!-- /.item --> 
 
\t \t \t \t \t \t </li> 
 
\t \t \t \t \t \t <li> 
 
\t \t \t \t \t \t \t <div class="item"> 
 
\t \t \t \t \t \t \t \t <a href="#"><img src="images/baffled-supersize-square.jpg" width="162" height="162" title="someText" alt="someText" class="product-example"></a> 
 
\t \t \t \t \t \t \t \t <p class="title">Supersize Baffled Square</p> 
 
\t \t \t \t \t \t \t \t <!-- /.title --> 
 
\t \t \t \t \t \t \t \t <p class="price">&dollar;199.00</p><!-- /.price --> 
 
\t \t \t \t \t \t \t \t <a href="#" class="btn btn-details">Details</a> 
 
\t \t \t \t \t \t \t </div><!-- /.item --> 
 
\t \t \t \t \t \t </li> 
 
\t \t \t \t \t \t <li> 
 
\t \t \t \t \t \t \t <div class="item"> 
 
\t \t \t \t \t \t \t \t <a href="#"><img src="images/greek-key-supersize.jpg" width="162" height="162" title="someText" alt="someText" class="product-example"></a> 
 
\t \t \t \t \t \t \t \t <p class="title">Greek Key&trade; Supersize</p> 
 
\t \t \t \t \t \t \t \t <!-- /.title --> 
 
\t \t \t \t \t \t \t \t <p class="price">&dollar;159.00</p><!-- /.price --> 
 
\t \t \t \t \t \t \t \t <a href="#" class="btn btn-details">Details</a> 
 
\t \t \t \t \t \t \t </div><!-- /.item --> 
 
\t \t \t \t \t \t </li> 
 
\t \t \t \t \t </ul> 
 
\t \t \t \t </div><!-- /.gallery-container --> 
 
\t \t \t </div><!-- /.content --> 
 
\t \t \t <footer class="footer"> 
 
\t \t \t \t <p> 2011, Bedding Store - All Rights Reserved. - CoreCommerce Ecommerce Software &amp; Shopping Cart Software</p> 
 
\t \t \t </footer><!-- /.footer --> 
 
\t \t </main><!-- /.main --> 
 
\t </div><!-- /.container --> 
 
</body> 
 
</html>

来源

2016-10-15 thedivkiller

添加此CSS

.sidebar { 
    display: block; 
    float: left; 
    padding: 6px 14px 0 6px; 
    width: 206px; 
} 
.content { 
    float: left; 
    /*margin-left: 206px;*//*Remove this*/ 
    overflow: hidden; 
    padding: 9px 12px; 
    width: calc(100% - 206px); 
}

来源

2016-10-15 10:09:26

给每个类固定宽度，使它们都浮离开。它会工作

来源

2016-10-15 10:10:06

网站浮动内容容器问题

回答

相关问题