I am working with the following code: <html> <head> <title>.</title> <style> TD.main {width:400px} DIV.start {HEIGHT: 41px} DIV.part1 { FLOAT: left; MARGIN-right: 0.4em; WIDTH: 41px; HEIGHT: 100%; BACKGROUND-COLOR: #E1E4F2; BORDER-RIGHT: 1px solid green } TD DIV.part2 {MARGIN-LEFT: 41px;} </style> </head> <body> <table> <tbody> <tr> <td class="main"> <div class="start" style="border:1px solid red"> <div class="part1"><div class="nosize"><!-- --></div></div> <div class="part2"> Just little content </div> </div> </tr> <tr> <td class="main"> <div class="start" style="border:1px solid red"> <div class="part1"><div class="nosize"><!-- --></div></div> <div class="part2"> Lost of content here. Lost of content here. Lost of content here. Lost of content here. Lost of content here. Lost of content here. Lost of content here. </div> </div> </td> </tr> </tbody> </table> </body> </html> Code (markup): I want to specify a minimum width for each row (41px), but when the div contains lots of content, the height must be expanded. I got it working in ie6, but it still does not display correctly in firefox, as shown in the following screenshot: http://koos.50webs.com/images/koos_table.html Anyone know how to do this in css?
Please convert tabs to 2 or 3 spaces before saving. The excessive indention is hard to read, and its ugliness makes my eyes bleed. Well formatted source will have a visual rhythm. Do not use caps for elements, attributes, class and id names or for css properties and values. Caps create opportunities for error. Do not inline style attributes, even when prototyping. This creates yet another opportunity for error. Do not use tables for layout purposes, as this appears to be. Do not use the div element as a generic container for content. It is an aggregating, or grouping element. Use it to hold related block level elements. Use appropriately semantic elements to mark up the content. Do take the time to read the specs, particularly §10.7. Modern browsers and IE7 support min/max-height/width, IE6 doesn't. Use the star-html hack to feed IE6 the desired min-height as simply height. It's bugginess will take care of the rest. For example: * html div.start {height: 41px;} Code (markup): cheers, gary
<html> <head> <title>.</title> <style> There are something missing in these lines. Please declare the document type. html or xhtml strict / transaction/ The same Css will display different layout in different document types. the most widely used is html strict type. min-height: 100px; that is OK. Change the number to the height you want.
OK, when declaring the document type, the page now looks like this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr"> <head> <title>.</title> <style type="text/css"> TD.main {width:400px} DIV.start {HEIGHT: 41px} DIV.part1 { FLOAT: left; MARGIN-right: 0.4em; WIDTH: 41px; HEIGHT: 100%; BACKGROUND-COLOR: #E1E4F2; BORDER-RIGHT: 1px solid green } TD DIV.part2 {MARGIN-LEFT: 41px;} </style> </head> <body> <table> <tbody> <tr> <td class="main"> <div class="start" style="border:1px solid red"> <div class="part1"><div class="nosize"><!-- --></div></div> <div class="part2"> Just little content </div> </div> </tr> <tr> <td class="main"> <div class="start" style="border:1px solid red"> <div class="part1"><div class="nosize"><!-- --></div></div> <div class="part2"> Lost of content here. Lost of content here. Lost of content here. Lost of content here. Lost of content here. Lost of content here. Lost of content here. </div> </div> </td> </tr> </tbody> </table> </body> </html> Code (markup): But replacing DIV.start {HEIGHT: 41px} with DIV.start {min-height: 41px;} does not work in ie6, and in firefox the heights are correct, but the "part2" element's background color is not being displayed.
I tried it - but it did not work. Update: Thanks for the hint Gary. I have gotten it to work now, but still not perfectly. I am not sure whether using /* hide from IE/mac \*/ is the best method - but it is the only method that I found to work. The outer red border adjusts its height correctly, but the inner DIV.part1 element doesn't. I have set its HEIGHT:100% - but it doesn't seem to work. Any ideas? Here is what the code looks like at the moment: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr"> <head> <title>.</title> <style type="text/css"> TD.main {width:400px} DIV.start, DIV.part2 {min-height: 41px;} /* hide from IE/mac \*/ * html .start, * html .part2 { height: 41px; } /* end hide */ DIV.part1 { FLOAT: left; MARGIN-right: 0.4em; WIDTH: 41px; HEIGHT:100%; BACKGROUND-COLOR: #E1E4F2; BORDER-RIGHT: 1px solid green } TD DIV.part2 {MARGIN-LEFT: 41px;} </style> </head> <body> <table> <tbody> <tr> <td class="main"> <div class="start" style="border:1px solid red"> <div class="part1"><div class="nosize"><!-- --></div></div> <div class="part2"> Just little content </div> </div> </tr> <tr> <td class="main"> <div class="start" style="border:1px solid red"> <div class="part1"><div class="nosize"><!-- --></div></div> <div class="part2"> Lost of content here. Lost of content here. Lost of content here. Lost of content here. Lost of content here. Lost of content here. Lost of content here. </div> </div> </td> </tr> </tbody> </table> </body> </html> Code (markup):
You're trying to get equal height columns. The most robust way to do that is with faux columns. With your example, try this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr"> <head> <meta name="generator" content= "HTML Tidy for Linux/x86 (vers 6 November 2007), see www.w3.org" /> <title>.</title> <style type="text/css"> /*<![CDATA[*/ #main { width:400px } .start { background: url(testbg.gif) left top repeat-y; border: 1px solid red; margin: 1em 0 0; min-height: 41px; } .part2 { margin-left: 42px; } * html .start { height: 41px; } /*]]>*/ </style> </head> <body> <div id="main"> <div class="start"> <div class="part2"> Just little content </div> </div> <div class="start"> <div class="part2"> Lost of content here. Lost of content here. Lost of content here. Lost of content here. Lost of content here. Lost of content here. Lost of content here. </div> </div> </div><!-- end main --> </body> </html> Code (markup): The image used here was made with the convert utility from ImageMagick at the cli gt@koko:~$ convert -size 5x41 xc:#e1e4f2 -size 5x1 xc:green -append -rotate -90 testbg.gif Code (markup): Copy att'd. cheers, gary
For some reason, the image wasn't attached. Tryin' again. g :shrug: I give up. For a day or so, you may get the image at http://gtwebdev.com/testbg.gif. It's subject to removal at any time after that. Or, you can create the image with the command line.
Thanks Gary! That is an absolutely ingenious method - and works great in all the browsers I have tested it in (ie6, ie7, firefox 2, avant browser, opera 9, safari). Appreciate your help.
The next step for me was to add a small icon in the center of the small little square, which has the purple background. But it seems that it is not possible to center it with your method. Here is the code so far: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr"> <head> <meta name="generator" content= "HTML Tidy for Linux/x86 (vers 6 November 2007), see www.w3.org" /> <title>.</title> <style type="text/css"> /*<![CDATA[*/ .start { background: url(testbg.gif) left top repeat-y; border: 1px solid red; margin: 1em 0 0; min-height: 41px; width:400px } .part1 { FLOAT: left; WIDTH: 41px; HEIGHT: 100%; BACKGROUND: url(icon.gif); background-repeat:no-repeat; background-position:center center } .part2 { margin-left: 42px; } * html .start { height: 41px; } /*]]>*/ </style> </head> <body> <table> <tbody> <tr> <td class="main"> <div class="start" style="border:1px solid red"> <div class="part1"><div class="nosize"><!-- --></div></div> <div class="part2"> Just little content </div> </div> </tr> <tr> <td class="main"> <div class="start" style="border:1px solid red"> <div class="part1"><div class="nosize"><!-- --></div></div> <div class="part2"> Lost of content here. Lost of content here. Lost of content here. Lost of content here. Lost of content here. Lost of content here. Lost of content here. </div> </div> </td> </tr> </tbody> </table> </body> </html> Code (markup): It seems the .part1 element requires that you specify a specific height, not a percentage. But one won't know what the height will be when the DIV is expanded to beyond the minimum height.