Hi, I'm working on a semi-liquid layout for my wordpress blog and I'm having a bit of a problem. It's essentially a three column layout: a left hand image of fixed width, a central post area of variable width and a right hand fixed width sidebar.
I can get the behaviour ok as far as stretching and positioning, but it seems like the heights of the left or right hand side div's are affecting one of the div's *inside* the central column structure. The 'postheader' div inside the central area stretches in height to match the height of whatever floating div (left or right) is tallest. I didn't think inner (contained) divs could be affected by divs or other elements completely outside their parents in that way. There are several layers of div's so I've changed their colours and labeled them for clarity. The first screenshot is when the left div is tall and the right div is short. The second illustrates the vice versa case. In each case, the postheader div seems to take up the height of the tallest float. Clearly I'm doing something wrong here, but I've been pulling my hair out for days and just can't see what's going wrong. Any ideas? I've posted links to the two screenshots below as well as my index.php file and style.css file at the bottom of this message if it's of any help. Thanks. RQ Here is the first screenshot: http://img214.imageshack.us/my.php?image=divprob1re7.jpg Here is the second screenshot: http://img352.imageshack.us/my.php?image=divprob2cc9.jpg ***** index.php file listing ***** <?php get_header(); ?> <div id="wrapper"> <div id="menu"> <ul> <?php wp_list_pages('depth=1&title_li='); ?> </ul> </div> <div id="container"> div-container <div id="leftimage"> div-leftimage </div> <div id="content"> div-content <div id="sidebarfull"> div-sidebarfull <?php get_sidebar(); ?> </div> <div id="centrepanel"> div-centrepanel <?php if(have_posts()) : ?> <div class="navigation">div-navigation <?php posts_nav_link(); ?></div> <?php while(have_posts()) : the_post(); ?> <div class="post"> div-post <div class="postheader"> <!--contains post title and date--> div-postheader <div class="entry-date"> div-entrydate <div class="line1"><?php the_time('M d'); ?></div> <div class="line2"><?php the_time('y'); ?></div> </div> <div class="entry-title"> div-entrytitle <h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2> </div> <br/> </div><!--close postheader div--> <div class="entry-content"> div-entry-content <?php the_content(); ?> <?wp_link_pages(); ?> <?php edit_post_link('Edit','<p>','</p>'); ?> </div> <div class="entry-meta"> div-entry-meta Posted by <?php the_author(); ?> under <?php the_category(',') ?> with <?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?> </div> </div><!--end of post div--> <?php endwhile;?> <div class="navigation">div-navigation <?php posts_nav_link(); ?></div> <?php endif; ?> <p>this is just before end of centrepanel div</p> </div><!--end of centrepanel div--> </div><!--close content div --> </div><!--close container div--> <?php get_footer(); ?> ***** style.css file listing ***** body{ background: white; color: #555753; font-family: "Bitstream Vera Sans", Arial, Helvetica, sans-serif; font-size: 12px; margin: 5px; } /* Structure and Layout */ .postheader{ background: #c63; margin: 10px; padding: 10px; } .postheader br{ height: 0px; clear: both; } .entry-date{ width: 80px; float: right; background: #ccc; margin: 10px; } .entry-title{ margin: 1px; background: #c9c; } .entry-content{ background: #eee; margin: 10px; } .entry-meta{ margin: 10px; background: #999; } .post{ background: purple; margin: 10px; padding: 10px; } .navigation{ background: #6f9; margin: 10px; } #centrepanel{ background: #9cc; margin: 10px 220px 10px 10px; } #content{ background: #f39; margin: 10px 10px 10px 220px; } #leftimage{ width: 200px; height: 115px; float: left; background: white; margin: 15px; background: #fff url(images/header.jpg) no-repeat top left; } #footer{ background: black; color: white; clear: both; } #menu{ background: #9f3; } #menu ul li{ display: inline; } #container{ background: #cc9; margin: 10px; } #sidebarfull { background: white; float: right; width: 200px; margin: 15px; } #photo{ /*float: right;*/ width: 150px; height: 150px; background: white url("images/photo.jpg") top left no-repeat; padding: 0px; margin-left: 10px; } .sidebar ul br{ height: 0px; clear: both; } .sidebarcontainer1{ } .sidebarcontainer2{ } .sidebar ul{ list-style: none; padding-bottom: 30px; } .sidebar a{ color: #555753; text-decoration: none; } .sidebar a:hover{ color: #f57900; } ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
