Форум PHP программистов > помогите распределить position

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Полная Версия: помогите распределить position

alex107

6.12.2010 - 15:13

надо сделать что бы слой C растягивался в высоту блоками A и B, т.е. если А длиннее B => то С увеличивается до высоты А и наоборот.
+ слой А должен находится слева, слой В справа...

я сделал но что то не так... (((( у меня только так получается... ((

user posted image

css:

BODY {
font-family: Calibri;
background: #E9E9E9;
}

.C {
width: 1000px;
background: #ffffff;
padding: 10px;
}

.A {
width: 250px;
padding: 5px;
background: #6699ff;
position: absolute;
}

.B {
width: 720px;
padding: 5px;
background: #099000;
position: relative;
}

html:

<body>
<div align="center">
<div class="C">
<div align="left">
<div class="A">fff<p>ff</div>
</div>
<div align="right"><div class="B">fff</div></div>
</div>
</div>
</body>

Спустя 13 минут, 37 секунд (6.12.2010 - 14:26) inpost написал(а):

Спустя 6 минут, 8 секунд (6.12.2010 - 14:32) alex107 написал(а):

спасибо

Спустя 2 минуты, 53 секунды (6.12.2010 - 14:35) inpost написал(а):

alex107
Все понятно? Я буквами обозначил, и стиль не писал.
Если что - спрашивай

Спустя 12 минут, 9 секунд (6.12.2010 - 14:47) alex107 написал(а):

да, понятно.... сделал, только работает в OPER'e и IE, а в хроме, сафари и фоксе С не растягивается вообще.... (((

Спустя 3 минуты, 38 секунд (6.12.2010 - 14:51) ИНСИ написал(а):

alex107 можно так:

.C { float: left; width: 1000px; background: #ffffff; padding: 10px; }
.A { float: left; width: 250px; padding: 5px; background: #6699ff; }
.B { float: right; width: 720px; padding: 5px; background: #099000; }

Спустя 1 минута, 53 секунды (6.12.2010 - 14:53) inpost написал(а):

Cмотри ссылку, там растянуто, опера+мозила+ие работает.
http://inpost.dp.ua/8/ooo.php

Спустя 4 минуты, 6 секунд (6.12.2010 - 14:57) alex107 написал(а):

сделал так
.C { float: left; width: 1000px; background: #ffffff; padding: 10px; }
.A { float: left; width: 250px; padding: 5px; background: #6699ff; }
.B { float: right; width: 720px; padding: 5px; background: #099000; }
все ok!
только С вместе с А и В выровнялись по левому краю...
я сделал:

<body>
<div align="center">
<div class="C">
<div class="A">ff</div>
<div class="B">ff<p>ff</div>
</div>
</div>
</body>

несмотря на то что А,В и С в слое в выравниванием по центру, они выравниваются по левому краю.... :(

Спустя 1 минута, 18 секунд (6.12.2010 - 14:58) inpost написал(а):

Ты имеешь ввиду DIV, или всё, что внутри Дива?

Спустя 42 секунды (6.12.2010 - 14:59) inpost написал(а):

http://inpost.dp.ua/8/ooo.php :

<div style="width:1000px; background-color:#F00">
<div style="float:left;">LEFT<br>AAAA<br>AAAA<br>AAAA<br>AAA</div>
<div style="float:right">RIGHT</div>
<div style="clear:both"></div>
</div>

Спустя 3 минуты, 47 секунд (6.12.2010 - 15:03) alex107 написал(а):

вот это я имею ввиду...

Спустя 36 секунд (6.12.2010 - 15:03) alex107 написал(а):

div с белым фоном выровнялся по левому краю.... (((

Спустя 2 минуты, 42 секунды (6.12.2010 - 15:06) inpost написал(а):

<div style="width:1000px" align="center">
<div style="background-color:#F00">
<div style="float:left;">LEFT<br>AAAA<br>AAAA<br>AAAA<br>AAA</div>
<div style="float:right">RIGHT</div>
<div style="clear:both"></div></div>
</div>

Спустя 3 минуты, 15 секунд (6.12.2010 - 15:09) ИНСИ написал(а):

alex107 попробуй так:

body { text-align: center; font-family: Calibri; background: #E9E9E9; }

.C { width: 1000px; background: #ffffff; padding: 10px; }
.A { float: left; width: 250px; padding: 5px; background: #6699ff; }
.B { float: right; width: 720px; padding: 5px; background: #099000; }

<div align="center">
	<div class="C">
		<div class="A">ff</div>
		<div class="B">ff<p>ff</div>
	</div>
</div>

Спустя 3 минуты, 7 секунд (6.12.2010 - 15:12) inpost написал(а):

welbox2
clear:both надо, чтобы выровнять левый и правый floatы

Спустя 35 секунд (6.12.2010 - 15:13) alex107 написал(а):

Цитата (welbox2 @ 6.12.2010 - 12:09)

alex107 попробуй так:

body { text-align: center; font-family: Calibri; background: #E9E9E9; }

.C { width: 1000px; background: #ffffff; padding: 10px; }
.A { float: left; width: 250px; padding: 5px; background: #6699ff; }
.B { float: right; width: 720px; padding: 5px; background: #099000; }

<div align="center">
	<div class="C">
  <div class="A">ff</div>
  <div class="B">ff<p>ff</div>
	</div>
</div>

сделал....
все выровнялось по центру... но С перестал растягиваться вообще... (((

Спустя 48 секунд (6.12.2010 - 15:14) ИНСИ написал(а):

inpost может быть, но у меня и так работает

Спустя 1 минута, 20 секунд (6.12.2010 - 15:15) inpost написал(а):

welbox2
Без clear:both будет точно так же, как у автора в первом посте на скрин-шоте.

Спустя 2 минуты, 3 секунды (6.12.2010 - 15:17) ИНСИ написал(а):

alex107 мой последний вариант :) :

body { text-align: center; font-family: Calibri; background: #E9E9E9; }
#header { width: 1000px; }

.C { float: left; width: 980px; background: #ffffff; padding: 10px; }
.A { float: left; width: 250px; padding: 5px; background: #6699ff; }
.B { float: right; width: 720px; padding: 5px; background: #099000; }


<div align="center">
	<div id="header">
        <div class="C">
            <div class="A">ff</div>
            <div class="B">ff<p>ff</div>
        </div>
    </div>
</div>

Спустя 1 минута, 29 секунд (6.12.2010 - 15:19) ИНСИ написал(а):

inpost согласен, забыл кое-что

Спустя 1 минута, 24 секунды (6.12.2010 - 15:20) alex107 написал(а):

Цитата (welbox2 @ 6.12.2010 - 12:17)

alex107 мой последний вариант :) :

body { text-align: center; font-family: Calibri; background: #E9E9E9; }
#header { width: 1000px; }

.C { float: left; width: 980px; background: #ffffff; padding: 10px; }
.A { float: left; width: 250px; padding: 5px; background: #6699ff; }
.B { float: right; width: 720px; padding: 5px; background: #099000; }


<div align="center">
	<div id="header">
        <div class="C">
            <div class="A">ff</div>
            <div class="B">ff<p>ff</div>
        </div>
    </div>
</div>

Спустя 12 минут, 19 секунд (6.12.2010 - 15:32) ИНСИ написал(а):

alex107 замени вот это:

Цитата

.C { float: left; width: 980px; background: #ffffff; padding: 10px; }

на

.C { float: left; width: 100%; background: #ffffff; padding: 10px; }

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

Спустя 15 минут, 8 секунд (6.12.2010 - 15:47) alex107 написал(а):

все!!! )))) вот оно... ))) все работает и корректно отображается во всех браузерах!!!!! ))))
+ в карму!! )))

Спустя 5 минут, 6 секунд (6.12.2010 - 15:53) ИНСИ написал(а):

Цитата

super CSS

ого

тут ведь сложного ничего не было

. Но спасибо большое!

Быстрый ответ:

Здесь расположена полная версия этой страницы.