Question

I have 2 internal div’s within a main div

JSfiddle – http://jsfiddle.net/uwdnH/

Illustration – http://img685.imageshack.us/img685/8485/tablek.png

HTML

<div class="mytable">
    <div class="leftNavTable">
        <a herf="#">div1</a>
    </div>
    <div class="rightNavTable">
        <a herf="#">div2</a>
    </div>
</div>

CSS

.mytable {
float:left;
width:300px;
height:200px;
border-width:2px;
border-style:solid;
border-color:#000;
overflow:scroll;
}

.leftNavTable{
float:left;
width:75px;
height:250px;
border-width:2px;
border-style:solid;
border-color:#FF0000;
}

.rightNavTable {
float:left;
width:200px;
height:250px;
border-width:2px;
border-style:solid;
border-color:rgb(0,0,255);

}

My requirement is that..

1)I wanted the size of div2 to be more but if I increase the width div2 will come below div1

2)Also there should be horizontal scrollbar only to div2

3)Vertical scrolling of div2 should make div1 also to scroll

Answer 1

1) To increase the width of div2, you will also need to increase the width of the outer mytable, or decrease div1.

2) to put a horizontal scrollbar on div2, apply overflow-x:auto to it.

3) You’re doing that the right way now, by having the outer div scroll. However, if you don’t want the outer div to have a horizontal scrollbar, use overflow-y instead of overflow.