Как расположить div с левой позицией против другого div и правой позицией по краю экрана?

Question

Мне нужно сделать простой сайт с таким заголовком:

http://antonio.x -br.com / menu_website.png

Моя картинка может быть не совсем точной, но обертка должна быть точно 960px по центру.

В то время как строка меню ... должна иметь бесконечную ширину до ВПРАВО , независимо от размера экрана клиента.

Для обеих сторон мы все знаем, что ширина: 100% решает это быстро и резко. Но только для одной стороны?

Пока что мне удалось заставить его работать обходным путем, выполнив эту смесь CSS:

.wrapper {
max-width: 960px;
margin: 0 auto;
position: relative;
width: 960px;
}

#top_menu {
margin-top: 48px;
height: 40px;
width: 582px;
display: block;
float: right;
}

#top_menu .leftborder {
width: 7px;
height: 40px;
background: url('images/menuborder.jpg') no-repeat;
display: block;
float: left;
}

#top_menu .content {
width: 543px;
height: 20px;
background-color: #231f20;
display: block;
float: left;
padding: 10px 16px;
}

#top_menu_scrapper {
position: absolute;
display: block;
height: 40px;
background-color: #231f20;
height: 40px;
top: 48px;
left:960px;
width: 0px;
margin: 0;
}

С этим кодом JS:

function AutoDivScrapper () {
var ScrapperDiv = document.getElementById('top_menu_scrapper');
var UserWindow = parseInt(document.body.clientWidth);
var NewScrapperWidth = ( UserWindow - 960 ) / 2

if (NewScrapperWidth < 0) {
    NewScrapperWidth = 0;
}

ScrapperDiv.style.width = parseInt(NewScrapperWidth) + "px";
}

То, что я создал, было:

Во-первых, div, называемый top_menu , внутри оболочки, который создает часть меню, где я напишу ссылки и поставлю причудливую закругленную границу, маленький домик и т. Д.

Еще один div, называемый top_menu_scrapper , который является абсолютным и в основном, имеет только высоту, выравнивание по верхнему и левому краям и цвет фона.

JS фиксирует ширину экрана пользователя, снимает 960 (размер оболочки), оставляя обе стороны вне оболочки. Поскольку я хочу, чтобы он был только для одного размера, я разделил значение пополам, и BAM, мы получили правильный размер в пикселях для части экрана, которую я хочу заполнить.

Мне показалось, что это идеально, но угадайте, мой босс сказал, что это своего рода «ошибка», потому что если клиент загружает страницу на маленьком экране, а затем максимизирует ее без перезагрузки, мы увидим большая дыра с правой стороны.

Да, друзья, как ни странно это звучит, именно на это он и жалуется.

В любом случае, вот я и прошу немного ваших знаний, чтобы помочь моему предложению.

Если вы, ребята, знаете лучший способ сделать это меню ... ИЛИ заставить мой JS работать в РЕАЛЬНОМ ВРЕМЕНИ , я был бы очень признателен за вашу поддержку: D

Answer 1

Я делал это на этом сайте давным-давно. Я не помню точно, как, но я проверил CSS, и я думаю, что это необходимый код.

#menu-extend { 
background-color: #e8e8e8;
float: right;
height: 30px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: -30px;
position: relative;
right: 0px;
top: 100px;
width: 50%;
z-index: 0;
}

Answer 2

Я сделал для вас демо , оно должно работать.Протестировано на IE7 / 8/9, Firefox 4, Safari 5, Chrome 10.

Cheers

Answer 3

Вы можете абсолютно позиционировать все ребра элемента.Таким образом, вы можете использовать правило стиля, чтобы расположить в меню div что-то вроде этого:

.menuDiv { top:50px; left:50%; padding-left:480px; margin-left:-480px; right:0px; position:absolute;}

Это не сработает в IE6, поэтому вам нужно решить, как, или если вы хотите работатьвокруг этого.

Редактировать: Установите левую позицию на 50%, затем используйте отрицательное поле и отступ, равный половине ширины div обертки: http://jsfiddle.net/brddU/1/ (япри условии, что div-обертка - это независимый div под меню.

Answer 4

Если вы не пропустили что-то из ваших намерений, вы можете добавить два правила CSS:

.logoDiv {width:960;float:left}
.menuDiv {width:100%}

и затем иметь следующий HTML-код:

<div class="logoDiv">This is my logo code</div>
<div class="menuDiv">This is my menu code</div>

.