trying to make a DIV confine text, like a table cell would

@PeterPan_321

Copy linkTweet thisAlerts:

Jan 08.2014

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…

[url]http://elfintechnologies.com/testpage001.html[/url]

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

[url]http://elfintechnologies.com/testpage002.html[/url]

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.

Also in #CSS _↴