Горизонтально тянется не полномтью

**fenixnt** · 14.10.2007, 17:53

Почему ниже указанная страница тянется не полностью по горизонтали то есть при разрешении 1024 на 768 все нормально а стоит поставить 1280 на 1024 то остается отступ спрва, а при разрешении 800 на 600, то правый блок вообще смещается вниз.Помогите пожалуйста, как сделать так чтоб 2 правых блока тянулись без каких либо зазоров справа при любом разрешении, а левый блок оставался фиксированным. Заранее спасибо

Код:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>800 600 - 1280 1024</title>
<style type="text/css">
<!--
body {margin-left: 0px;margin-top: 0px;****margin-right: 0px;margin-bottom: 0px;}
-->
</style></head>
<body>
<div style="background:#999999; float:left; width:300px; height:800px;"></div>
<div style="background:#000099; float:left; width:30%; height:800px;"></div>
<div style="background:#CC0066; float:left; width:40%; margin-left:1px; height:500px"></div>
</body>
</html>

**tegArt** · 14.10.2007, 18:18

Originally posted by fenixnt@Oct 14 2007, 15:53
Почему ниже указанная страница тянется не полностью по горизонтали то есть при разрешении 1024 на 768 все нормально а стоит поставить* 1280 на 1024 то остается отступ спрва, а при разрешении 800 на 600, то правый блок вообще смещается вниз.Помогите пожалуйста, как сделать так чтоб 2 правых блока тянулись без каких либо зазоров справа при любом разрешении, а левый блок оставался фиксированным. Заранее спасибо

Код:

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <title>800 600 - 1280 1024</title> <style type="text/css">  </style></head> <body> <div style="background:#999999; float:left; width:300px; height:800px;"></div> <div style="background:#000099; float:left; width:30%; height:800px;"></div> <div style="background:#CC0066; float:left; width:40%; margin-left:1px; height:500px"></div> </body> </html>

<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]</div>

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

**Aykroyd** · 14.10.2007, 18:20

Originally posted by fenixnt@Oct 14 2007, 17:53
Почему ниже указанная страница тянется не полностью по горизонтали
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Потому что 300px – это не 30%...

Originally posted by fenixnt@Oct 14 2007, 17:53
Помогите пожалуйста, как сделать так чтоб 2 правых блока тянулись без каких либо зазоров справа при любом разрешении, а левый блок оставался фиксированным
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Заключите оба "резиновых" блока в один общий (отдельный) контейнер и расфлоатите внутри него эти "резиновые" блоки в разные стороны. Самому же контейнеру задайте левый маргин в 300px (для левого фиксированного по ширине блока)...

**fenixnt** · 14.10.2007, 21:32

Originally posted by Aykroyd@Oct 14 2007, 18:20
Потому что 300px – это не 30%...
Заключите оба "резиновых" блока в один общий (отдельный) контейнер и расфлоатите внутри него эти "резиновые" блоки в разные стороны. Самому же контейнеру задайте левый маргин в 300px (для левого фиксированного по ширине блока)...
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]

Код:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
</head>
<body>
<div style="width:300px;float:left; background:#CCCCCC;">Текст фиксированного столбца Текст фиксированного столбца Текст фиксированного столбца Текст фиксированного столбца</div>
<div style="margin-left:300px;">
<div style="float:left;background:#0000FF;">Текст первого тянущегося столбца Текст первого тянущегося столбца Текст первого тянущегося столбца Текст первого тянущегося столбца Текст первого тянущегося столбца Текст первого тянущегося столбца</div>
<div style="float:right; background:#99CC00;">Текст второго тянущегося столбца Текст второго тянущегося столбца Текст второго тянущегося столбца Текст второго тянущегося столбца Текст второго тянущегося столбца Текст второго тянущегося столбца Текст второго тянущегося столбца</div>
</div>
</body>
</html>

Текст второго тянущегося столбца не умещается и смещается вниз. Как сделать так чтобы Текст первого тянущегося столбца и текст второго тянущегося столбца всегда были одинаковыми по ширине и не смещались вниз? Заранее спасибо огромное.

**Aykroyd** · 15.10.2007, 08:08

Быстро схватываете) Грех не помочь)

Вот так:

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
* {margin: 0px; padding: 0px;}
#sidebar {background: #FFFFCC; width: 300px; float: left;}
#content {margin-left: 300px;}
#left {background: #CCFFFF; width: 50%; float: left;}
#right {background: #FFCCFF; width: 50%; float: right;}
* html #right {margin-right: -1px;}
</style>
</head>

<body>
<div id="sidebar">
****Текст фиксированного столбца Текст фиксированного столбца Текст фиксированного столбца Текст фиксированного столбца
</div>

<div id="content">
****<div id="left">
 *Текст первого тянущегося столбца Текст первого тянущегося столбца Текст первого тянущегося столбца Текст первого тянущегося столбца Текст первого тянущегося столбца Текст первого тянущегося столбца
****</div>
****<div id="right">
 *Текст второго тянущегося столбца Текст второго тянущегося столбца Текст второго тянущегося столбца Текст второго тянущегося столбца Текст второго тянущегося столбца Текст второго тянущегося столбца Текст второго тянущегося столбца
****</div>
</div>
</body>
</html>

Или даже вот так:

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
* {margin: 0px; padding: 0px;}
#sidebar {background: #FFFFCC; width: 300px; float: left;}
#content {width: 100%; margin-left: -300px; float: right; overflow: hidden;}
#main {margin-left: 300px;}
#left {background: #CCFFFF; width: 50%; float: left;}
#right {background: #FFCCFF; width: 50%; float: right;}
* html #right {margin-right: -1px;}
</style>
</head>

<body>
<div id="sidebar">
****Текст фиксированного столбца Текст фиксированного столбца Текст фиксированного столбца Текст фиксированного столбца
</div>

<div id="content">
****<div id="main">
 *<div id="left">
 *****Текст первого тянущегося столбца Текст первого тянущегося столбца Текст первого тянущегося столбца Текст первого тянущегося столбца Текст первого тянущегося столбца Текст первого тянущегося столбца
 *</div>
 *<div id="right">
 *****Текст второго тянущегося столбца Текст второго тянущегося столбца Текст второго тянущегося столбца Текст второго тянущегося столбца Текст второго тянущегося столбца Текст второго тянущегося столбца Текст второго тянущегося столбца
 *</div>
****</div>
</div>
</body>
</html>

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

**fenixnt** · 15.10.2007, 09:42

Originally posted by Aykroyd@Oct 15 2007, 08:08
Быстро схватываете) Грех не помочь)

Вот так:

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> * {margin: 0px; padding: 0px;} #sidebar {background: #FFFFCC; width: 300px; float: left;} #content {margin-left: 300px;} #left {background: #CCFFFF; width: 50%; float: left;} #right {background: #FFCCFF; width: 50%; float: right;} * html #right {margin-right: -1px;} </style> </head> <body> <div id="sidebar"> ****Текст фиксированного столбца Текст фиксированного столбца Текст фиксированного столбца Текст фиксированного столбца </div> <div id="content"> ****<div id="left"> *Текст первого тянущегося столбца Текст первого тянущегося столбца Текст первого тянущегося столбца Текст первого тянущегося столбца Текст первого тянущегося столбца Текст первого тянущегося столбца ****</div> ****<div id="right"> *Текст второго тянущегося столбца Текст второго тянущегося столбца Текст второго тянущегося столбца Текст второго тянущегося столбца Текст второго тянущегося столбца Текст второго тянущегося столбца Текст второго тянущегося столбца ****</div> </div> </body> </html>

Или даже вот так:

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> * {margin: 0px; padding: 0px;} #sidebar {background: #FFFFCC; width: 300px; float: left;} #content {width: 100%; margin-left: -300px; float: right; overflow: hidden;} #main {margin-left: 300px;} #left {background: #CCFFFF; width: 50%; float: left;} #right {background: #FFCCFF; width: 50%; float: right;} * html #right {margin-right: -1px;} </style> </head> <body> <div id="sidebar"> ****Текст фиксированного столбца Текст фиксированного столбца Текст фиксированного столбца Текст фиксированного столбца </div> <div id="content"> ****<div id="main"> *<div id="left"> *****Текст первого тянущегося столбца Текст первого тянущегося столбца Текст первого тянущегося столбца Текст первого тянущегося столбца Текст первого тянущегося столбца Текст первого тянущегося столбца *</div> *<div id="right"> *****Текст второго тянущегося столбца Текст второго тянущегося столбца Текст второго тянущегося столбца Текст второго тянущегося столбца Текст второго тянущегося столбца Текст второго тянущегося столбца Текст второго тянущегося столбца *</div> ****</div> </div> </body> </html>

Выбор варианта зависит от тех целей, которые Вы будете преследовать в дальнейшем...
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]</div>

Спасибо Вам ОГРОМНОЕ!!!

Тема: Горизонтально тянется не полномтью

Опции темы

Поиск по теме

Отображение

Похожие темы

Не тянется по вертикали:(

<UL> - горизонтально?

Ваши права