#CSS Wrapper не распознает контент

Question

С прошлой недели я снова пытаюсь создать сайт после отсутствия около 2 лет. Это прошло очень хорошо, пока я не заметил, что когда я свожу к минимуму браузер, содержимое не остается в обертке. Я искал решения на этом веб-сайте и в Google, но я не могу найти правильный. В большинстве решений упоминаются проблемы с #float и overflow, но я не использую float (надеюсь, что это не проблема), и я играл с переполнением, но я не могу заставить его работать.

Ниже вы можете найти CSS и HTML-код, который я использовал.

HTML-:

<div id="wrapper"> 

     <div id="content"> 

      <div id="header"> 

       <div id="logo"> 
       <img src="style/images/logo.gif" width="184" height="73" alt="logo" /> 
       </div> 

       <div id="menu"> 
     <ul id="navlist"> 
         <li id="active"><a href="#" id="current">1</a></li> 
         <li>2</li> 
         <li>3</li> 
         <li>4</li> 
         <li>5</li> 
        </ul> 
       </div> 

      </div> 

      <div id="main"> 

       Title 

       subtitle 

      </div> 

      <div id="footer"> 

       <div id="left_banner"> 



       </div> 

       <div id="right_banner"> 



       </div> 

      </div> 

     </div> 

    </div> 

и CSS

html, body, ul, li { 
    margin:0px; 
    padding:0px; 
    height:100%; 
} 

#wrapper { 
    text-align: center; 
background:url(images/bg.gif); 
    background-repeat:repeat; 
    height:100%; 
    width: 100%; 
    overflow:auto; 
} 

#content { 
    background-color: #fff; 
    margin: 0px auto; 
    width: 780px; 
    height: 100%; 
    border-left:#fd5d78 4px solid; 
    border-right:#fd5d78 4px solid; 
} 

#header { 
    position:relative; 
    height:120px; 
} 

#logo { 
    position:absolute; 
    right:43px; 
    top:37px; 
} 

#menu { 
    position:absolute; 
    bottom:0px; 
    left:58px; 
} 



#main { 
    position:relative; 
    left:25px; 
    top:35px; 
    width:730px; 
    height:320px; 
} 

#footer { 
    position:relative; 
    width:730px; 
    left:25px; 
    top:70px; 
    background-color:#0F0; 
    clear:both; 
} 

#left_banner { 
    position:absolute; 
    left:0px; 
    width:349px; 
    height:134px; 
    border:#fd5d78 2px solid; 
    background-color:#FFF; 
} 

#right_banner { 
    position:absolute; 
    right:0px; 
    width:349px; 
    height:134px; 
    border:#fd5d78 2px solid; 
    background-color:#FFF; 
} 

Спасибо мила за вашу помощь.

Answer 1

Попробуйте добавить display:block; к #wrapper

Answer 2

jsfiddle

Я знаю, вы сказали, что вы не используете поплавки, но здесь это решение, используя их. Одна из самых больших проблем, которые у вас были, заключалась в том, что вы устанавливали два фреймера нижнего колонтитула в абсолютные позиции, что отбрасывает 100% -ную высоту на родительский div. С поплавками и переполнением: скрытые вы можете вернуть эти divs в 100% -ный расчет.

Мне пришлось внести много изменений в ваш css, поэтому возьмите то, что у меня есть в jsfiddle, в качестве отправной точки.