Originally Posted by tgreer
Look at the "overflow" attribute.
The trick is handling how content that is bigger than its container is handled, not vice-versa.
Thanks for your time & help.
Upto someone extent, it did enter my brain cells, since I didn't quite get the result I wanted.
I'm now although getting the scrollbar for "contentRight", am ALSO having Internet Explorer's own BOTH right & bottom scrollbar.
What I also want is the image (left hand side's image in "contentLeft") "Visible all the time" EVEN if someone scrolls down (using the "contentRight" scrollbar, which is the ONLY scrollbar I would like to have).
I also wonder why am I getting "space" on the top edge of the window (i.e. top of the banner), which is LESS on my browser window but its appearing MORE over the Internet, on this website.
This website can be seen on: members.fortunecity.com/dars2525/home.html
Presently, I've simply worked on 3 links: home.html, about.html, contact.html
My CSS file presently is:
/* CSS Document */
body
{
background-color:white;
}
#logo
{
width:100%;
height:120px;
float:none;
text-align:center;
overflow:hidden;
}
#topMenu
{
font-family:Georgia, "Times New Roman", Times, serif;
text-align:center;
width:100%;
float:right;
background-color:black;
}
#topMenu ul
{
list-style: none;
background-color:red;
font-size:medium;
float:none;
position:relative;
padding: 0;
}
#topMenu ul li
{
display:inline;
width:130px;
color:#FF00FF;
float:left;
position:relative;
}
#topMenu a
{
display:block;
text-decoration:none;
font-size:larger;
color:red;
}
#topMenu a:hover
{
color:blue;
background-color:white;
text-transform:uppercase;
}
#content
{
width:100%;
height:400px;
overflow:auto;
}
#contentLeft
{
width:300px;
margin-top:100px;
float:left;
}
#contentRight
{
width:650px;
border-left:5px thin black;
}
#contentRight h1
{
font-family:Geneva, Arial, Helvetica, sans-serif;
color:blue;
font-size:large;
text-align:justify;
margin:30px;
}
#contentRight p
{
font-family:Verdana, Arial, Helvetica, sans-serif;
color:black;
font-size:medium;
text-align:justify;
margin-left:30px;
margin-top:10px;
}
#content p.first-letter:first-letter
{
margin-left:20px;
font-size:xx-large;
}
#content ul
{
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:justify;
color:black;
margin-left:50px;
list-style-image:url(list_icon.gif);
}
#content table
{
font-family:Verdana, Arial, Helvetica, sans-serif;
color:black;
font-size:medium;
margin:30px;
}
#content img.left
{
float:none;
padding:0px;
}
.bold
{
margin:20px;
font-weight:bold;
}
#bottomMenu
{
border:1px solid red;
height:10px;
background-color:black;
font-family:"Times New Roman", Times, serif;
width:100%;
color:white;
text-align:center;
font-size:medium;
height:20px;
}
