cmp cmp - 8 months ago 46
CSS Question

Why won't my sidepanel float right at the top of a div?

My sidepanel doesn't float right properly. It acts (for some reason) as if there's a top margin, it refuses to align next to the page title.

I'm also attempting to make it responsive using


It should be here:

Arrow pointing to where the sidepanel should be

My main content sits in a
, the
should make a column of
, I assumed the
would too make a column of
width:27%; float:right;
all within that

I've inspected element and tried to force
etc but it is still not behaving itself.

Does anyone know what I am doing wrong? .


<div id="pageArea">
<div class="colPad">
<div class="rowSidepanel">
<!-- InstanceBeginEditable name="main content" -->
<div class="breadCrumb"> <a href="/">Home</a> <span style="font: Georgia;"> > </span> Repertoire</div>
<p class="introPara">Intro</p>
<p>Main content....</p>
<!-- InstanceEndEditable -->
<aside id="sidebar">
<div class="sidepanelArea"> Sidepanel </div>
<div class="clearBoth"></div>


#pageArea {
max-width: 1050px;
margin: 0px auto 0px auto;
padding: 134px 0px 0px 0px;
display: block;
background-repeat: no-repeat;
background-position: 0% 12%;
min-height: 667px;
z-index: 1;
overflow: hidden;
position: relative;
.colPad {
padding: 0px 15px 0px 15px;
.rowSidepanel {
width: 60%;

aside {
float: right;
padding: 1%;
width: 27%;
margin: 0% 0px 20px 0px;
color: white;
opacity: 0.7;
filter: alpha(opacity=70); /* For IE8 and earlier */
@media all and (max-width : 799px) {

#sidebar {
width: 99%;
padding: 1% 0px 0px 0px;
margin: 0px 0px 0px 0px;
border-top: 3px solid #dc1b20;
background-color: #FFF;
color: black;

Answer Source

Your .rowSidepanel is displayed block and no matter of his width he is assigned to be across all screen. Just make him float: left;

.rowSidepanel {
width: 60%;
float: left;