Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Problem with Min Heigh & css tables 2

Status
Not open for further replies.
IPGuru

IPGuru

Vendor
Jun 24, 2003
8,391
GB
I am experimenting with css tables & want to set the minimum height of a cell div but it does not seem to work
I can set a height to a fixed number of pixels but I cannot set it to 100% either

does anyone know if these fuctions are fully supported yet
(testing in firefox V3.5.1 on a fedora 11 system)
 
Sort by date Sort by votes
They are fully supported, but you might be using them wrongly or expecting the wrong results:

1. What exactly do you mean when you say 'a cell div'?
2. Min-height does not work in IE6, but it does work in later browsers. If you set it to a set number, it should keep an element at that height or more.
3. Percentage only works when it is a percentage of a known value. By default, elements in HTML, have their height set to auto, which means they will automatically expand to fit the content. This is necessary because they are always limited on the sides (by being 100% of the viewport at maximum) and if there is more content inside them, they need to grow somewhere. Automatic height also means that the children of these elements cannot determine their height in percentage (20% of auto is a nonsense value and it reverts to auto). In order to use the percentage, a parent of the element must have a fixed height. This means:
a) the immediate parent has a height set in a fixed unit (pixels, inches, centimeters)
b) all parents have their height set in percentages. In this case, the first element of the canvas is the HTML element. This one needs to have a height of 100% of the viewport (browser window). Followed by body (again with 100% height or it will revert to auto) and any other element before the one you want it to work with the percentage height. Of course, the percentages can also be less than 100%, if you do not want elements to take up their entire parent (or viewport, eventually).

If your usage of minimum height involves any of these pitfalls, the height will not work as you expect it. If you're doing everything right and it is still failing for you ... then post a link to your page (or code if link is impossible) and we'll take a look at it.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
I am Trying to use CSS tables to avoid using HTML tables for layout

some basic code with coments (typos permiting)

Code: 
<div style="height:500px"> <!-- container for CSS table -->
 <div class="cell" style "background-color:yellow"> more content</div>
 <div Class="cell">Some more Content</div>
</div>

& the CSS
Code: 
.cell {
 display:table-cell;
 height:100%;
}

this should result is a t col layout with col 1 extending the full 500px of the container (I eventualy want this to be 90% of the page hight but I am keeping it simple to start.)
 
Upvote 0 Downvote
that should be :
Code: 
<div class="cell" style="background-color:yellow"> content</div>

& i have also tried using min-height to set the height of the 1st coll but the background does not extend beyond the content.
 
Upvote 0 Downvote
Hi

Why do you think that putting elements with [tt]table-cell[/tt] [tt]display[/tt] type randomly will work as you expected ?

At least set the outer [tt]div[/tt] to [tt]display: table[/tt].

Feherke.
 
Upvote 0 Downvote
the doc I have read state that if the container is not specified it is assumed, however I have been experimenting & making some progress
Code: 
<div style="display:table;height:100px;background-color:green;">
<div style="display:table-cell;width:200px;background-color:yellow;">coll 1</div>
<div style="display:table-cell;background-color:blue;">coll 1</div>
looks as expected
however if I try to set the height of my col's to a %of the display it fails
Code: 
<body style="height:100%">
<div style="display:table;height:50%;min-height:100px;background-color:green;">
<div style="display:table-cell;width:200px;background-color:yellow;">coll 1</div>
<div style="display:table-cell;background-color:blue;">coll 1</div>
</div>
</body>

I think the problem is how I am setting my body height to full screen.
 
Upvote 0 Downvote
Hi

Well, it works as I expect : the outer [tt]div[/tt] keeps its [tt]height[/tt] as long as it can, if not, it shrinks, but not under the [tt]min-height[/tt].

Could you post a "handmade" blueprint of what you are trying to achieve ?

Feherke.
 
Upvote 0 Downvote
Your description sound like what I am trying to achieve
a full screen coll, that will not shrink below a minimum

on my system if i use the 2nd code example the col's remain just a single line of txt.

Perhaps this is to do with the linux version of firefox, i will try on a windoze machine to see
 
Upvote 0 Downvote
If you will be doing what you're doing, please use a table (and its corresponding) tag. Although you're correct when you say that tables are not a desired way to lay things out in a modern web design, this does not mean that it is OK to mask tables inside other elements. What you're doing is using tables to lay your page out and calling tables divs. It is akin to you drinking beer out of a water bottle because someone asked you not to drink alcohol.

As for the the percentage height not working... have you read my point #3 about how percentages work? Does your HTML element have a defined height?

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
This is primarily experimentation to gain experience using the CSS-table functions rather than for any fixed purpose.
I can achieve a similar layout using ordinary dive positioning

it seems the cause of the problem is I cannot set the container div ( or body) to be full screen

the various solutions i have found on the net so far are not working in firefox 3.5

I guess I will have to go back to earlier programming methods which is a shame because css tables were looking good for organising page layout & avoiding unnecessary floats (which is I believe what they were intended for).

Many thanks for the input so far.
 
Upvote 0 Downvote
then what is the correct term for the display:table, display:table-cell, display:table-row & other related css entries for setting Div possitions,

I have always seen it refered to as css tables but if that name is incorect I am hapy to be corrected

Perghaps you should check the following link to see where I am coming from
 
Upvote 0 Downvote
Actually that link my provide the answer I am looking for, I think I will have to hack it a bit & see
 
Upvote 0 Downvote
CSS or cascading style sheets are a set of properties that describe how elements display on a web page. According to W3 standards, each HTML element has a specific way of being displayed. This way <head> is not displayed, <body> is a block, <td> is a table-cell and <a> is an inline element. And <form> usually has a bottom margin of 1em. W3 specifies rules on what display each element should have but is much more lax on the additional display properties of the element (such as margins, padding, etc.). This is left to a browser, which applies default values.

When an HTML document is created without a CSS stylesheet, default browser stylesheet is loaded to display the results. Browsers will differ in default font or margins or paddings they apply to specific elements, but they will have to follow basic principles of display as defined in W3 spec. That means that div will be block, span will be inline and table row will be table-row. The fact that 'table-row', 'table-cell' and 'table' exists in CSS is because CSS has to be able to define the appearance of tables. If these properties did not exists, tables could not be explained within CSS. However, just like you won't go assigning list-style-type to an element that is not a list, you will also not assign table style display to a non-table element. This is the principle of semantic web.

Semantic page is a page that makes sense to a browser that cannot understand visual styles. Page that has several headings, lists, paragraphs, emphasized words and tables. Not a page that has a bunch of divs and spans visually acting out all these other elements.

When people say you should lay pages out via CSS, they do not mean to mask a bunch of divs and ask them to act as tables. They say that because they know that by harnessing CSS visual properties, they can make semantically neutral building blocks of page, or divs, easily stack in the way they want them to be. If you do not know how to do this via normal document flow, floating and margins/paddings combination, then you need to learn more about CSS. If you do know this, then continue using that knowledge, because that is the way you're supposed to build pages.

Lastly, on the link. Internet is a vast space where everyone can publish anything they want. And if you spend long enough time searching, you can find anything. The article you're referring us to, is unfortunately incorrect and preaches poor techniques. Why would anyone think that masking other elements to make them act as tables is a solution to any layout issue is beyond me. All I can advise you is to forget most of what you've read in that article.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
Perhaps this link is more to you liking

straight from the horses mouth CSS tables do exist.

it has long been recomended that HTML tables should be used for data & not display layout (although I too often use them for this purpose because it is easiest)

The CSS table model is to enable display elements to be laid out in a tabular format.

the whole purpose of my current project is to educate myself on its usage, so I know where it is usefull & where html tables are better.
 
Upvote 0 Downvote
If you bothered to read the page you linked to, you would learn (sort of similar to reading my text above) that CSS for tables describes how table elements should be displayed. It further states that in languages where there are no set elements (such as XML), you can define user elements to render like tables using table-based CSS. In HTML, where all elements are pre-defined, you would only use table-based CSS definitions on table related tags.

Your project is flawed in the way that you're trying to teach yourself wrong programming.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
I too often use [tables] for [page layout] because it is easiest
Click to expand...
I think you mean "because it is familiar". It does take a while to adapt to CSS layout from the table-based approach, but once you've made the jump you won't want to go back.

Nonetheless, occasionally you need to lay things out in a way that still need a table. not often, but it can happen.

On those rare occasions, if you need to use a table use a frickin' table! Don't replace <table>, <tr> and <td> elements 1-for-1 with <div>s and rely on browsers' imperfect CSS3 support to get it to work. That way you'll get the worst of both worlds - cumbersome markup and flaky CSS.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
Thanks Chris

I am experimenting with CSS in this way because I have seen that it can have potential.

I was actualy trying to get a left hand menu col the full height of the screen (with min-height to prevent it becoming too small) & this seems to be the part that is going wrong
setting the div height to 100% does not work, even if body height is also sent to 100%.

I have now reverted back to using Absolute positioning to achieve this, but the display:table options still look promising, I only code for personal use & do not use IE but even IE8 is now supportinng these options.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
632
3esolar
3
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
658
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
538
PeDa
PeDa
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
576
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top