Lucassith
Lucassith

Reputation: 49

CSS prevent div from moving top

Here's the problem:

`http://jsfiddle.net/5gju85un/3/`

I want to prevend div #3 from moving higher while keep float left. How can I do that?

EDIT

These divs are created by loop in my original code so I can't just make two parent divs.

EDIT

Inserted whole code (I'm making own template to use in wordpress)

HTML/PHP

if ( $loop->have_posts() ) {
        while ( $loop->have_posts() ) : $loop->the_post()?>
                        <div class="produkt ramka">
                            <div class="produkt_obraz">
                                <?php woocommerce_show_product_images();?>
                            </div>
                            <div class="produkt_nazwa">
                                <h3 class="produkt_litery"><?php woocommerce_template_single_title();?></h3>
                            </div>
                            <div class="produkt_cena">
                                <?php woocommerce_template_single_price();?>
                            </div>
                            <div class="produkt_line">
                            </div>
                            <div class="produkt_opis">
                                <?php the_content();?>
                            </div>
                            <div class="produkt_koszyk">
                                <?php woocommerce_template_loop_add_to_cart()?>
                            </div>
                        </div>    

        <?php endwhile;
    }

CSS

.produkt
{
    display: inline-block;
    height:auto;
    min-height:120px;
    width:49.50%;
    margin-bottom:5px;
    background-color:#252525;
    overflow:hidden;
}
.produkt:nth-child(2n+1)
{
    float:left;
}
.produkt:nth-child(2n)
{
    float:right;
}

As you can see the code I've done in jsfiddle is based on this

Upvotes: 0

Views: 376

Answers (1)

himanshu
himanshu

Reputation: 1797

demo

<div class="divs st">div1</div>
<div class="divs nd">div2</div>
<div style="clear:both"></div>
<div class="divs rd">div3</div>
<div class="divs th">div4</div>
<div class="divs">div5</div>
<div class="divs">div6</div>

Upvotes: 1

Related Questions