Michael Mahony Michael Mahony - 1 year ago 43
HTML Question

Bootstrap layout -- divs not aligning properly

So I have a simple HTML layout using Bootstrap 3. I have one outer div that contains two divs on the inside. The top inner div seems to be wider than the bottom inner div. Because both have background colors I am wanting them to be the same width as each other. I am struggling to accomplish that.

PLEASE NOTE: The actual application uses Angular NG-REPEAT to build the inner divs, so the outer div needs to be left alone completely. It is where the NG-REPEAT is defined.

I have published a JSFiddle for you to see the problem. The gray div needs to be the same width as the blue div. Help?

JSFiddle showing the problem

The HTML code:

<div class="col-sm-10 col-sm-offset-1 caselist">
<div class="caselink-search">
<a href="#">Link1</a>
<a href="#">Link2</a>
<div class="case-info">
Information goes here

The relevant CSS code:

.caselist {
margin-top: 2px;
background-color: #63a0d4;
color: #fff;
height: 3.0em;
padding-top: 0.5em;
vertical-align: middle;

.caselink-search {
display: block;
padding-top: 5px;

.case-info {
margin-top: 7px;
background-color: #f2f2f2;
border: 1px solid #b3b3b3;
color: #000;

Answer Source

The bootstrap classes you added to the outermost div are adding padding that you don't want. Remove the col-sm-* classes and you'll lose that extra padding. Also you've got a hard coded height on the case-list class, which is causing it not to expand with its contents, giving you the appearance of the inner div being misaligned.

Updated Fiddle

The Computed tab in the Dev Tools window is your friend in situations like this. Also, FYI, bootstrap will add all kinds of custom styling to generic elements like form inputs, that you may or may not want.