trying to make a DIV confine text, like a table cell would
I've noted that lots of people seem to be advising the use of <DIV> tags for everything possible, and getting away from <TABLE> tags, though I'm not sure why. Well I've found this odd behavior of a DIV when placing text content inside. If I create a DIV tag with a style class designed to confine the DIV to specific absolute boundaries, I expected the DIV to be that size regardless of content I place inside. Indeed it did. But I was curious what would happen then if the text placed inside exceeded the available area of the DIV. Without its own scroll bars, I figured the text would be cut off. But no!!!! The text just merrily continued past the bottom edge of my DIV, as if the "bottom" boundary didn't count. This is temporary and none of the links work, but here's what I mean...
The nav bar at the top uses a CSS class with absolute positioning, the one at the bottom uses "fixed" positioning. The area in the middle (light green) uses absolute positioning too, with top,bottom, left, and right number chosen to keep it as a tidy rectangle, where text or other content would go (I'm trying to create a tempate here). The good thing is that if the text doesn't fill the rectangle, the rectangle stays neatly sized to take up the main area. The BAD thing is that when the text exceed the rectangle size, it just spills out the bottom as if there were no bottom! So here are my questions...
First... Is it even possible to confine the text in a DIV, if the div size is constrained by CSS? Maybe there's some "font-confine" attribute I don't know about? Here's an identical page with a table used for that center region, bound to the same CSS class
Now that's closer to the behavior I want, but of the table method does other wierd things. For example, if there is only a small amount of text that wouldn't fill a screen, the table bottom will not stay near the bottom of the screen and will completely ignore the "bottom" positioning attribute.
To be clear, what I was looking for was a neat rectangle whose bottom would (a) stay where i tell it to with absolute positioning, (b) confine the text to its borders, and (c) let the browser scroll bar still allow the user to see the content below the bottom of the DIV, TABLE, or whatever I use.
As I write this, I kind of realize I'm asking for something a browser wasn't really intended to do, unless I go to a frame set, which I'm seeing is now a discouraged practice. So, I'm willing to lay aside what i THINK I want, and hear suggestions as to how it BEST should work.
BUT... I still want to know why the absolutely positioned DIV in the first test link does NOT confine its text.
Last edited by PeterPan_321; 01-08-2014 at 04:10 PM.
If you style that div with "overflow:hidden" it will discard the text that pushes outside the div.
The characterization in your first sentence though, is not correct. People are suggesting (and have been for at least 10 years) that tables be used for tabular data (ie, a table with rows of records of data), and not to lay out a web page.
Thanks. Of course the overflow:hidden kind of proves mu suspicion, that doing so makes the rest of the text inaccessible. So, since an absolute positioned <DIV> basically makes me choose between inaccessible text, or text spilling out through the bottom, and neither of those are a desirable layout result, it looks like this is a case where a single cell TABLE is actually the better layout choice. Unless there's some other DIV attribute I missed.
I thought that's what you asked for - text outside your fixed div shouldn't show. Did you try overflow:scroll, maybe that's a better option?
Well thanks again. I'll try it. I wish I could find a comprehensive and up to date cross ref, showing what CSS attributes work with which HTML tags.
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)
Tags for this Thread