PDA

View Full Version : Overflow problem (always have a scrollbar)

cb2004
11-30-2007, 11:47 AM
I am trying to use overflow but cant get it to work in either browser. I am always getting a scrollbar from left to right. Here is my code:

#m2 {
width: 605px;
height: 320px;
padding: 10px;
margin: 0 auto;
border: solid 1px #666666;
overflow: auto;
}

#m2 h1 {
font-size: 100%;
line-height: 21px;
color: #FFFFFF;
background: #5A245A;
width: 100%;
height: 22px;
padding: 0 0 0 5px;
margin: 0 0 16px;
display: block;
}

#m2 p {
margin: 0 0 16px;
}
If you place a h1 and a p in there you will see.

Any help would be great.
Arbitrator
11-30-2007, 11:58 AM
I am always getting a scrollbar from left to right.You haven’t provided much context. All I can tell you is that you get the effective width via adding the combined widths of the left border, left padding, width, right padding, and right border and to make sure that they don’t add up to too much.

I removed the incorrect information here.
It might be best if you showed a complete or live document. CSS doesn’t mean much without the structure that it applies to.
cb2004
11-30-2007, 12:46 PM
Here is the full code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
#m2 {
width: 605px;
height: 320px;
padding: 10px;
margin: 0 auto;
border: solid 1px #666666;
overflow: auto;
}

#m2 h1 {
font-size: 100%;
line-height: 21px;
color: #FFFFFF;
background: #5A245A;
width: 100%;
height: 22px;
margin: 0 0 16px;
display: block;
}

#m2 p {
margin: 0 0 16px;
}
</style>
</head>
<body>
<div id="m2">
<h1>Test</h1>
<p>Testing the scrollbars<br />
Testing the scrollbars<br />
Testing the scrollbars<br />
Testing the scrollbars<br />
Testing the scrollbars<br />
Testing the scrollbars<br />
Testing the scrollbars<br />
Testing the scrollbars<br />
Testing the scrollbars<br />
Testing the scrollbars<br />
Testing the scrollbars<br />
Testing the scrollbars<br />
Testing the scrollbars<br />
Testing the scrollbars<br />
Testing the scrollbars<br />
Testing the scrollbars<br />
Testing the scrollbars<br />
Testing the scrollbars<br />
Testing the scrollbars<br />
Testing the scrollbars<br />
Testing the scrollbars<br />
Testing the scrollbars</p>
</div>
</body>
</html>
effpeetee
11-30-2007, 02:51 PM
<style>------------------should be: <style type="text/css"> Frank
#m2 {
width: 605px;
height: 320px;
padding: 10px;
margin: 0 auto;
border: solid 1px #666666;
overflow: auto;
}

#m2 h1 {
font-size: 100%;
line-height: 21px;
color: #FFFFFF;
background: #5A245A;
width: 100%;
height: 22px;
margin: 0 0 16px;
display: block;
}

#m2 p {
margin: 0 0 16px;
}
</style>
effpeetee
11-30-2007, 03:26 PM
Have you tried overflow:hidden;

Frank
cb2004
11-30-2007, 03:39 PM
Have you tried overflow:hidden;

Frank

Why? It wouldnt scroll then?
effpeetee
11-30-2007, 03:42 PM
Why? It wouldnt scroll then?
I thought that was what you wanted. Just mis-understood. Sorry.
The code appears to be behaving as it should.

Try this
#m2 h1 {
font-size: 100%;
line-height: 21px;
color: #FFFFFF;
background: #5A245A;
remove the width from here.
height: 22px;
margin: 0 0 16px;
display: block;

}


Frank
cb2004
11-30-2007, 04:05 PM
Bingo buddy.

Cheers.