html - Overflow-y scroll content disappears inside of div container? -
i have facing problems div container. want set standard height on container. if content inside of div large scroll bar should show on side. here example of code:
//in section have navigation bar , html included. <section class="settingsbox"> <nav class="xnavigationsetting"> <a href="#" data-id="settingmain">menu</a> | </nav> <div id="htmlsetting"> <cfinclude template="includes/hmsettings.html"> </div> </section> <div id="settingmain" class="settingsbox"> <div id="settingtesting"> <fieldset> <legend>testing</legend> <ul> <li> <span id="location">test location</span> </li> <li> <span id="reason">reason</span> </li> <li> <span id="results">results</span> </li> </ul> </fieldset> </div> <div id="settingequipment"> <fieldset> <legend>equipment</legend> <ul> <li> <span id="type">type</span> </li> </ul> </fieldset> </div> </div> <div id="settingtbl"> <div id="containermaster"></div> </div>
here css:
div.settingsbox { height: 400px; overflow-y: scroll; } div.settingsbox fieldset { font-weight: bold; border: 2px solid #000099; margin: 10px; } div.settingsbox ul li span:hover { text-decoration: underline; color: red; cursor: pointer; } div.settingsbox ul { list-style-image: url('../images/edit.png'); } nav.xnavigationsetting { width: 100%; margin-left: 0; margin-right: 0; padding-top: 2px; margin-bottom: 5px; background-color: #c8e2db; float: left; border-bottom: 2px solid #000099; height: 18px; } nav.xnavigationsetting { color: black; text-decoration: none; cursor: pointer; font-weight: bold; padding-left: 5px; padding-right: 5px; }
my settingsbox
has height of 400px
, overflow-y
set scroll
. reason content disappears when apply css. if knows why or wrong in code structure please let me know. thank you.
you need clear float on div.settingsbox
. it's floated outside of viewport.
div.settingsbox { ... clear: both; }
Comments
Post a Comment