CODEWITHSUNDEEP
htmlcss
Jones King
Jones King

Reputation: 63

My use of float doesn't work as expected

For some reason my float class dosen't work:

HTML:

<div class="col-md-5">
        <div class="BoxTitleSettings">
            <div class="left col-sm-6">
                Your Items
            </div>
            <div class="right col-sm-6">
                asuhido
            </div>
        </div>
        <div class="BoxSettings">

        </div>
    </div>

CSS:

.left {float: left;} .right {float: right;}

Picture of code result: Image

Upvotes: 0

Views: 59

Answers (3)

Muhammad
Muhammad

Reputation: 7344

I can see you using bootstrap so use its builtin classes pull-left and pull-right. 

 <div class="col-md-5">
    <div class="BoxTitleSettings">
        <div class="pull-left col-sm-6">
            Your Items
        </div>
        <div class="pull-right col-sm-6">
            asuhido
        </div>
    </div>
    <div class="BoxSettings">

    </div>
</div>

Upvotes: 1

Rashid
Rashid

Reputation: 272

You don't need to float just try this code:

<div class="col-md-5">
    <div class="row BoxTitleSettings">
        <div class="col-sm-6 text-left">Your Items</div>
        <div class="col-sm-6 text-right">asuhido</div>
    </div>
    <div class="row BoxSettings"></div>
</div>

Upvotes: 0

Johannes
Johannes

Reputation: 67799

If you want the text of the right DIV to be aligned right, you have to add text-align: right to the .right rule.

Upvotes: 1

Related Questions