CODEWITHSUNDEEP
htmlcsscss-float
Slinky
Slinky

Reputation: 5832

Aligning multiple elements with CSS

All,

I am trying to align a few elements, floated right and inline but I am not having much luck.

Here is what I am trying to do (see 3 elements on the right inside light blue header )

enter image description here

I am ending up with this:

enter image description here

Live Example http://jsfiddle.net/castonzo/3G4jb/

My HTML

 <div id="addCounselorSection">
     <div class="blue-toolbar">
         <span class="blue-toolbar-title">Club Counselors</span>
         <div class="blue-toolbar-search-tools">
             <div class="blue-toolbar-search-tools-title">Find counselors</div>
             <div><input type="text" /></div>
             <div class="blue-toolbar-search-tools-link"><a href="#">Add</a></div>

         </div>
     </div> 
 </div>

My CSS

/****** Toolbar ****************/
.blue-toolbar {

    background-color: #086CA1;
    border: 1px solid #235B79;
    height: 45px;
    width: auto;
    margin-bottom: 13px;
    margin-top: 20px;
    position: relative;
}

.blue-toolbar-title {

    position: absolute; 
    bottom: 0; 
    left: 0; 
    float:left; 
    padding-left:5px; 
    padding-bottom:4px; 
    color:#ffffff; 
    font-weight:bold; 
    font-size:18px;
}

.blue-toolbar-search-tools {

    float: right;
    width: auto;
    display: block;
}

.blue-toolbar-search-tools-title {

    color:#ffffff; 
    font-weight:bold; 
    font-size:14px;
    float: left;
    position: absolute; 
    bottom: 0;
    right: 0;
}

.blue-toolbar-search-tools a{
    color:#ffffff;
    font-weight:bold;

}

Upvotes: 0

Views: 69

Answers (3)

mgsipl
mgsipl

Reputation: 199

Try this :

CSS : 

<style>
/****** Toolbar ****************/
.blue-toolbar {

    background-color: #086CA1;
    border: 1px solid #235B79;
    height: 45px;
    width: auto;
    margin-bottom: 13px;
    margin-top: 20px;
    position: relative;
}

.blue-toolbar-title {

    position: absolute; 
    bottom: 0; 
    left: 0; 
    float:left; 
    padding-left:5px; 
    padding-bottom:4px; 
    color:#ffffff; 
    font-weight:bold; 
    font-size:18px;
}

.blue-toolbar-search-tools {

    float: right;
    width: auto;
    display: block;
}

.blue-toolbar-search-tools-title {

    color:#ffffff; 
    font-weight:bold; 
    font-size:14px;
    float: left;
    bottom: 0;
    right: 0;
    float:left;
    padding:12px 5px;
}

.blue-toolbar-search-tools a{
    color:#ffffff;
    font-weight:bold;
}

.blue-toolbar-search-tools-input{
    padding:8px 5px;
    float:left;
}
.blue-toolbar-search-tools-link{
    padding:8px 5px;
    float:left;
}
</style>

HTML:

<div id="addCounselorSection">
     <div class="blue-toolbar">
         <span class="blue-toolbar-title">Club Counselors</span>
         <div class="blue-toolbar-search-tools">
             <div class="blue-toolbar-search-tools-title">Find counselors</div>
             <div class="blue-toolbar-search-tools-input"><input type="text" /></div>
             <div class="blue-toolbar-search-tools-link"><a href="#">Add</a></div>

         </div>
     </div> 
</div>

Upvotes: 1

Nickolay Kondratenko
Nickolay Kondratenko

Reputation: 1951

By default div is block element so you have either display it inline or float it:

.blue-toolbar-search-tools div{ float: left; }

or

.blue-toolbar-search-tools div{ display: inline; }

Upvotes: 0

Josh Crozier
Josh Crozier

Reputation: 241198

Remove the absolute positioning and change the display of all three children elements from block to inline-block. As for vertical positioning, just add a margin to the parent element.

UPDATED EXAMPLE HERE

.blue-toolbar-search-tools {
    float: right;
    margin:16px 10px;
}
.blue-toolbar-search-tools > div {
    display:inline-block;
}

Upvotes: 2

Related Questions