DIv inside my Bootstrap div will not right align (but text does) - html

Question

I am trying to align two divs, each of which are inside Bootstrap column divs. I want to align the one in the first column to the right, and the one in the second column to the left. The divs inside are positioned relative, so that content inside them can align absolutely. But even removing that positioning didn't fix my issue. I can't figure it out, because it works on teh plain text i place inside the columns/divs, just as a test, but not on the divs.
Here is my html:
<div class="container">
<div class="row">
<div class="leftFeature col-md-6">TESTTEXT<br>
<div class="blockFeature">
[types field='square-feature-image' size='full'][/types]
<div class="blockFeatureOverlay"></div>
<div class="blockFeatureText">
<h2>[types field='front-page-feature-tagline'][/types]</h2>
<h3>[types field='tag-line'][/types]</h3>
</div>
</div>
</div>
<div class="rightFeature col-md-6">TESTTEXT<br>
<div class="blockFeature">
[types field='square-feature-image' size='full'][/types]
<div class="blockFeatureOverlay"></div>
<div class="blockFeatureText">
<h2>[types field='front-page-feature-tagline'][/types]</h2>
<h3>[types field='tag-line'][/types]</h3>
</div>
</div>
</div>
</div>
</div>
Here is my css:
.leftFeature {
background-color:#F9D069;
text-align:center!important;
}
.rightFeature {
background-color:#B6DEFF;
text-align:center!important;
}
.col-sm-6 {padding:0;}
.blockFeature {
width:80%;
background-color:#7F9FA1;
background-size:100%;
line-height:0;
position:relative; /*removing this rule did not fix my issue */
}
.blockFeatureOverlay {
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
background-color:rgba(0, 0, 0, 0.25);
/*background-color:rgb(158,84,6, 0.25);*/
}
.blockFeature a {
text-decoration:none;
}
.blockFeature img {
width:100%;
height:auto;
}
.blockFeatureText {
position:absolute;
bottom:20px;
left:20px;
}
.blockFeatureText h2 {
font-size:2.4em;
font-weight:700;
color:#fff;
text-transform:uppercase;
margin-bottom:10px!important;
line-height:100%!important;
text-align:left;
}
.blockFeatureText h3 {
font-size:1.2em;
font-weight:300;
color:#fff;
text-transform:uppercase;
margin-bottom:0!important;
line-height:100%!important;
text-align:left;
}
And this is a representation of what i am getting: http://imgur.com/a/LekqV
but this is what i want: http://imgur.com/a/ER1kB
It's probably (hopefully) something really obvious. But after 24 hours of messing around, I cannot seem to fix it. I have tried adding text-right or pull-right class on the left hand div, but it either does something different than I need, or doesn't work at all.
thank you for anyone who can maybe help me out?
EDIT: Here are two fiddles i created
forked from a fiddle where someone seemed to have already created the bootstrap environment: https://jsfiddle.net/Katrina_B/w4dt8qq7/
one with no bootstrap, in case the above is not correct, and someone knows better how to add bootstrap to it: https://jsfiddle.net/Katrina_B/c4kxa06s/
I am completely new to Bootstrap, and rarely use Jfiddle, so apologies if i have done this incorrectly. In any case, in neither example, are the divs doing what i expect or wish them to do.

Answer 1

simple you should use bootstrap pull-left and pull-right class to align your divs
<div class="leftFeature col-md-6 pull-left">TESTTEXT<br> .... </div>
<div class="rightFeature col-md-6 pull-right">TESTTEXT<br>....</div>

Answer 2

.leftFeature .blockFeature {
float: right;
}
This style may keep your complete div in right

Answer 3

Below the div with the class col-md-6 you can use bootstrap again. Try adding a div with class="col-md-10 col-md-offset-2" for the left side, and on the right side class="col-md-10"
<div class="container">
<div class="row">
<div class="leftFeature col-md-6">TESTTEXT<br>
<div class="col-md-10 col-md-offset-2>
<div class="blockFeature">
[types field='square-feature-image' size='full'][/types]
<div class="blockFeatureOverlay"></div>
<div class="blockFeatureText">
<h2>[types field='front-page-feature-tagline'][/types]</h2>
<h3>[types field='tag-line'][/types]</h3>
</div>
</div>
</div>
</div>
<div class="rightFeature col-md-6">TESTTEXT<br>
<div class="col-md-10">
<div class="blockFeature">
[types field='square-feature-image' size='full'][/types]
<div class="blockFeatureOverlay"></div>
<div class="blockFeatureText">
<h2>[types field='front-page-feature-tagline'][/types]</h2>
<h3>[types field='tag-line'][/types]</h3>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 4

You should use bootsrap predefined pull-left and pull-right class to positioning div left and right. This could work for you.
Or you can use css float: left and float: right property.
Example:
.leftFeature {float: left;} and .rightFeature {float: right}