0
Я создаю очень простую веб-страницу с заголовком, левым навигационным полем и некоторым контентом, а также нижний колонтитул. Для управления макетом используется CSS. Он отлично работает, если текст в моей области содержимого короток, но если длина текста слишком длинная (т. Е. Почти во всех случаях), область содержимого падает ниже поля навигации, а не сидит рядом с навигацией.Моя простая раскладка двух столбцов ломается, когда текст становится слишком длинным. Что я делаю не так?
HTML выглядит следующим образом:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB">
<head>
<title>Title Goes Here</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<!-- local style sheet -->
<link rel="stylesheet" type="text/css" href="styles/screen.css" media="screen" />
</head>
<body>
<div id="header">
<h1>The Header</h1>
</div>
<div id="wrapper">
<div id="navigation"><!-- Navigation -->
<ul>
<li><a href="#">Navigation</a></li>
<li><a href="#">Options</a></li>
<li><a href="#">Go</a></li>
<li><a href="#">Here</a></li>
</ul>
</div><!-- Navigation end -->
<div id="content"><!-- Main Content Area -->
<h2>Your Content Goes Here</h2>
<p>Whatever content you like can go here but if the text is too long it seems to
break the floating of the content and ends up below the navigation div.
This is really very annoying and I'd love to know how to fix it.</p>
</div><!-- Main Content Area end -->
</div>
<div id="footer">
<ul>
<li><a href="#">Some</a></li>
<li><a href="#">Footer</a></li>
<li><a href="#">Links</a></li>
</ul>
</div>
</body>
</html>
и CSS выглядит следующим образом:
body {
background:#000;
-webkit-background-size:1920px 1200px /* dimensions of graphic */
font-family:helvetica,arial,sans-serif;
margin:0;
padding:0;
border:0; /* This removes the border around the viewport in old versions of IE */
min-width:600px; /* Minimum width of layout - remove line if not required */
/* The min-width property does not work in old versions of Internet Explorer */
font-size:90%;
width:100%;
}
#header, #wrapper, #footer {
width:100%;
}
/* Header styles */
#header {
clear:both;
float:left;
}
/* main container that wraps the content */
#wrapper {
position:relative; /* This fixes the IE7 overflow hidden bug */
clear:both;
float:left;
overflow:hidden; /* This chops off any overhanging divs */
background:#fff; /* right column background colour */
margin-top:20px;
-moz-border-radius:25px;
border-radius:25px;
}
#content {
float:left;
position:relative;
margin-left:20px;
padding:0 0 1em 0;
}
#navigation {
float:left;
position:relative;
background:#000;
width:150px;
font-size:.9em;
margin:40px 0 0 0;
padding:0 0 1em 0;
z-index:1002;
}
#navigation li{color:#FFF;background:#000;list-style-type:none;}
#navigation a{text-decoration:none;color:#FFF;display:block;padding:5px 15px;}
#navigation li:hover{}
#navigation li:hover a{color:#FFF;display:block;background:#4f81bd;}
#navigation li:hover ul{display:block;}
#footer {
clear:both;
float:left;
font-size:.75em;
margin-top:30px;
}
#footer p {
padding:10px;
margin:0;
}
#footer ul{margin:0;padding:0;}
#footer li, #footer li a{color:#aeaeae;display:inline;padding:0 5px;}
#footer li{list-style-type:none;padding:2px 0;}
#footer li a{font-weight:normal;text-decoration:none;text-transform:none;}
#footer li a:hover{text-decoration:underline;}
h1,h2,h3,h4{color:#4f81bd;}
h1{font-size:1.6em;}
h2{font-size:1.3em;}
h3{font-size:1.2em;}
h4{font-size:1em;}
Что мне не хватает?
если ширина постоянной, то установите ширину содержимого div. см. этот рабочий пример http://jsfiddle.net/2U6bz/1/ – Valli69
Спасибо. Это работает, если я хочу исправить ширину содержимого, но, увы, я бы хотел, чтобы ширина области содержимого была гибкой. –
Вы пытались предоставить максимальную ширину вашего контента и/или процентов на основе процентов (помните, чтобы учитывать заполнение, поля и т. Д., Когда вы его разрабатываете)? – allen213