CSS Float свойство

Мой HTML до сих порCSS Float свойство

<!DOCTYPE html> 
<html> 
<head> 
<title>Home</title> 
<meta charset="UTF-8"> 
<style type="text/css" title="currentStyle" media="all">@import url(css/general.css); 
</style> 
</head> 

<body> 
<div id="container"> 
<div id="header"></div> 
<div id="line"></div> 
<div id="navigation"> 
    <ul> 
     <li><a href="#">TV Shows</a></li> 
      <ul> 
       <li><a href="#">The Walking Dead</a></li> 
       <li><a href="#">Grimm</a></li> 
      </ul> 
     <li><a href="#">Movies</a> 
      <ul> 
       <li><a href="#">Action</a> 
       <li><a href="#">Comedy</a></li> 
       <li><a href="#">Thriller</a></li> 
      </ul> 
     </ul> 
    </div> 
<div id="content"> 
    <p>some text blablablaba</p> 
</div> 
<div id="footer"></div> 
</div> 
</body> 
</html>

Мой CSS

#container 
{ 
border: 1px solid black; 
width:95%; 
height: 800px; 
margin: 0 auto; 
} 
#line 
{ 
border: 1px solid black; 
position: relative; 
top: 100px; 
} 

#header 
{ 
background: url(../header.jpg) no-repeat; 
width:150px; 
height:150px; 
float: left; 
position: relative; 
top: 50px; 
left: 100px; 
border: 1px solid black; 
z-index: 30; 

} 

#navigation 
{ 
position: relative; 
float:left; 
top: 270px; 
width: auto; 
height: auto; 
border: 1px solid black; 
} 

#content 
{ 
float:right; 
top: 270px; 
width: auto; 
height: auto; 
border: 1px solid black; 
}

Мой вопрос: почему мое содержание коробки, если я плавать его вправо или влево, оставаясь в верхней части страницы? что я читал на поплавке, он должен заполнить пространство рядом с моей навигацией. (так как моя линия div распространяется по странице.) Я хочу, чтобы мой контент находился в той же позиции рядом с моей навигацией.

(. Пс не стайлинг пока обычная раскладка атм)

EDIT: редактировать свою ошибку класса = "содержание" в ид = проблема "содержание" остается

источник

2015-03-22 Patrick Hunter

вы использовали

#content 
{ 
    ... 
}

для class='content'!?

вы должны использовать .content

и установить position: relative; для .content

jsfiddle

источник

2015-03-22 15:21:55 ashkufaraz

Im извините, чтобы занять свое время с этой глупой ошибкой. я исправил это, изменив мой hmtl на 'id =" content "' , проблема все еще остается, хотя она находится на самой верхней части моей страницы, а не рядом с навигацией –

ваш приветствие;). position position: relative для content.http: //jsfiddle.net/8bz9swpg/ – ashkufaraz

CSS Float свойство

ответ

Смежные вопросы