콘텐츠 옆에 사이드 바를 배치하는 방법은 무엇입니까?

콘텐츠 옆에 사이드 바를 배치하고 싶지만 바닥 글은 계속 올라갑니다. 나는 콘텐츠와 사이드 바 모두에서 usign float를 시도했으나 작동하지 않았습니다. 나는 이것에 관한 새로운 약간의 Im 그래서 그것을 고치는 방법을 모른다.콘텐츠 옆에 사이드 바를 배치하는 방법은 무엇입니까?

도와주세요?

<!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/) - 동적 레이아웃에 적합합니다. [라이브 데모] (http : // codepen .io/HugoGiraudel/pen/qIAwr) – jbutler483

@ jbutler483 나는 [browser support] (http://caniuse.com/#search=flex)가 향상 될 때까지 flexbox를 사용하지 않는다. –

정말 잘 지원되는 것 같습니다. @DanielApt – jbutler483

시도 난 당신이 콘텐츠를 1000px의 폭을 준 발견

출처

2014-12-05 10:14:15 Heah

-2

당신의 CSS에서 footer {clear: left;}을 추가 할 수 있습니다. 그것은 사이드 바가 옆에 맞지 않을 것이라는 것을 거의 확신합니다. 플로트를 사용

출처

2014-12-05 10:20:02

보관할 것 :이 일을해야

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

이 추가 컨텐츠 및 사이드 바 및 바닥 글 바로 모두 떠났다.

출처

2014-12-05 10:59:49 Alin

콘텐츠 옆에 사이드 바를 배치하는 방법은 무엇입니까?

답변

관련 문제