CODEWITHSUNDEEP
css
Paolo Rossi
Paolo Rossi

Reputation: 2510

CSS how to align elements inside a div with 2 columns

In my html/css test page I've a div container with 2 cols. My problem is that if I insert a div in the left column with the top margin or border, the div in the right column is not aligned at the top but is influenced by the div in the left column and I can not understand why.

CSS

body { 
font-family: Arial, Helvetica, sans-serif; 
font-size: 12px; 
background-color: #f5f6f7; 
} 

.container { 
width: 960px; 
margin-left: auto; 
margin-right: auto; 
} 

.row { 
margin-top: 10px; 
background: #fff; 
} 

.row:before, .row:after { 
display: table; 
line-height: 0; 
content: ""; 
} 

.row:after { 
clear: both; 
} 

.footer { 
height: 36px; 
line-height: 36px; 
} 

[class*="span"] { 
min-height: 1px; 
margin: 0px; 
} 

.span1 { 
width: 958px;
display: table-cell;     
} 

.span2  { 
width: 699px; 
display: table-cell;
} 

.span3  { 
width: 258px;
display: table-cell;
} 

.span3.dark {
background: #616161;
}

.content-center {
padding: 0px;
}

.a { 
background:#FF0000; 
border: 5px solid #00FF00;
margin-bottom: 10px;
}

.b { 
background:#FF8040; 
border: 1px solid #00FF00;
}

HTML

<div class="container">

<div class="row">

<div class="span2">

    <div class="content-center">
       <div class="a">LEFT PANEL <br /><br /><br /><br /><br /><br /></div>
    </div>

</div>

<div class="span3 dark">

    <div class="content-center">
        <div class="b">RIGHT PANEL <br/> Why it is not aligned at the top ?</div>
    </div>

</div>

</div>

</div>

How can I solve my problem? thanks

CSSDECK example

Upvotes: 0

Views: 233

Answers (1)

Nico O
Nico O

Reputation: 14102

I've not seen this style of grid position before. What so ever.

Do this:

.span3
{
   vertical-align: top;
}

Upvotes: 1

Related Questions