如何將邊欄放在內容旁邊？

我想將我的邊欄放在我的內容旁邊，但是我的頁腳不斷向上移動。我嘗試在內容和側邊欄上使用浮點數，它無法工作。林有點新，所以我不知道如何解決它。如何將邊欄放在內容旁邊？

請幫忙？

<!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: [email protected] </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; 
}

來源

2014-12-05 madde

看看[flexbox]（http://css-tricks.com/snippets/css/a-guide-to-flexbox/） - 它非常適合動態佈局[LIVE DEMO]（http：// codepen .io/HugoGiraudel/pen/qIAwr） – jbutler483 2014-12-05 10:11:31

@ jbutler483在[瀏覽器支持]（http://caniuse.com/#search=flex）改進之前，我不會使用flexbox。 – 2014-12-05 10:33:22

我認爲它得到了很好的支持，真的。 @DanielApt – jbutler483 2014-12-05 10:35:49

嘗試添加footer {clear: left;}在你的CSS

來源

2014-12-05 10:14:15 Heah

-2

我注意到你給你的內容的1000像素的寬度。這幾乎可以確保側邊欄不會貼在旁邊。

來源

2014-12-05 10:20:02

繼續使用浮動：左爲內容和側邊欄和頁腳前右兩個補充一點：

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

這應該工作。

來源

2014-12-05 10:59:49 Alin

如何將邊欄放在內容旁邊？

回答

相關問題