By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,695 Members | 1,601 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,695 IT Pros & Developers. It's quick & easy.

CSS and DIV, trouble overflowing "correctly"

Plater
Expert 5K+
P: 7,872
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:
Expand|Select|Wrap|Line Numbers
  1. <center>
  2.     <div id="backing" >
  3.         <center>
  4.             <div id="PageAnnouncement" class="PageAnnouncement"  ></div> 
  5.         </center>
  6.     </div>
  7. </center>
  8.  
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:
Expand|Select|Wrap|Line Numbers
  1. padding: 2px;
  2. width: 90%; 
  3. overflow: auto; 
  4. border-color: Red; 
  5. border-width: 3px;
  6. border-style: solid; 
  7. border-collapse: collapse; 
  8. background-color:Yellow; 
  9. font-size: 14px; 
  10. font-weight: normal;
  11.  
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.
Mar 27 '08 #1
Share this Question
Share on Google+
7 Replies


drhowarddrfine
Expert 5K+
P: 7,435
Is this what you mean?
[HTML]<!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>
[/HTML]
Mar 27 '08 #2

Plater
Expert 5K+
P: 7,872
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.
Expand|Select|Wrap|Line Numbers
  1. #backing
  2. {
  3.    z-index: 100;
  4.    position: static;
  5.    display: block;
  6.    width: 760px;
  7.    background-color: #faebd8;
  8.    text-align:left; 
  9. }
  10.  
So when I tried to "combine" them I came up with this:
Expand|Select|Wrap|Line Numbers
  1. #backing
  2. {
  3.    z-index: 100;
  4.    position: static;
  5.    display: block;
  6.    width: 760px;
  7.    background-color: #faebd8;
  8.    text-align:left; 
  9. }
  10.  
  11. #PageAnnouncement
  12. {
  13.    margin:0 auto;
  14.    padding:2px;
  15.    border: 3px solid red;
  16.    border-collapse:collapse;
  17.    background-color:yellow;
  18.    font-size:14px;
  19.    width: 90%; 
  20.    overflow: auto; 
  21. }
  22.  
Which didn't appear to change at all from my previous attempts.
Mar 27 '08 #3

drhowarddrfine
Expert 5K+
P: 7,435
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.
Mar 27 '08 #4

Plater
Expert 5K+
P: 7,872
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
Mar 27 '08 #5

Plater
Expert 5K+
P: 7,872
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....
Mar 27 '08 #6

drhowarddrfine
Expert 5K+
P: 7,435
Yep. Non-breaking characters will cause that.
Mar 27 '08 #7

Plater
Expert 5K+
P: 7,872
Yeah, so after all that what I had to start with was correct.
Some days I should just never leave the manufacturing zone.
Mar 27 '08 #8

Post your reply

Sign in to post your reply or Sign up for a free account.