CODEWITHSUNDEEP
htmlcss
jlai
jlai

Reputation: 345

Two column layout: Problems with column

I created a simple two column layout based on this: How to control overflow of table cell in Firefox?.

The left columns should be scrollable (top-down) and the right one should be fix.

HTML:

<div id="col1">
    <div id="list">
        <div class="row">Test 1</div>
        <div class="row">Test 2</div>
        <div class="row">Test 3</div>
        <div class="row">... more rows</div>
    </div>
</div><div id="col2"></div>

CSS:

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    background-color: #0c0;
}
#col1 {
    width: 25%;
    height: 100%;
    display:inline-block;
    background-color: #c00;
}
#col1>#list {
    width: 100%;
    overflow: auto;
}
#col1>#list>.row {
    padding: 5px;
    border-bottom: 1px solid #ccc;
}
#col2 {
    width: 75%;
    height: 100%;
    display:inline-block;
    background-color: #00c;
}

Please see this demo: http://jsfiddle.net/bitas/qRtjN/

Firefox 18.0.2 shows it nearly as expected. In other browsers the left column doesn't start at the top of the page but in the lower left corner.

It works as expected if I remove the "div#list". What's wrong with this div? How I can I fix it?

Upvotes: 1

Views: 309

Answers (2)

cimmanon
cimmanon

Reputation: 68319

Adding this CSS will correct the alignment of your columns:

#col1, #col2 {
    vertical-align: text-top;
}

http://jsfiddle.net/qRtjN/13/

Upvotes: 0

Alex
Alex

Reputation: 4774

I have modified your CSS a bit and it does work. Here it is:

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    background-color: #0c0;
}
#col1 {
    width: 25%;
    height: 1000px;
    display:inline-block;
    background-color: #c00;
}
#col1>#list {
    width: 100%;
    height: 100%;
    overflow: auto;
}
#col1>#list>.row {
    padding: 5px;
    border-bottom: 1px solid #ccc;
}
#col2 {
    width: 75%;
    height: 100px;
    display:inline-block;
    background-color: #00c;
    position:fixed;
    top:0;
    right:0;
}

Upvotes: 2

Related Questions