html - Height issue for nested divs -
having bit of trouble getting nested divs lined properly. can see example of code i'm working on dabblet:
http://dabblet.com/gist/6125817
i've run following issues:
- the wrapper scrolls vertically. can live this, ideally rather not.
- the content needs fill of box. if wrapper takes screen, content needs take of space.
- the footer needs align bottom of wrapper (plus bottom margin), not bottom: 0.
everything try seems make else fall out of whack. i've been able parts of when disabling other css classes. can't them work @ same time.
just in case link isn't working:
body, html { } body { background-image: url('/bground_home.png'); background-size: 100%; background-repeat: no-repeat; font-family: 'legacysansultra'; font-size: 20px; } .wrapper { width: 90%; height: 90%; background-color: white; border: solid 1px #666; box-shadow: 10px 10px 5px #888888; position: absolute; top:0; bottom: 0; left: 0; right: 0; margin: auto; } .header { font-size: 27px; margin: 10px; background-color: black; border-top-right-radius: 15px; -moz-border-radius-topright: 15px; color: white; } .content { width: 90%; height: 70%; position: relative; top:0; bottom: 0; left: 0; right: 0; margin: auto; background-color: #effbfb; border-radius: 15px; -moz-border-radius: 15px; border: 3px solid #e0f8fd; font-size: 25px; } .footer { background-color: black; padding: 5px; color: white; margin: 10px; border-bottom-right-radius: 15px; -moz-border-radius-bottomright: 15px; height: 50px; } <div class="wrapper"> <div class="header"> <div style="position: relative; float:left; width: {#logowidth}; height: {#logoheight}; padding: 0px 10px;"> <img src="{#logo}" height="{#logoheight}" width="{#logowidth}" alt="{#name}" border="1" /> </div> <div style="position: relative; float:left; padding-top: 20px;"> {#name} </div> <div style="clear: both;"></div> </div> <div class="content"> <div class="links">{#links}</div> </div> <div class="footer"></div> </div>
use code:
overflow: hidden;
Comments
Post a Comment