3 Spalte Struktur, wo die 2 äußeren Spalten an den unteren Rand des Bildschirms gezogen werden

Question

Ich habe eine 3 col einrichten und wenn die Seite lädt die beiden äußeren Spalten an den unteren Rand des Bildschirms geschoben werden. Ich kann sie nicht mithilfe von Rändern verschieben und glaube, dass sie mit der mittleren Spalte zusammenhängen, die einen externen Feed importiert. Ich habe Stunden damit verbracht, ohne dass eine Lösung in Sicht war. Jede Hilfe wäre sehr dankbar für. Webseite http://carrickswan.com/fix-test/

Sorry wegen der Inline-CSS, es macht es chaotisch, aber hoffentlich kann jemand das Problem von der Live-Seite sehen.

 <!-- col 1 --> 
    <div style="background-color: white; width: 18%; margin: 25px 20px 0px   40px; display:inline-block;"> 
    <div> 
     <h2 style="width: inherit; color: white; background-color: #2e2d2d; padding: 5px; background-image: url('http://carrickswan.com/wp-content/uploads/2016/04/header-bg2.png'); 
background-repeat: no-repeat; 
background-position: right;" class="col-title">PLAY ONLINE</h2> 
     <a href=""><img src="http://carrickswan.com/wp- content/uploads/2016/04/pay.jpg" alt="play swan lotto"></a> 
    </div> 

     <div> 
     <h2>MEMBERSHIP</h2> 
     <a href=""><img src="http://carrickswan.com/wp-content/uploads/2016/04/membership.jpg" alt="pay swan membership"></a> 
    </div> 
    </div> 

    <!-- col 2 --> 
    <div id="content" style="background-color: white; width: 50%; display:inline-block; margin: 25px;"> 
    <div id="content_fixtures"></div> 
    </div> 

    <!-- col 3 --> 
    <div style="width: 18%; display: inline-block; margin-top: 0px; background-color: white;"> 
    <h2 class="title" style="color:white; background-color: #2e2d2d; padding: 5px; background-image: url('http://carrickswan.com/wp- content/uploads/2016/04/header-bg2.png'); background-repeat: no-repeat; 
    background-position: right;">LOTTO</h2> 
    <?php $cat_id = 7; //the certain category ID 
    $latest_cat_post = new WP_Query(array('posts_per_page' => 1, 'category__in' => array($cat_id))); 
    if($latest_cat_post->have_posts()) : while($latest_cat_post->have_posts()) : $latest_cat_post->the_post(); ?> 

    <h2 class="entry-title"><a href="<?php the_permalink() ?>" rel="bookmark" ><?php the_title(); ?></a></h2> 
    <div style="padding:5px;"> 
     <?php the_content($more_link_text,$strip_teaser); ?> 

     <a href="<?php the_permalink() ?>" class="more-link">Read More</a> 
     </div> 
    <?php endwhile; endif; ?> 
    </div> 

Answer 1

vertical-align: top; zu den beiden äußeren divs hinzufügen - Ich habe versucht, es auf Ihrer Seite und es funktionierte.

Answer 2

wenn Sie wollen sie nicht oben

hier ausrichten machen, ist die Lösung

wickeln Sie Ihre 3 divs innerhalb des Behälters

<div class="main-container"> 
    <div class="column one"> 
    <div class="column two"> 
    <div class="column three"> 
</div> 

CSS

.main-container 
{ 
display:flex; 
} 
.main-container .column 
{ 
flex:1; 
}