Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <div id="header"></div>
- <div id="main">
- <div id="navigation"></div>
- <div id="content"></div>
- </main div>
- <div id="footer"></div>
- #main {
- position: relative;
- }
- #main #navigation {
- position: absolute;
- top: 0;
- left: 0;
- bottom: 0;
- width: 10em; /* or whatever */
- }
- #main #content {
- margin: 0;
- margin-left: 10em; /* or whatever width you set for #navigation */
- }
- html,body {
- height:100%;
- }
- <main div>
- <content div>
- <navigation div></div>
- </div>
- </div>
- $(function() {
- function unifyHeights() {
- var maxHeight = 0;
- $('#container').children('#navigation, #content').each(function() {
- var height = $(this).outerHeight();
- // alert(height);
- if ( height > maxHeight ) {
- maxHeight = height;
- }
- });
- $('#navigation, #content').css('height', maxHeight);
- }
- unifyHeights();
- });
- <div id="container" class="clearfix" style="margin:0 auto;width:950px;background:white url(SOME_REPEATING_PATTERN.png) scroll repeat-y center top;">
- <div id="navigation" style="float:left;width:190px;padding-right:10px;">
- <!-- Navigation -->
- </div>
- <div id="content" style="float:left;width:750px;">
- <!-- Content -->
- </div>
- </div>
Add Comment
Please, Sign In to add comment