Here is the code structure in the JSfiddle link below. When I apply float:right to the "Add" text, it creates extra space above the "Quick Links" & "Top 20 Sites" sections.
#home-content {
padding: 5px;
}
#home-content .css-table #row1-col3 .col-body {
padding: 5px 5px;
/* border: 1px solid #000; */
}
/* Home page Quick Links column */
#home-content .css-table #row1-col1 .col-body > div {
max-height: 232px;
overflow: auto;
}
/* Home page MyShortcuts column */
#home-content .css-table #row1-col3 .col-body > div {
max-height: 215px;
overflow: auto;
}
.css-table {
display: table;
border-spacing: 9px 5px;
margin-left: auto;
margin-right: auto;
width: 980px;
}
.css-table #row1-col1 {
display: table-cell;
width: 170px;
border: 1px solid #cccccc;
background-color: White;
}
.css-table #row1-col2 {
display: table-cell;
width: 540px;
border: 1px solid #cccccc;
padding: 0;
background-color: White;
}
.css-table #row1-col3 {
display: table-cell;
width: 255px;
border: 1px solid #cccccc;
padding: 0;
background-color: White;
}
.css-table #row2 {
display: table-cell;
width: 906px;
border: 1px solid #cccccc;
padding: 0;
background-color: White;
}
.css-table #row2-col1 {
display: table-cell;
width: 490px;
border: 1px solid #cccccc;
padding: 0;
background-color: White;
}
.css-table #row2-col2 {
display: table-cell;
width: 490px;
border: 1px solid #cccccc;
padding: 0;
background-color: White;
}
.col-header {
border-bottom: 1px dotted #cccccc;
position: relative;
height: 24px;
padding: 7px 7px 1px 7px;
font-family: verdana;
font-size: 13px;
background-color:#cccccc;
}
.col-body {
padding: 0px 0px 0px 0px;
border-spacing: 1px 1px;
font-family: verdana;
font-size:12px;
}
.col-newsfeeds {
padding: 5px 5px 5px 5px;
border-spacing: 1px 1px;
}<div id="home-content">
<div class="css-table">
<div id="row1-col1">
<div class="col-header">
Quick Links
</div>
<div class="col-body">
Test 1
</div>
</div>
<div id="row1-col2">
<div class="col-header">
Top 20 Sites
</div>
<div class="col-body">
Test 2
</div>
</div>
<div id="row1-col3">
<div class="col-header">
<div style="float:left;">My Shortcuts</div>
<div style="float:right;">Add</div>
</div>
<div class="col-body">
Item 1<br/>
Item 2<br/>
Item 3<br/>
Item 4<br/>
Item 5<br/>
Item 6<br/>
Item 7<br/>
Item 8<br/>
Item 9<br/>
Item 10<br/>
</div>
</div>
</div>
<div class="css-table">
<div id="row2-col1">
<div class="col-header">
In the News
</div>
<div class="col-body">
Test 3
</div>
</div>
<div id="row2-col2">
<div class="col-header">
Announcements
</div>
<div class="col-body">
Test 4
</div>
</div>
</div>
</div>Is there a way to position the "Add" text to the right of the "My Shortcuts" text without impacting the layout of the other sections?
Thank you.