Возникла проблемка, короче есть два дива, ставлю одному флоат лефт *и другому лефт
они выравниваются друг под другом, их ширина 400 пиксов, потом значит ставлю еще одну картинку ставлю ей флоат райт и хочу чтобы она выровнялась по правому краю от дивов, а она выровнивается по правому краю, под дивами, а я хочу чтобы она выровнялась справа от дивов, как это можно сделать? помогите пожалуйста
Пример разметки – в студию.
Пример разметки – в студию.
HTML код:
<body>
<div class="container">
* <div class="top">
*
* <div class="ramka_left">
*
* </div>
*
* <div class="ramka_grey">
*
* </div>
*
* </div>
* <div class="right">
*
* <div class="ramka_green">
* <div class="text3">Наши контакты:
* Тел.: +8 (044) 444-65-55
* Тел/Факс: +7 (044) 439-22-11
* E-mail: [Только зарегистрированные пользователи могут видеть ссылки. ]
* </div>
* </div>
*
*
* <div class="ramka_orange">
* <div class="text4">
* [Только зарегистрированные пользователи могут видеть ссылки. ]
* [Только зарегистрированные пользователи могут видеть ссылки. ]
* </div>
* *
* </div>
*
* *
* </div>
*
*
* <div class="content">
* <div class="ramka">
*
* </div>
* <div class="main_text">БАЙКАЛ-2ВМ
гигрометр кулонометрический стационарный, предназначен*
для измерений объемной доли влаги в азоте, кислороде,*
водороде, углекислом газе, воздухе и их смесях, а также*
в инертных и других газах, не взаимодействующих с
фосфорным ангидридом, и представляет собой*
стационарный прибор непрерывного действия.*
Диапазоны измерений объемной доли влаги:
0…1; 1…10; 10…100; 100…1000 млн-1.*
Основная приведенная погрешность: для области*
измерений от 0 до 1 млн-1 - не более ± 10 %;*
для области измерений от 1 до 10 млн-1 - не более ± 4 %;*
для области измерений от 10 до 100 и от 100 до*
1000 млн-1 - не более ± 2,5 %.</p>
Измерений от 0 до 1 млн-1 - не более ± 10 %;*
для области измерений от 1 до 10 млн-1 - не более ± 4 %;*
для области измерений от 10 до 100 и от 100 до*
1000 млн-1 - не более ± 2,5 %.</p>
* </div>
*
* *
* </div>
</div>
</body>
CSS код:
body {background-color:#FFFFFF;
* font-family:Arial, Helvetica, sans-serif;
* font-size:14px;}
* *
.container{margin: 0 0 0 150px;}
.top {margin-top: 40px;}
.logo {background-image:url(img/logo.gif);
* width:77px;
* height:104px;
* float:left;}
* *
.ramka_left {background-image:url(img/ramka_orange.gif);
* width:113px;
* height:34px;
* float:left;
* margin-left:70px;
* margin-top:25px;}
* *
.text_orange {margin-top:8px;
* color:#FFFFFF;
* font-weight:bold;
* text-align:center;}
* *
.text1 {float:left;
* margin-left:20px;
* margin-top:33px;
* font-weight:bold;}
**
.ramka_grey {float:left;
* background-image:url(img/ramka_grey.gif);
* width:178px;
* height:34px;
* margin-left:20px;
* margin-top:25px;}
* *
.text_grey {font-weight:bold;
* text-align:center;
* margin-top:8px;}
* *
.text2 {font-weight:bold;
* margin-left:20px;
* margin-top:33px;
* float:left;}
**
.right {float:right;
* margin-top:50px;}
**
.ramka_green_verh {background-image:url(img/verh_green.gif);
* width:206px;
* height:14px;}
* *
.ramka_green {background-color:#C4D851;
* width:203px;
* margin-left:3px;}
* *
.ramka_green_niz {background-image:url(img/niz_green.gif);
* width:206px;
* height:14px;}
* *
.text3 {margin-left:10px;}
.ramka_orange_verh {background-image:url(img/verh_orange.gif);
* width:206px;
* height:14px;}
* *
.ramka_orange {background-color:#FFA030;
* width:203px;
* margin-left:3px;}
* *
.ramka_orange_niz {background-image:url(img/niz_orange.gif);
* width:206px;
* height:14px;}
* *
.text4 {font-weight:bold;
* color:#FFFFFF;
* text-align:center;}
**
.line {background-image:url(img/line.gif);
* width:814px;
* height:6px;
* float:left;
* margin-top:0px;
* margin-right:30px;}
* *
.text5 {float:left;}
.content {margin-top:0px;
* float:left;
* width:800px;
* margin-top:30px;}
.ramka {background-image:url(img/ramka.gif);
* width:412px;
* height:84px;
* padding-top:5px;
* background-repeat:no-repeat;
* float:left;}
**
.text_ramka {text-align:center;
* font-size:30px;
* color:#0567C8;}
* *
.main_text {text-align:left;
* width:412px;
* margin-top:10px;
* float:left;}
.baykal {font-weight:bold;
* color:#0567C8;}
* *
.bold {font-weight:bold;}
.pic {width:340px;
* height:494px;
* float:right;}
Проблема в том что div class="ramka" и div class="text ramka"должны быть слева а div class="pic" должен находится справа, но он справа не хочет выравниватся, а выравнивается напротив div class="text ramka" но ниже div class="ramka"
И правильно делает.div class="pic" должен находится справа, но он справа не хочет выравниватся, а выравнивается напротив div class="text ramka" но ниже div class="ramka"
Давайте помыслим логически. Поскольку как для div.ramka, так и для div.main_text у Вас задано float: left, эти блоки должны располагаться в одной «строке» (друг за дружкой по горизонтали). Тем не менее, они так не поступают по одной простой причине: блоку div.main_text попросту не хватает места по ширине (нельзя впихнуть невпихуемое), и он переносится на следующую «строку» (под блок div.ramka). Такое поведение характерно для любых float-элементов. Как следствие, блок div.pic попросту учитывает факт такого переноса и располагается там, где и должен располагаться – на уровне блока div.main_text. И глупо было бы, если бы что-то происходило по-иному.
Так а нужно просто зделать чтобы он распологался напротив блока div.ramka, я ж думаю такая проблема как то должна решатся, по ширине он влазит, и походу должне распологатся напротив этого дива, но слазит почему то ниже. как решить эту проблему??? может у кого есть какие то варианты????
Вынужден повторить во второй раз: не должен.и походу должне распологатся напротив этого дива
Очень жаль, что Вы напрочь отказыватесь понять, почему именно.но слазит почему то ниже.
Хорошо тогда вопрос в другом, как сверстать страничку чтобы все выровнялось правильно, так как я хочу?
Не допускать переноса блока div.main_text на следующую «строку» (под блок div.ramka). Например, можно разместить его внутри блока div.ramka.Хорошо тогда вопрос в другом, как сверстать страничку чтобы все выровнялось правильно, так как я хочу?
спасибо помогло
Ваши права
