Utkarsh Mittal Utkarsh Mittal - 2 months ago 5
CSS Question

Unexpected behavior in div alignment in bootstrap grid layout

http://codepen.io/utkarshmttl/full/BLWJVL/

<html>
<head>
<title>Footer</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-5 col-sm-5 col-xs-12" id="left">
<img src="" alt="Lithics logo" style="margin-bottom:25px">
<p style="margin-bottom:25px">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequatt, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan.</p>
<h2 style="margin-bottom:25px">Payment Method</h2>
<p style="margin-bottom:25px"> We are using secure Paypal & Money-bookers payment method. You can pay directly form your Credit Card via Moneybookers or Paypal and NEVER store your card information on our site </p>
<ul class="payment-item">
<li class="item"><a href=""><img src="http://demo.magentech.com/themes/sm_love_fashion/media/wysiwyg/we-pay-icon.png" alt="Payment"></a></li>
<li class="item"><a href=""><img src="http://demo.magentech.com/themes/sm_love_fashion/media/wysiwyg/master-cart-icon.png" alt="Payment"></a></li>
<li class="item"><a href=""><img src="http://demo.magentech.com/themes/sm_love_fashion/media/wysiwyg/a-icon.png" alt="Payment"></a></li>
<li class="item"><a href=""><img src="http://demo.magentech.com/themes/sm_love_fashion/media/wysiwyg/paypal-icon.png" alt="Payment"></a></li>
<li class="item"><a href=""><img src="http://demo.magentech.com/themes/sm_love_fashion/media/wysiwyg/visa-icon.png" alt="Payment"></a></li>
</ul>
</div>
<div class="col-md-7 col-sm-7 col-xs-12" id="right">
<div class="row">
<div class="col-lg-4 col-md-4 col-xs-6 block-ft">
<h2>Connect with Us</h2>

<ul class="fa-ul">
<li class="custom-list-item"><a title="Follow us on youtube" href="#"><i class="fa fa-youtube-square fa-2x"></i>&nbsp &nbsp Follow us on youtube</a></li>
<li class="custom-list-item"><a title="Follow us on facebook" href="#"><i class="fa fa-facebook-square fa-2x"></i>&nbsp &nbsp Follow us on facebook</a></li>
<li class="custom-list-item"><a title="Follow us on twitter" href="#"><i class="fa fa-twitter-square fa-2x"></i>&nbsp &nbsp Follow us on twitter</a></li>
<li class="custom-list-item"><a title="Follow us on google plus" href="#"><i class="fa fa-google-plus-square fa-2x"></i>&nbsp &nbsp Follow us on google plus</a></li>
</ul>
</div>
<div class="col-lg-4 col-md-4 col-xs-6 block-ft">
<h2>About Us</h2>

<ul class="fa-ul">
<li class="custom-list-item"><a title="About Us" href="#">About Us</a></li>
<li class="custom-list-item"><a title="Contact Us" href="#">Contact Us</a></li>
<li class="custom-list-item"><a title="Customer Service" href="#">Customer Service</a></li>
<li class="custom-list-item"><a title="Partners" href="#">Partners</a></li>
<li class="custom-list-item"><a title="Careers" href="#">Careers</a></li>
</ul>
</div>
<div class="col-lg-4 col-md-4 col-xs-6 block-ft">
<h2>Shopping with Us</h2>

<ul class="fa-ul">
<li class="custom-list-item"><a title="Privacy Policy" href="#">Privacy Policy</a></li>
<li class="custom-list-item"><a title="Refund Policy" href="#">Refund Policy</a></li>
<li class="custom-list-item"><a title="Terms of Use" href="#">Terms of Use</a></li>
<li class="custom-list-item"><a title="FAQ" href="#">FAQ</a></li>
</ul>
</div>
<div class="col-lg-4 col-md-4 col-xs-6 block-ft">
<h2>Your Account</h2>

<ul class="fa-ul">
<li class="custom-list-item"><a title="Your Account" href="#">Your Account</a></li>
<li class="custom-list-item"><a title="Personal Info" href="#">Personal Info</a></li>
<li class="custom-list-item"><a title="Search Terms" href="#">Search Terms</a></li>
<li class="custom-list-item"><a title="Advanced Search" href="#">Advanced Search</a></li>
<li class="custom-list-item"><a title="Order History" href="#">Order History</a></li>
</ul>
</div>
<div class="col-lg-8 col-md-8 col-xs-6 block-ft">
<h2>Contact Us</h2>

<ul class="fa-ul">
<li class="custom-list-item"><i class="fa fa-plus-square fa-2x"></i>&nbsp &nbsp Address : No 40 Baria Sreet 133/2 NewYork City, NY, United States</li>
<li class="custom-list-item"><i class="fa fa-envelope-square fa-2x"></i>&nbsp &nbsp Email : support@lithics.in</li>
<li class="custom-list-item"><i class="fa fa-phone-square fa-2x"></i>&nbsp &nbsp Phone : 0123456789</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>


Style sheet for this above pen:

h2{
font-size:29px;
}
.row{
color:#FFF;
}
#left{
background: url('http://demo.magentech.com/themes/sm_love_fashion/skin/frontend/sm_lovefashion/default/images/bg-big-footer.png');
padding: 30px 15px 20px 15px;
}
.payment-item{
padding:0px;
}
.payment-item .item{
display:inline-block;
margin-right:8px;
}
.payment-item .item img{
opacity:0.7;
filter:alpha(opacity = 70);
}
.payment-item .item img:hover{
opacity:1;
filter:alpha(opacity = 100);
}
#right{
background:#272727;
padding: 30px 15px 20px 15px;
}
.block-ft{
margin-bottom:35px;
}
.fa-ul{
margin-left:0px;
}
.custom-list-item{
opacity:0.7;
filter:alpha(opacity = 70);
margin-bottom:10px;
}
.custom-list-item:hover{
opacity:1;
filter:alpha(opacity = 100);
}
a,a:hover{
color:#ffffff;
text-decoration:none;
}


Here, the "your account" div is automatically right aligned, why is that? What I want is: for large devices- 3 equal columns, then in next row one column of size 4 and other of size 8. For small/medium devices- 2 equal columns, then again 2 equal columns in next row and then finally size 6 column in third row.

http://codepen.io/utkarshmttl/pen/qaAoJx,

<div class="container-fluid">
<div class="row">
<div class="col-lg-4" style="background-color:red">wrfrwf
</div>
<div class="col-lg-4" style="background-color:green">fgsfgsf
</div>
<div class="col-lg-4" style="background-color:red">hjlhjl
</div>
<div class="col-lg-4" style="background-color:green">jlkjkl
</div>
<div class="col-lg-8" style="background-color:yellow">jhjhuh
</div>
</div>
</div>


like in this (only implemented for large screens) once the grid width is exhausted, the new col automatically goes in new row. Why the difference?

Also, how do I center the text in list items in front of icons (fb, twitter etc)- I have tried line height, did not work.

And how do I make sure that the height of both the columns (id left and right) is same as that of the column which has larger height?

Answer

The problem is that your cols has different height so they stop in the first free space on the left.

You can force correct alignment using some empty rows between blocks.

check this pen:

http://codepen.io/anon/pen/GjWdKa

        <div class="row visible-sm visible-xs"></div>
        <div class="col-lg-4 col-md-4 col-xs-6 block-ft">
          <h2>Shopping with Us</h2>
    ...

For example in this case i force 'Shopping with Us' col to float in a new row for sm and xs size.

Comments