2012-02-23 11 views
0

Я занимаюсь разработкой страницы PHP/HTML5/CSS3 и столкнулся с проблемой. Я как-то отлично работал, а затем добавил код, внес некоторые изменения и сломал его.CSS 100% Width Broken

Концепция заключалась в том, что несколько частей страницы будут иметь ширину 100%, но с предопределенными высотами. Теперь, однако, при ширине: 100% пробегает всю ширину, менее 15-20 пикселей (~ 1%). Он имеет свойства CSS стилей, таких как:

html { 
width: 100%; 
} 

body{ 
background-color:#fbf9ec; 
font-family:"Times New Roman", Times, serif; 
width:100%; 
} 


#upperContainer{ 
height: 100px; 
width: 875px; 
margin: 0 auto; 
position: relative; 
} 

#topLogo{ 
width: 250px; 
height:75px; 
background-image:url(../images/logo.png) 
} 

#nav{ 
background-image:url(../images/nav-bg.png); 
height: 32px; 
width: 100%; 
margin-left:-10px; 
background-repeat:repeat-x; 
} 

#featuredContent{ 
height: 336px; 
width: 100%; 
margin-left:-12px; 
background-image:url(../images/featured-bg.png); 
} 

#sliderA{ 
background: #3a7c38; 
height: 326px; 
width: 873px; 
margin: 0 auto; 
padding: 10px 0 0 0; 
border:1px #353f35; 
border-right-style:solid; 
border-left-style:solid; 
position: relative; 
} 

Любые мысли?

+1

Я думаю, вам нужно будет показать нам код разметки – Vitamin

+2

Идея не видя HTML. Попробуйте уменьшить это до абсолютного минимума HTML и CSS, и кто-то, вероятно, сможет помочь. –

+1

Я согласен с @Vague, для его отладки, вероятно, понадобится HTML. Вы можете добавить его в [этот jsFiddle, который я создал] (http://jsfiddle.net/qWS6k/) с вашим CSS. –

ответ

1

У вас есть отрицательные левые поля. Удалите их и посмотрите, не строит ли он.

#nav{ 
    margin-left:-10px; 
} 

#featuredContent{ 
    margin-left:-12px; 
} 
+0

Мне это известно, но когда она работала, это было то, что поддерживало ее корректно. – MasonWinsauer

+1

@MasonWinsauer: Этот ответ кажется правильным для меня. Когда я удалил эти отрицательные поля в jsFiddle, это исправило выравнивание. В дополнение к этим двум отрицательным полям есть «# textWrapper», которые мне также пришлось удалить. –

+0

С отрицательными значениями удалены: http://mason.winsauer.com/floteco2/ – MasonWinsauer