Background color with left right scroll bar

Question

0.00/5 (No votes)

See more:

i am creating float left right scroll bar in css. my css script problem i can't display background color top,bottom,left and right. it not showing background color. and not showing scroll bar

here is my source code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  <head>
<style type="text/css">
.left-side{
position:absolute;
float: right;
width: 100%;
background-color:white;
overflow-y:scroll;
height:100%;
}
.right-side{
position:absolute;
width: 30%;
float: left;
background-color:white;
overflow-y:scroll;
height:100%;
}
.main{

background-color:#066;
width:100%;
height:100%;
}
</style>
  </head>
  <body>
  
  <div class="main"> 
  
  <div class="left-side"> left side </div>
  
  <div class="right-side"> right side </div>
      
 </div>
 
 
  </body>

What I have tried:

<style type="text/css">
.left-side{
position:absolute;
float: right;
width: 100%;
background-color:white;
overflow-y:scroll;
height:100%;
}
.right-side{
position:absolute;
width: 30%;
float: left;
background-color:white;
overflow-y:scroll;
height:100%;
}
.main{

background-color:#066;
width:100%;
height:100%;
}
</style>

Posted 24-Jan-20 7:29am

previned

Updated 9-Mar-20 6:55am

Add a Solution

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Member 12656556 · Answer 1 · 2020-03-09T06:55:00

You add the background colour left and right white (#ffffff) so you can't able to see the difference,please add the different color for both left and right,and also add
body{
margin:0;
padding:0;
}

if you give the child div float property parent div should have

.main

{
display:inline-block;
width:100%;
}
here

main

is parent div so i use that one.
don't add

overflow-y:scroll;

for div add

overflow-y:auto;

if you want scroller you should give max-height in pixel or less then 100% if more conetent appear more then your mentioned height scroller will appear automatically.

Background color with left right scroll bar

1 solution

Solution 1

Add your solution here

Preview 0

Background color with left right scroll bar

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us