Question

我想将侧边栏放在我的内容旁边，但我的页脚不断向上移动。我尝试在内容和侧边栏上使用浮动，它不起作用。我有点新意，所以我不知道如何解决它。

请帮帮忙？

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Stillsamhetens SPA</title>
<link type="text/css" rel="stylesheet" media="screen" href="spa_screen.css" />
    <link type="text/css" rel="stylesheet" media="print" href="spa_print.css" />
    <link rel="shortcut icon" href="favicon.ico" />
</head>

<body>
 <div id="topnav">
<header>
<a href="index.html"><img src="header.png"></a>
</header>
<nav>
            <ul id="meny">
                <li><a href="behandlingskurer.html">BEHANDLINGSKURER</a></li>
                <li><a href="massage.html">MASSAGE</a></li>
                <li><a href="relax.html">RELAX</a></li>
                <li><a href="rehabilitering.html">REHABILITERING</a></li>
                <li><a href="om.html">OM OSS</a></li>
                <li><a href="kontakt.html">KONTAKT</a></li>
</ul>
</nav>
</div>


 <div id="maincontent">
    <div id="content" class="index">
        <div id="contentomoss">
        <article>
            <p>       
                contentomoss
             </p>
        </article>

        </div>  
    <div id="sidebar">    
        sidebar
    </div>
</div>
</div>


<footer>
<div id="footermain">
<div id="footertextfirst">
<strong>Stillsamhetens spa</strong></strong></br>
Öppettider: alla dagar 10-20</br>
Telefontider: alla dagar 11-18</br>
</div>
<div id="footertextmiddle">
Maila: info@stillsamhetensspa.se </br>
Privatbokning: 0470-123 45 67 </br>
Gruppbokning: 0470-123 45 66</br>
</div>
<div id="footertextlast">
Besöksadress: Ormeshaga 61</br>
Postadress: 360 51 Hovmantorp</br>
<a href="kontakt.html"><strong><font color="#FFFFFF">Hitta hit</font></strong></a></br>
</div>
</div>
</footer>

</body>
</html>

   @charset "UTF-8";
/* CSS Document */

{ 

}

#topnav  { 
width: 1000px; 
position: relative;
margin: 30px auto 0 auto;  
}

#header {  
margin: 0 auto 0 auto;
}

#meny {
margin: 0 auto 40px auto;
width: 1000px; 
text-align: center;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; 
font-weight: lighter; 
font-size: 18px;
color: black; 
text-decoration:none;
}

#maincontent {   
background-color:#F8F8F8;
}

#content { 
width: 1000px;  
margin: 0 auto 0 auto; 
}

#contentomoss { 
width: 700px;   
float: left;
background-color: red;
}

#sidebar { 
width: 200px;  
float: left;
margin-right: 50px;
background-color: green;
}

li { 
float: left; 
margin-right: 60px; 
list-style-type: none;
}

a { 
text-decoration: none; 
color: black;
}

article { 
width: 600px;
margin-top: 120px; 
}

p { 
margin-top: 120px;
}

footer { 
height: 110px;
margin: -16px auto 0 auto;  
background-color:#636363;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight:lighter; 
color: white; 
font-size: 18px;
}

#footermain { 
width: 1000px;
padding-top: 20px;
margin: 0 auto 0 auto;
background-color: blue;
}

#footertextfirst { 
width: 322px;  
float:left;
}

#footertextmiddle, #footertextlast { 
width: 323px;  
float: left;
margin-right: 10px;
}

Answer 1

尝试在您的css中添加footer {clear: left;}

Answer 2

继续使用float：left为内容和侧边栏，在页脚添加之前：

<div class="clear" style="clear:both;"></div>

这应该有用。

Answer 3

我注意到您的内容宽度为1000px。这几乎可以确保侧边栏不适合它。

如何在内容旁边放置侧边栏？

3 个答案: