Here what you need is not floats. Try *position: absolute* or *position: relative*.
On Fri, Nov 16, 2012 at 12:34 AM, 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/ -- Boray Eris www.pidizayn.com ______________________________________________________________________ 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/
