2012-02-23 2 views
0

У меня есть некоторые проблемы с css, содержимое торчит из границ. Ожидается, что будет иметь полосу прокрутки, а не скрытое переполнение, но границы. Пожалуйста, помогите.Границы получают смещение при изменении размера

Вот код, который отражает мою структуру CSS:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<style> 

body{ 
border:3px solid #FFAD17; 
background-color:#FFF; 
border-radius:7px; 
font:9.5pt Tahoma; 
margin:0px; 
padding:0px; 
} 
html { 
margin:0px; 
padding:0px; 
} 

div.header{ 
    background-color:yellow; 
    background-position:top; 
    padding: 3px; 
    } 
div.wrapper{ 
    float:left; 
    } 
div.context_wrapper{ 
    margin-left:158px; 
    padding: 3px; 
    } 
div.context{ 
    float:left; 
    } 
div.menu{ 
    text-align:center; 
    padding: 3px; 
    width:140px; 
    float:left;  
    } 
div.footer{ 
    background-color:yellow; 
    background-position:bottom; 
    width:auto; 
    padding: 3px; 
    clear:both;  
    } 
</style> 
</head> 

<body> 
<div class="header">Head</div> 
<div class="wrapper"> 
    <div class="menu">Menu</div> 
    <div class="context_wrapper"> 
     <div class="context"> 
      ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent 
     </div> 
    </div> 
</div> 
<div class="footer">Foot</div> 
</body> 

</html> 

a busy cat http://img215.imageshack.us/img215/6065/20120223132157.png

+0

Любые идеи парней? – Anonymous

ответ

0

Я не стилизовать элемент тела, как это было <div> элемент, лучше сделать новую обертку. Кроме того, из вашего вопроса, который я собираю, вы ищете что-то вроде этого: http://jsfiddle.net/SQDXt/

В принципе, это добавляет обертку div с полосой прокрутки, когда ваш контент превышает размер обертки. Кроме того, верхний и нижний колонтитулы находятся во второй оболочке, чтобы охватить всю ширину, когда содержимое превышает ширину первой обертки.

+0

Ничего себе, это выглядит классно! Я проверю это сразу, есть одно небольшое возражение: желтые полосы (например, нижний колонтитул, заголовок) должны пройти всю ширину. – Anonymous

+0

Я попробую и применим к моим стилям. – Anonymous

+0

Полосы в порядке, когда я обратился к моему коду, всего за секунду, я применил его ко всему сайту и посмотрю фактический результат. – Anonymous

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