Looks like you need to clear the floats for the footer to drop down to its rightful place. Adding clear:both; to the footer is one way. Google is your friend here! :-)
Sent from my iPhone On Nov 15, 2012, at 5:34 PM, Marijn Bent <[email protected]> wrote: > Hello everybody, > > I'm struggling with the following question for a while. I appreciate it very > much if someone want to help me. > > I have the following code for displaying three posts and a custom field > (WordPress): > > <div class="staticcustomfield"> > <?php the_meta(); ?> > </div> > <?php query_posts( $query_string . '&posts_per_page=3' ); > $c = 0; > if (have_posts()) : while (have_posts()) : the_post(); > $c++; > $class = ' post-num-' . $c;?> > <div <?php post_class( $class );?> id="post-<?php the_ID();?>"> > <ul> > <li><h2 class="titel"><a href="<?php the_permalink(); ?>"><?php the_title(); > ?></a><h2></li> > <li><?php the_time(get_option('date_format'));?></… > <li><?php the_excerpt();?></li> > </ul> > </div> > <?php endwhile;?> > <?php endif;?> > > I get, with these code in a page template, this (only added "background: > white;" in the css file for all the elements): > http://cl.ly/image/1b0b412W012J > > How can I chance this to te following design: > http://cl.ly/image/0Z3I20183A0H > > I am stuck here. The problem isn't for the rounded edges, font, colors or > other details, I can't get the position right. Can someone help me? The > elements are: > .staticcustomfield > .post-num-1 > .post-num-2 > .post-num-3 > > I've tried the following: > > .staticcustomfield { > background: white; > float: right; > width: 27%; > } > .post-num-1 { > background: white; > float: left; > width: 65% > } > > .post-num-2 { > background: white; > float: left; > width: 35% > } > > .post-num-3 { > background: white; > float: right; > width: 35% > } > > But if I use these codes, the 'main' div for all the content on the page > loose the height and the footer will come between the elements, and the > positioning is also wrong (http://cl.ly/image/0l2r3c07412l <-- footer is has > the dark-blue color as background). > > Can someone please explain what I am doing wrong and what the solution is for > this problem? Thanks! I've created a quick site where you can see the > problem: http://www.marijnbent.nl/fakelocalwordpressinstallation/. > > Regards, > Marijn Bent > ______________________________________________________________________ > 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/ ______________________________________________________________________ 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/
