/    Sign up×
Community /Pin to ProfileBookmark

CSS <div> tables not taking height attributes

Copy linkTweet thisAlerts:
Apr 20.2013

Hi All,

I have a <div> based table in CSS nested inside another <div> table.

I can’t seem to set the overflow:hidden attribute if there’s a line of text in the cell. I know… you’re asking “why would you want to?”. It would take too long to explain, and it would also take too long to explain why I’m using in-line css. Suffice to say that in the former I want to, and the latter, because the page is generated dynamically, I need to.

The point is, it doesn’t matter how high I set the div, it will revert to the height of the line of text.

I tried using

[code=html]<div style=’display:table; table-layout:fixed; width:100%’>
<div style=’display:table-row’>
<div style=’display:table-cell; height:2px’>
Some text
</div>
</div>
</div>[/code]

Of course, that doesn’t even have the nested table and it still doesn’t work.

Can anyone tell me where I’m going wrong?

Thanks
CTB

to post a comment
CSS

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@rtretheweyApr 20.2013 — I haven't used CSS tables and I've only browsed the W3C specs, but I suspect you're running into the way cell heights are calculated. I'm not certain, but I don't think you can set a limit directly because tables generally expand vertically to accommodate the content within the width of a cell. See: http://www.w3.org/TR/CSS21/tables.html

You might be able to add another containing <div> to surround those shown in your example and set it's height and overflow properties. It's difficult to suggest a useful solution when you don't explain why you are using this elaborate mark-up to hold a single <div>/cell that you indicate may or may not have any content.
Copy linkTweet thisAlerts:
@chestertbauthorApr 20.2013 — Thanks. Yes, I'm thinking it might have something to do with cells in tables needing to accommodate whatever is in them.

As for the elaborate markup, it's because I'm trying to give my old, tired content manager a more flexible design interface.

In the new design, you can have up to nine rows of elements, and within each row, you can have up to nine columns. Each column is its own table... There need be no correlation between column widths from one row to the next.

And to deliver one last layer of flexibility, each cell can be divided into three. Designing the page is then a simple process of telling the CMS what data or sets of data you want where.

I tried using floating divs, but you can't apply a height to an in-line element so that didn't work. And because you can't apply a height, you can't control the verticle alignment of the content (which you can do in a div table. I also considered just allowing the user to place div containers wherever they liked, but decided that wouldn't work with dynamically generated content.

Thanks again. If you have any more thoughts or suggestions, please let me know

CTB
×

Success!

Help @chestertb spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.25,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...