CSS div layout fix

I have a problem with the layout of my divs, I'm practising my CSS skills making a layout but I'm coming across a consistent problem. Because i find it sorta hard to explain i'll provide an image with the code.

Code

<div class="section-small pattern-triangles drop-shadow">
    <div class="container">
        <div class="col-lg-3 grey-text">
            <div class="footer-title">
                <h3>Contact Us</h3>
            </div>
            <div class="footer-body">
                <ul class="footer-li">
                    <li>England, Leicester</li>
                    <li>ikdevelopment@hotmail.com</li>
                    <li>07940033706</li>
                </ul>
            </div>
        </div>
        <div class="col-lg-3 grey-text red-border">
            <div class="footer-title red-border" style="position: static">
                <h3>More</h3>
            </div>
            <div class="footer-body red-border">
                <ul class="footer-li">
                    <li>Blog</li>
                </ul>
            </div>
        </div>
    </div>
</div>

The code consists of two "Col-lg-3" classes (this is not bootstrap btw ive just used their naming conventions), the problem I have is that if the list within the column does not have the same amount of items there is a problem with height like below.

Im sure others have come accros this problem below is all the css code affiliated.

.footer-li {
    list-style-type: none;
    padding: 0;
    margin-left: 0;
    margin-bottom: 5px;
}

.footer-li li{
    margin-bottom: 10px;
 }

.col-lg-3{
    color: black;
    width: 33%;
    padding: 10px;
    display: inline-block;
}

Answers


You need to float both container elements left. You could add the following code to solve your issue:

.grey-text{ float:left; }

use float:left instead of display:inline-block:

.col-lg-3{
    color: black;
    width: 33%;
    padding: 10px;
    float:left;
}

Need Your Help

Problems passing special chars with observe_field

ruby-on-rails ajax

I am working on a rails project. Using the tag observe_field, I am taking text typed into a text area, processing it in a control, and displaying the result in a div (very similar to the preview in...

UIScrollView Not Scrolling in iPAD

ios objective-c ipad uiscrollview

I have a UiViewController, inside which I have a UIScrollView with the width and height as 768X3000. Inside the UIScrollView I have a view with widht and height as 768X1024.