Проблемка в адаптивном дизайне, гуглил-не нашел.

[Березовский]

Ситуация проста до безобразия...

При чем сделал уже несколько адаптивных сайтов, но такой проблемы не было...

Есть шапка, ширина 80%, в шапке три колонки например по 33% шириной.

в итоге из-за такой шапки добавляется к сайту горизонтальная полоса прокрутки :-) в чем прикол кто может объяснить?

Заранее благодарю.

код - шапки

#header{
position:relative;
margin: 0 10%;
width:80%;
}

код колонок -

#col_left{
float:left;
width:50%;
height:auto;
}
#col_center{
float:left;
width:20%;
height:auto;
}
#col_right{
float:left;
width:30%;
height:auto;
}

как видите все просто... в чем может быть загвоздка не могу понять) измучался весь)

[Switch74]

у меня в хроме все норм

[npofopr]

А почему вы решили, что это из-за шапки?

И не лучше выкладывать код на http://jsfiddle.net ?

[Березовский]

Потому что я пробовал систематически удалять блоки) в итоге полоса пропала после удаления вышеуказанной шапки) кстати внутри колонок тоже есть блоки размером 100% форма контактов, лого, поиск.

[Николя223]

насколько я помню, когда вы прописываете элементу position, то дочерние элементы будут уже от него отсчитывать процентную ширину а не от body. и так далее

вы правда, выложите на ресурс указанный выше весь код. чтобы понятнее были масштабы задачи...

[Березовский]

Ну как-то так ребята http://jsfiddle.net/h8kmK/

[Switch74]

<img src="http://berezovsky.org.ua/max/wp-content/themes/perepoloh/images/bgforma.png">

Вот причина всех бед, overflow:hidden наверно для родителя нужен

[Березовский]

<img src="http://berezovsky.org.ua/max/wp-content/themes/perepoloh/images/bgforma.png">

Вот причина всех бед, overflow:hidden наверно для родителя нужен

для header? я ставил...обрезает колонки... особенно при изменении размеров окна браузера...

[Березовский]

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

[yuck]

.home_form > img{

max-width:100%

}

или overflow: hidden для правой колонки

[Switch74]

там размер страницы не на все 100% идет как я понимаю, мне кажется этот фончик лучше вынести из правой колонки и сделать его отдельно

[Березовский]

.home_form > img{

max-width:100%

}

или overflow: hidden для правой колонки

.home_form > img все-равно полоса есть) так что ставлю для шапки overflow

там размер страницы не на все 100% идет как я понимаю, мне кажется этот фончик лучше вынести из правой колонки и сделать его отдельно

Так мне надо чтобы он шел вместе с формой) как я его могу выносить за блок формы? при изменении размеров браузера.

[sarhov]

очевидно проблема из за картинки, но если ему поставит

max-width:100%;
height:auto; 

картинка становится респонсив и уменшается под размер родителья,

кстати надо бы еще #header дать

#header:after{
    clear:both;
    content:"";
    display:block;
    width: 100%;
}

так как внутри есть флоат элементи,

проблема в размери картники, надо подумать