Help | Site Map

Forums
- Programming Languages
  
  C / C++ Java .NET Visual Basic Python
- Web Development
  
  PHP Ruby / Rails Perl ASP Coldfusion Javascript / Ajax Flash / Actionscript XML HTML / CSS
- Database
  
  MySQL Oracle SQL Server PostgreSQL Access DB2
- System Administration
  
  Apache IIS Networking Linux / Unix / BSD Windows
- More
  
  Software Development Mobile Development Misc Questions
Howtos
- Browse all Howtos and articles here
Jobs
- Browse All Jobs
- Post Job Listing

Bytes > Forums - Questions and Answers > HTML / CSS Forum

CSS and DIV, trouble overflowing "correctly"

Question posted by: Plater (Moderator) on March 27th, 2008 03:33 PM

I cannot seem to achieve what I want here. It's not a FF vs IE thing because I cannot get it in either.

The heirarchy of my page is effectively:

Code: ( text )

<center>
<div id="backing" >
<center>
<div id="PageAnnouncement" class="PageAnnouncement" ></div>
</center>
</div>
</center>

The goal is to make "PageAnnouncement":
-centered (done: embeded center tag...not sure if that passes standards)
-occupy 90% of the width-space of the "backing" div (done: width=80% in style)

The trouble spot mainly comes in with:
-ONLY overflow downwards and not side-side. I would effectively like the DIV tag to perform some sort of "wrap". I am ok with a scrollbar, but only if it scrolls up/down, not left/right. Even if there is no scrollbar and it grows unbounded downwards, I would be ok with it.

Does anyone have any thoughts on this?
Currently, the style for that DIV is this:

Code: ( text )

padding: 2px;
width: 90%;
overflow: auto;
border-color: Red;
border-width: 3px;
border-style: solid;
border-collapse: collapse;
background-color:Yellow;
font-size: 14px;
font-weight: normal;

I even debated changing that DIV to a readonly textarea, but I need to be able to put basic HTML inside the DIV, plus FF and IE treated textwrapping differently in textareas.

Would you like to answer this question?
Sign up for a free account, or Login (if you're already a member).

drhowarddrfine

Expert

4,036 Posts

March 27th, 2008
04:34 PM
#2

Re: CSS and DIV, trouble overflowing "correctly"

Is this what you mean?

Code: ( text )

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
div{
margin:0 auto;
padding:2px;
border: 3px solid red;
border-collapse:collapse;
background-color:yellow;
font-size:14px;
}
#backing{
}
#PageAnnouncement{
width: 90%;
overflow: auto;
}
</style>
</head>
<body>
<div id="backing" >
<div id="PageAnnouncement" class="PageAnnouncement">
<p>This is a testThe goal is to make "PageAnnouncement":
-centered (done: embeded center tag...not sure if that passes standards)
-occupy 90% of the width-space of the "backing" div (done: width=80% in style)
The trouble spot mainly comes in with:
-ONLY overflow downwards and not side-side. I would effectively like the DIV tag to perform some sort of "wrap". I am ok with a scrollbar, but only if it scrolls up/down, not left/right. Even if there is no scrollbar and it grows unbounded downwards, I would be ok with it.
Does anyone have any thoughts on this?
Currently, the style for that DIV is this:</p>
</div>
</div>
</body>
</html>

Plater

Moderator

4,843 Posts

March 27th, 2008
05:04 PM
#3

Re: CSS and DIV, trouble overflowing "correctly"

Hmm that does produce the appearance of correctness in that situation.
However the outlying DIV contains a bit more pieces and already has it's own CSS. I suppose I should have though to include that. I wrote the CSS for it a long time ago however.

Code: ( text )

#backing
{
z-index: 100;
position: static;
display: block;
width: 760px;
background-color: #faebd8;
text-align:left;
}

So when I tried to "combine" them I came up with this:

Code: ( text )

#backing
{
z-index: 100;
position: static;
display: block;
width: 760px;
background-color: #faebd8;
text-align:left;
}
#PageAnnouncement
{
margin:0 auto;
padding:2px;
border: 3px solid red;
border-collapse:collapse;
background-color:yellow;
font-size:14px;
width: 90%;
overflow: auto;
}

Which didn't appear to change at all from my previous attempts.

drhowarddrfine

Expert

4,036 Posts

March 27th, 2008
05:46 PM
#4

Re: CSS and DIV, trouble overflowing "correctly"

Didn't notice I left 'overflow:auto' in there. I don't understand what its purpose is for you. I think I don't understand what you are looking for now.

Plater

Moderator

4,843 Posts

March 27th, 2008
06:18 PM
#5

Re: CSS and DIV, trouble overflowing "correctly"

I am attaching two images, one in FF and one in IE.
These are with overflow not specified (nothing about overflow entered), but otherwise using the "combined" CSS from earlier.

FF correctly retains the box size, buit does not "wrap" the text and lets it go floating on to the side.
IE keeps the text inside the box, but increases the box's width.

I want the Box's 90% width to stay like in FF, but the text to cause it to grow down (and not to the side, if IE made it grow down instead of out, that would be what i want)

EDIT: the dimensions limit me from uploading (hold on)

http://www.rxms.com/images/webimage/FF.JPG
http://www.rxms.com/images/webimage/IE.JPG

Plater

Moderator

4,843 Posts

March 27th, 2008
08:10 PM
#6

Re: CSS and DIV, trouble overflowing "correctly"

After stopping and looking at my pictures I think I realized my problem.
My test was bad, I am using a non-breaking stream of characters....

drhowarddrfine

Expert

4,036 Posts

March 27th, 2008
09:26 PM
#7

Re: CSS and DIV, trouble overflowing "correctly"

Yep. Non-breaking characters will cause that.

Plater

Moderator

4,843 Posts

March 27th, 2008
09:32 PM
#8

Re: CSS and DIV, trouble overflowing "correctly"

Yeah, so after all that what I had to start with was correct.
Some days I should just never leave the manufacturing zone.

Not the answer you were looking for? Post your question . . .
173,562 Experts ready to help you find a solution.
Sign up for a free account, or Login (if you're already a member).

Top HTML / CSS Forum Contributors