Проблема абсолютної повної ширини позиції CSS

у мене є 2 divs і dl:

<div id="wrap">
 <div id="header">
  <dl id="site_nav_global_primary">

і це мій стиль:

#wrap {
margin:0 auto;
width:100%;
min-width:760px;
max-width:1003px;
overflow:hidden;
}

#header {
width:100%;
position:relative;
float:left;
padding-top:18px;
margin-bottom:29px;
}

#site_nav_global_primary {    
float:right;
margin-right:18px;
margin-bottom:11px;
margin-left:18px;
}

Тепер я хочу змінити site_nav_global_primary, щоб мати повну ширину екрана, не змінюючи обтікання та заголовка. але коли я намагаюся:

#site_nav_global_primary {    
position: absolute;
width:100%;
top:0px;
left:0px;
}

Навігація отримує 100% обгортки, яка має максимальну ширину 1003px. я хочу, щоб це розтягнулося до максимуму, не змінюючи обгортки та заголовки div.

Чи можливо це?

Ви можете встановити як для властивості, так leftі rightдля 0. Це зробить div розтягуванням до ширини документа, але вимагає, щоб не був розміщений батьківський елемент (що не так, якщо бачити як #headerє position: relative;)

#site_nav_global_primary {    
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

Демонстрація на: http://jsfiddle.net/xWnq2/ , де я витягував position:relative;з#header

Вам потрібно додати position:relativeдо елемента #wrap.

Коли ви додасте це, усі дочірні елементи будуть розташовані в цьому елементі, а не у вікні браузера.

У мене схожа ситуація. У моєму випадку у нього немає батьків з позицією: відносний. Просто вставте моє рішення сюди для тих, хто може знадобитися.

position: fixed;
left: 0;
right: 0;

Зробити #site_nav_global_primaryпозиціонуванням фіксованим і встановити ширину 100% та бажану висоту.

Я не знаю, чи це те, що ви хочете, але спробуйте видалити переповнення: приховане від #wrap