div div over float 텍스트 - 좋지 않음

Question

100 % 높이 문제를 해결해 주셔서 감사합니다. 이제 작동합니다 ..

이제 다른 문제가 있습니다.

내 HTML : 이

<div id="menu"> Test </div> 

<div id="content"> 

    <div id="submnu"> 
    Submenu 1 <br /> 
    <br /> 
    Submenu 2 <br /> 
    <br /> 
    Submenu 3 <br /> 
    <br /> 
    Submenu 4 <br /> 
    <br /> 
    Submenu 5 <br /> 
    <br /> 
    <br /> 
    LOGIN FORM<br /> 
    <br /> 
    <form method="POST" action="...php"> 
    Username:<br /> 
    <input type="text" name="username" style="width: 200px; border: #373c39 double 2px;" /><br /><br /> 
    Password:<br /> 
    <input type="password" name="password" style="width: 200px; border: #373c39 double 2px;" /><br /><br /> 
    <input type="submit" value="Login" /> 
    </form> 


    </div> 

    <div id="txt"> 
    <table> 
    <tr> 
    <td> 
    <img src="images/producttest.png" border="0" /> 
    </td> 
    <td align="left" valign="top" style="padding-top: 50px;"> 
    Productomschrijving: <br /> 
    <p> 

    <div id="scimg"> 
    Winkelwagen<br /> 
    </div> 

    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.<br /> 
    Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. 
    <br />Donec eu libero sit amet quam egesta semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. 
    <br />Quisque sit amet est et sapien ullamcorper pharetra. 
    <br />Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. 
    <br /><br /> 
    Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci,<br /> 
    sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.<br /> 
    Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue,<br /> 
    eu vulputate magna eros eu erat. Aliquam erat volutpat.<br /> 
    Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus 
    <br /><br /> 
    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.<br /> 
    Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. 
    <br />Donec eu libero sit amet quam egesta semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. 
    <br />Quisque sit amet est et sapien ullamcorper pharetra. 
    <br />Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. 
    <br /><br /> 
    Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci,<br /> 
    sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.<br /> 
    Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue,<br /> 
    eu vulputate magna eros eu erat. Aliquam erat volutpat.<br /> 
    Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus 
    </p> 

    </tr> 
    </table> 
    </div> 

</div> 

그리고 내 CSS : 나는 쇼핑 카트 (: scimg DIV id를) 만들었습니다

html { 
    height: 100%; 
} 
body { 
    background-color: #28B04B; 
    margin: 0; 
    font-family: Verdana, Geneva, sans-serif; 
    font-size: 12px; 
    height: 100%; 
} 
#head { 
    height: 147px; 
    overflow: auto; 
    width: 1297px; 
} 
#logo { 
    background-image: url("images/logo.png"); 
    background-position: left center; 
    background-repeat: no-repeat; 
    float: left; 
    height: 147px; 
    width: 297px; 
} 
#header { 
    background-image: url("images/headbg.png"); 
    background-repeat: no-repeat; 
    float: left; 
    height: 147px; 
    width: 1000px; 
} 
#menu { 
    background-color: #d4efdb; 
    border-bottom: 2px double #373C39; 
    border-top: 2px double #373C39; 
    height: 30px; 
    padding-left: 320px; 
} 
#content { 
    background-color: #e9f7ed; 
    height: 100%; 
    overflow: hidden; 
    min-height: 100%; 
} 
#txt { 
    margin-left: 320px; 
    margin-top: 10px; 
} 
#submnu { 
    background-color: #d4efdb; 
    width: 247px; 
    min-height: 100%; 
    overflow: hidden; 
    float: left; 
    padding-left: 50px; 
    padding-top: 20px; 
    display: block; 
} 
#scimg { 
    background-image: url(images/scimg.png); 
    background-repeat: no-repeat; 
    width: 210px; 
    height: 310px; 
    z-index: 10; 
    position: absolute; 
    right: 0; 
    top: 50; 
    padding-top: 20px; 
    padding-left: 20px; 
} 

. 하지만 낮은 해상도로 볼 때. 장바구니의 div가 문맥 텍스트 위로 흘러갑니다. 내가 어떻게 고칠 수 있니? 곧 소식을 듣고 싶습니다!

Answer 1

추가 높이 : DIV의 내용에 100 %
참조 데모 :

DEMO

#content { 
    background-color: #e9f7ed; 
    min-height: 100%; 
    height:100%; 
    overflow: hidden; 
}