Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

box with scroller

Status
Not open for further replies.
antdickens

antdickens

Programmer
Nov 13, 2001
129
GB
I have laid my web page out using a table. I have links around the edges and the mina content in the middle cell.
If i put too much text in the middle cell it makes all of the outer cells bigger and they look silly.

Is there some kind of box i can use which will allow me to put as much content in as i'd like with a scroll bar down the side??
 
Sort by date Sort by votes
use a sized div with overflow set to auto.

Code: 
.scroll_box {
    width:300px;
    height:300px;
    overflow:auto;
    border:2px silver inset;
    padding:5px 5px 5px 5px;
}


Chris.

Indifference will be the downfall of mankind, but who cares?
A website that proves the cobblers kids adage.
Nightclub counting systems

So long, and thanks for all the fish.
 
Upvote 0 Downvote
I have tried putting this code inot my html and it just prints out the codew when i view as a web page. Do i need to add some form of header or put something before the first full stop??
 
Upvote 0 Downvote
it's CSS code

to use put between the <head></head> tags as a style then use a classed div.

like so
Code: 
<style>
.scroll_box {
    width:300px;
    height:300px;
    overflow:auto;
    border:2px silver inset;
    padding:5px 5px 5px 5px;
}
</style>

</head>

<div class="scroll_box">

some content

</div>


Chris.

Indifference will be the downfall of mankind, but who cares?
A website that proves the cobblers kids adage.
Nightclub counting systems

So long, and thanks for all the fish.
 
Upvote 0 Downvote
Fantastic, thanks a lot.

One more little niggle though, there is a bit of a gap to the right of the scrollbox. i can't seem to be able to get rid of this by changing the size as the table adjusts itself keeping the gap.

Any ideas?
 
Upvote 0 Downvote
that's the padding in the style, change the right to 0px

order is;

padding:top right bottom left

Chris.

Indifference will be the downfall of mankind, but who cares?
A website that proves the cobblers kids adage.
Nightclub counting systems

So long, and thanks for all the fish.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

dkwel
  • Locked
  • Question
Working with Retina on a standard resolution
Replies
8
Views
152
audiopro
audiopro
roniz
  • Locked
  • Question
Joomla! input box text color
Replies
1
Views
73
ChrisHirst
ChrisHirst
aich69
  • Locked
  • Question
Web hosting with MS Office Live
Replies
0
Views
67
aich69
aich69
audiopro
  • Locked
  • Question
A Curious Problem With Chrome 2
Replies
3
Views
91
audiopro
audiopro
ebstarasia
  • Locked
  • Question
Twitter Widget with Joomla
Replies
1
Views
80
cutabovehost
cutabovehost

Part and Inventory Search

Sponsor

Back
Top