CODEWITHSUNDEEP
htmlcss
louisav
louisav

Reputation: 382

button alignment under floated elements

See attached image of buttons that are not aligningenter image description here

The CSS and html is:

<div class="row">
<div class="col-lg-10">
    <div class="athlete-image">
        <img src="{{ url('assets/img/profile.png') }}" class="img-circle img-responsive img-center">
    </div>                      
    <div class="info-pad">
        <div class="athlete-name">
            <h4>{{ $an_athlete->name }} {{ $an_athlete->surname }}</h4>    
        </div>
        <div class="athlete-info">
            <p><i class="fa fa-phone athlete-info-icon" aria-hidden="true"></i> {{ $an_athlete->cellphone }}</p>
            <p><i class="fa fa-male athlete-info-icon" aria-hidden="true"></i> {{ $an_athlete->gender }}</p>
            <p><i class="fa fa-female athlete-info-icon" aria-hidden="true"></i> {{ $an_athlete->gender }}</p>
        </div>
        <div class="action-btns">
            <a href="{{ route('admin.edit_athlete', ['athlete' => $an_athlete->id]) }}" class="btn btn-labeled btn-info">
                <span class="btn-label"><i class="fa fa-pencil"></i></span>Edit Profile</a>
            <a href="{{ route('admin.test_athlete', ['athlete' => $an_athlete->id]) }}" class="btn btn-labeled btn-info" role="button">
                <span class="btn-label"><i class="fa fa-heartbeat"></i></span>Create New Test Day</a>
        </div>
    </div>                       
</div>


.athlete-image {
max-height:100px;
max-width:100px;
overflow:hidden;
padding-top: 10px;
padding-left: 10px;
margin-bottom: 20px;
float: left;
}

.info-pad {
 margin-left: 15px;
 float: left;
}

.athlete-name {
 margin-top: 5px;    
}

.athlete-info {
 display: inline-block;
 float: left;
}

.athlete-info > p {
 font-size: 14px;
 color: #666666;    
 float: left;
 padding-right: 12px;
 display: inline-block;    
}

.action-btns{
 padding: 15px 0px;    
}

I've tried adding <div style="clear: both;"></div> after the action buttons and including float: left in the action buttons css. Didn't help. If I make the button label shorter it works and aligns properly. Question: Why are the two blue buttons not next to each other?

Upvotes: 0

Views: 23

Answers (2)

athi
athi

Reputation: 1683

Add clear:both; for the .action-btns button since .athlete-info is floated.

.action-btns {   
  clear: both;
}

Upvotes: 0

Super User
Super User

Reputation: 9642

You have to use clear:both for clear the floated element.
Just add following CSS to resolve this issue

.action-btns{
  padding: 15px 0px;    
  clear: both;
}

Upvotes: 1

Related Questions