Как правильней сделать эту резиновую вёрстку?

@devenge · Регистрация: 11.11.2011

Студворк — интернет-сервис помощи студентам

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

На картинке ниже показано что я примерно хочу. правый блок можно "скрывать" за браузер, если он не влезает. Как это можно сделать?

@Heleg · 10.05.2012, 18:41

ну смотри. плавающие элементы выстраиваются в линейку и значит, если один не помещается, он переходит на следующую строчку. соответственно нужно создать условия, чтобы ширина влазила в одну строку. например родителю задать min-height равный сумме ширины плавающих блоков

@gulliver · 10.05.2012, 19:04

devenge, так же может быть еще проблема с обтеканием блоков, это решается благодаря clear:both; Ну а что бы при изменении ширины окна, один из блоков не падал, то применяй min-width: (оптимально 960). Либо как посоветовал Heleg

HTML5

<div class="main">
            <div class="lbox">
        </div>
            <div class="rbox">
            </div>
            <div class="clr"> </div>
        </div>

CSS

*{ margin:0; padding:0;}
 
.main{
width:100%;
min-width:750px;
}
 
.lbox{
float:left;
width:500px;
background:blue;
height:100px;
}
 
.rbox{
float:right;
width:250px;
height:200px;
background:blue;
}
 
.clr{
clear:both;
}

@devenge · 10.05.2012, 20:03 **[ТС]**

Не получается. Вот, мне надо сделать примерно такую структуру сайта. Как правильней написать код?

HTML5

<style>
#right,#right2,#content { padding:5px }
#left       { width:200px; float:left; border:1px solid black }
#right      { overflow:hidden; border:1px solid red }
#content    { width:80%; min-width:640px; float:left; border:1px solid blue }
#right2     { width:200px; float:right; border:1px solid orange }
</style>
 
<div id="left">Левый блок</div>
<div id="right">
    <div id="content">Контент</div>
    <div id="right2">Правый блок</div>
</div>

Добавлено через 22 минуты
надо уменьшит размер окна браузера, чтобы увидеть "эффект"

@gulliver · 10.05.2012, 20:30

Так ? в сумме получается 99% т.к использую border (ему 1% если убрать border и добавить вместо 63 , 64 то есть = 100% получится все ровно.)

HTML5

<div id="main">
        
            <div class="lbox">
            <p>Левый блок</p>
            </div>
            
            <div class="cbox">
            <p>Центральный</p>
            </div>
            
            <div class="rbox">
            <p>Правый блок</p>
            </div>
        </div>

CSS

*{ margin:0; padding:0;}
 
#main{
width:100%;
/*margin:10px 0 0 10px;*/
padding:0;
min-width:960px;
}
 
.lbox{
width:18%;
height:20px;
border:1px solid black;
float:left;
margin-left:5px;
}
 
.cbox{
width:63%;
float:left;
margin:0 auto;
height:20px;
border:1px solid black;
text-align:center;
}
 
.rbox{
width:18%;
float:left;
height:20px;
border:1px solid black;
}
.clr{
clear:both;
}

@devenge · 10.05.2012, 21:04 **[ТС]**

gulliver, мне надо, чтобы левый и правый блок были фиксированными (в 200 пикселей). Ставлю им 200 пикселей, и та же ситуация

@gulliver · 10.05.2012, 21:45

Так ?

HTML5

<div id="main">
        
            <div class="lbox">
            <p>Левый блок</p>
            </div>
            
            <div class="cbox">
            <p>Центральный</p>
            </div>
            
            <div class="rbox">
            <p>Правый блок</p>
            </div>
            <div class="clr"> </div>
        </div>

CSS

*{ margin:0; padding:0;}
 
#main{
width:100%;
min-width:970px;
}
 
.lbox{
width:200px;
height:20px;
border:1px solid black;
float:left;
margin-left:2px;
}
 
.cbox{
width:560px;
float:left;
height:20px;
border:1px solid black;
text-align:center;
}
 
.rbox{
width:200px;
float:left;
height:20px;
border:1px solid black;
position:relative;
}
.clr{
clear:both;
}

@devenge · 10.05.2012, 22:05 **[ТС]**

gulliver, мне надо чтобы середина была резиновая. а блоки слева и справа фиксированными. вот всё пытаюсь, не могу понять как реализовать. =))

@gulliver · 10.05.2012, 22:33

я отправил ЛС

@devenge 9 / 9 / 2 Регистрация: 11.11.2011 Сообщений: 208
		1
	Как правильней сделать эту резиновую вёрстку? 10.05.2012, 18:34. Показов 4014. Ответов 8 Метки нет (Все метки) Мне надо, чтоб при изменении размера окна браузера, правый блок не съезжал вниз. На картинке ниже показано что я примерно хочу. правый блок можно "скрывать" за браузер, если он не влезает. Как это можно сделать? Изображения 0

@Heleg 209 / 209 / 6 Регистрация: 23.10.2011 Сообщений: 971
	10.05.2012, 18:41	2
	ну смотри. плавающие элементы выстраиваются в линейку и значит, если один не помещается, он переходит на следующую строчку. соответственно нужно создать условия, чтобы ширина влазила в одну строку. например родителю задать min-height равный сумме ширины плавающих блоков 1

@devenge 9 / 9 / 2 Регистрация: 11.11.2011 Сообщений: 208
	10.05.2012, 21:04 [ТС]	6
	gulliver, мне надо, чтобы левый и правый блок были фиксированными (в 200 пикселей). Ставлю им 200 пикселей, и та же ситуация 0

@devenge 9 / 9 / 2 Регистрация: 11.11.2011 Сообщений: 208
	10.05.2012, 22:05 [ТС]	8
	gulliver, мне надо чтобы середина была резиновая. а блоки слева и справа фиксированными. вот всё пытаюсь, не могу понять как реализовать. =)) 0

@gulliver Нарушитель 86 / 86 / 9 Регистрация: 09.05.2012 Сообщений: 456
	10.05.2012, 22:33	9
	я отправил ЛС 0

Опции темы