Как сделать DIV, чтобы его местоположение не менялось при ресайзе

A
На сайте с 30.06.2013
Offline
119
1047

Есть такой див (отмечен красным на скрине)

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

Но у меня например, если смотрю на 15 диагонали - всё ок, если на 24 - то этот див уезжает право


<div style="border:2px solid red; width:500; float:right; margin-right:200px;">

<div style="list-style-type:none; float:right; margin-right:150px; z-index: 10;">
<ul class="language-chooser language-chooser-image qtranxs_language_chooser" id="qtranslate-chooser">
<li class="">RUS</li>
<li class="">ENG</li>
</ul>

<div class="qtranxs_widget_end"></div>
</div>



<div class="ordercall" style="margin-right:25px; float:right; border-radius:10px ">
<a href="#contact_form_pop" class="fancybox">asdada</a>
<div style="display:none" class="fancybox-hidden" style="border-radius:10px;">
<div id="contact_form_pop" style="border-radius:10px;">
<div>
<div role="form" class="wpcf7" id="wpcf7-f127-o1" lang="ru-RU" dir="ltr">
<div class="screen-reader-response"></div>
<form action="/ru/kontakt/#wpcf7-f127-o1" method="post" class="wpcf7-form" novalidate="novalidate">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="127" />
<input type="hidden" name="_wpcf7_version" value="4.5" />
<input type="hidden" name="_wpcf7_locale" value="ru_RU" />
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f127-o1" />
<input type="hidden" name="_wpnonce" value="4de421f45b" />
</div>
<p><label> asdsadsa<br />
<span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" /></span> </label></p>
<p><label> asdsadas<br />
<span class="wpcf7-form-control-wrap tel-361"><input type="tel" name="tel-361" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-required wpcf7-validates-as-tel" aria-required="true" aria-invalid="false" /></span> </label></p>
<p><label> asdsadsa<br />
<span class="wpcf7-form-control-wrap your-message"><textarea name="your-message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false"></textarea></span> </label></p>
<p><input type="submit" value="?????????" class="wpcf7-form-control wpcf7-submit" /></p>
<div class="wpcf7-response-output wpcf7-display-none"></div><
</form>
</div>
</div>
</div>
</div>
</div>


<div style="float:right; margin-right:25px;">
<span style="background:#f8f8f8; padding:5px; border-radius:5px; font-weight:bold; color:#555 !important; border:1px solid #e8e8e8;"><img style="vertical-align:middle;" src="" /> asdsadsa</span> <br/><br/>
<span style="background:#f8f8f8; padding:5px; border-radius:5px; font-weight:bold; color:#555 !important; border:1px solid #e8e8e8;"><img style="vertical-align:top;" src="" /> sdadsada </span>
</div>

<div style="clear:both"></div>
<br/>

</div>

<div style="clear:both"></div>
<div class="header" style="background:#000; height:300px;">
<div class="container">
<div class="logo">
<a href="/">LOGO</a>
</div><!-- logo -->

<div style="float:right; margin-top:50px; margin-right:30px;">

<form method="get" id="searchform" action="">
<div><input type="text" size="18" value="" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Search" class="btn" />
</div>
</form>

</div>

<div class="clear"></div>
</div>

<div class="container">

<div class="clear"></div>

</div>
</div>
png div-issue.png
S3
На сайте с 29.03.2012
Offline
349
#1

попробуйте margin-right в процентах указать.

V0
На сайте с 24.10.2016
Offline
2
#2

Как вариант, родительскому блоку задать position: relative; а этому блоку position: absolute; right: 25px;

ZomBat
На сайте с 08.10.2016
Offline
24
#3

На данный момент блок(красный) - все время сверху и согласно устанолвенному "margin-right: 200px;" отступу справа, так и распологается при расширении экрана 600-1920px.

Что не так с этим блоком?

Могу предположить, что на 15 дюймов он у вас в середине, а на 24 справа? тогда как сказали выше, используйте %

в свободное время шаманю над веб-окружением VPS...
Мемори
На сайте с 11.11.2012
Offline
105
#4

в вопросе не определено понятие "на своем месте".

A
На сайте с 30.06.2013
Offline
119
#5

Я пробовал с маргин в процентах, это помогло, но при этом этот блок красный у меня не на ровне с основным контетом сайта. Прикрепил скрин, посмотрите пожалуйста.

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

png div-issue2.png
ZomBat
На сайте с 08.10.2016
Offline
24
#6

Что за блок черного цвета справа от синий линии?

как варианты:

Засунуть желтого в хеадер и float:right?

Сделать блок-родитель куда запихать желтый+header+content

и вообще, блок с контентом же как то центрируется? сделать такой же, и запихать в него желтого... float or align 2 right

[Удален]
#7

Если это возможно возьмите css фреймворк, результат будет более предсказуем

A
На сайте с 01.07.2016
Offline
3
#8

Добрый день, Ваш блок имеет свойство float:right и margin-right:200px; как я понял это для подходит для "15 диагонали". Для решения проблемы скорее всего потребуется указать эти своиства в медиа запросах для разных экранов и желательно указать например в процентах.

Для полноты картины можно было бы посмотреть и соседние блоки и скорее всего решением стало бы использование сетки бутстрап

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий