Форум hotibo.ru

Сайты - по стандартам, но не стандартные сайты!






Страниц: 1

 

#1 26.02.2013 16:52

valmont
Новичок
Зарегистрирован: 26.02.2013
Сообщений: 2

расположение div'ов

ХТМЛ

Код:
aaa
aaa
право

СТИЛИ

Код:

body {
    background-color: #fff;
    padding: 0px;
    margin: 0px;
}
table {
    width: 100%;
    border-collapse: collapse;
}
td#tleft {
    border: 1px solid #000;
    padding: 15px;
    width: 70%;
}
td#tright {
    border: 1px solid #000;
    padding: 15px;
    width: 30%;
}
div#innerArea {
    border: 1px solid #ccc;
    width: auto;
    padding: 5px;
}
table#main {
    width: 100%;
    border-collapse: collapse;
}
table#main td{
    border: 1px solid red;
    padding: 5px;
}
div#leftdiv {
    border: 1px solid #ccc;
    width: 20%;
    float: left;
    margin-right: 10px;
}
div#rightdiv {
    float: left;
    border: 1px solid #ccc;
    width: auto;
}
.clear {
    clear: both;
}

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

Если делаю ширину второго дива с "ааа" равной 80% то он съезжает вниз...

Нет на форуме

 

#2 12.03.2013 12:46

Newone
Разбирающийся
Зарегистрирован: 17.10.2012
Сообщений: 89

Re: расположение div'ов

Интересно, вы это руками писали?

Беда вот в чем
div#leftdiv {
    border: 1px solid #ccc;
    width: 20%;
    float: left;
    margin-right: 10px;
}

div#rightdiv {
    float: left;
    border: 1px solid #ccc;
    width: auto;
}


float отбирает свойство дива заполнять все пространсство в ширину. С момента объявления float див начинает принимать ширину своего содержимого.

Если вы под "вторым ааа" имели ввиду div#rightdiv, то выход очевиден. отобрать float и назначить нужные маргины для горизонтального отступа. Любо, не отбирая флоата, назначить ширину 80%, в него вставить еще один див с указанными маргинами для достижения нужных отступов.


Но вот мучает вопрос... Для чего нужно применять флоат к диву, да вообще для чего нужен див, если Вы все равно верстаете вложенной таблицей??????

Получается, что вы взяли достаточно туповатый устаревший метод верстки "таблица в таблице" (о ужас!!!!), отняли у него единственное его достоинство - простоту, обратившись к некоему типа современному методу на DIV. Поделите ячейку на 2 части и не надо никаких дивов.

Нет на форуме

 

#3 13.03.2013 02:56

valmont
Новичок
Зарегистрирован: 26.02.2013
Сообщений: 2

Re: расположение div'ов

руками smile))). согласен что с первой таблицей перебор, так чтот захотелось попробовать, посомтреть. :-)

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

Нет на форуме

 

 

Страниц: 1


Board footer