On Tue, Apr 10, 2012 at 6:43 AM, David Hucklesby <huckle...@gmail.com> wrote: > On 4/9/12 10:11 AM, Marie-Ange Demeulemeester wrote: >> >> Hi, I need a block with two columns. >> >> Despite of the quite simple code by using a table, I’ve tried to have >> the same result with DIV. >> >> The requirements are: >> >> · The columns have an equal height >> >> · Each column has a different background-color >> >> · 2 columns: first column always width 100px, second the rest >> of the screen (100% minus 100px) >> >> · The title and rule has to have the whole width of the >> second column, and not equal to the width of the text in that column. >> (Not OK in FF, in Chrome, ) >> >> · This must be X-browser: IE6+, FF 3+; Chrome, Safari >> >> My tryout: >> >> http://users.telenet.be/MarieAnge/banner1.html >> >> If somebody can simplify the code, please don’t hesitate.
I found two ways to do it without using tables, but they both have some problems. You can find my results at http://www.ghodmode.com/testing/marie I'll also post the code at the bottom of this message. -- DIV.thirdbanner -- The first one uses CSS tables, which don't work in IE7 or earlier. -- DIV.secondbanner -- The second one just uses floats and positioning, but requires a fixed height for just about all of the containers. You only really have to set a fixed height for the outermost div, though, because the others are set to height:100%. Unless the content changes dynamically, I think this is a viable solution with good support for older browsers that we shouldn't support any more :P To get the right height I rounded up the computed height of the contents, divided by the font size to get em, and set it explicitly to that. It didn't fit in IE6, so I added 1 more em. If you do it this way, you'll have to change the height whenever you change the content. -- IE6/7 -- I think David was right with regard to tables and IE6/7 support, but I personally feel that we don't need to support IE6/7 any more. So, I would choose the first method. Of course that depends on your situation and the requirements of your page. If you visit my page (http://www.ghodmode.com) in IE7 or earlier, you get a nice little bar at the top telling you that the site may not render correctly in your browser. -- Vince Aggrippino Ghodmode Development http://www.ghodmode.com > Well, I was about to reply affirmatively when I noticed you seem to have > an unstated requirement - that the image is vertically centered! The > only way to get this working in IE 6 and 7, along with your other > requirements, is the solution you came up with - namely, an actual > table. While there are many ways to make the columns *appear* to be > equal height, table display is the only way I know to get actual heights > to match. While you can apply table display in browsers with good CSS > 2.1 support, this does not include IE 6 and 7. Sorry. > > Hopefully someone on this list will prove me wrong. :) > -- > Cordially, > David My results: <!doctype html> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html: charset=utf-8"> <title>Banner</title> <style type="text/css"> body { } div.thirdbanner { width: 95%; margin: 30px 2.5%; border: 3px solid #666; } div.thirdbannercontent { display: table; width: 100%; background-color: #ddd; } div.thirdbannertxt { display: table-row; } div.thirdbannertxt div.colimg { display: table-cell; vertical-align: middle; width: 100px; } div.thirdbannertxt div.coltxt { display: table-cell; background-color: #aaa; padding-left: 0.5em; } div.thirdbannertxt div.coltxt h3 { background-color: #ccc; padding: 0.5em 0.5em 0.5em 0; margin: 0 0.5em 0 0; } div.fourthbanner { position: relative; left: 2.5%; width: 95%; height: 11em; } div.fourthbannercontent { background-color: #ddd; border: 3px solid #666; height: 100%; } div.fourthbannertxt { height: 100%; } div.fourthbannercontent div.colimg { height: 100%; width: 100px; position: relative; float: left; } div.fourthbannercontent div.colimg img { display: block; position: absolute; width: 100px; height: 84px; top: 50%; margin-top: -42px; } div.fourthbannercontent div.coltxt { overflow: auto; margin-left: 100px; background-color: #aaa; padding-left: 0.5em; height: 100%; } div.fourthbannercontent div.coltxt h3 { margin: 0 0.5em 0 0; padding: 0.5em 0.5em 0.5em 0; background-color: #ccc; } </style> </head> <body> <div class="thirdbanner"> <div class="thirdbannercontent"> <div class="thirdbannertxt"> <div class="colimg"> <img width="100" height="84" src="http://users.telenet.be/MarieAnge/x.jpg";> </div> <div class="coltxt"> <h3>Title</h3> <strong>highlighted text</strong> <span>normal text <a href="#">link</a> normal text</span> <ul> <li>bullet list1</li> <li>bullet list2</li> </ul> <hr> tekst under rule </div> </div> </div> </div> <div class="fourthbanner"> <div class="fourthbannercontent"> <div class="fourthbannertxt"> <div class="colimg"> <img width="100" height="84" src="http://users.telenet.be/MarieAnge/x.jpg";> </div> <div class="coltxt"> <h3>Title</h3> <strong>highlighted text</strong> <span>normal text <a href="#">link</a> normal text</span> <ul> <li>bullet list1</li> <li>bullet list2</li> </ul> <hr> tekst under rule </div> </div> </div> </div> </body> </html> ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
![http://users.telenet.be/MarieAnge/x.jpg"](http://users.telenet.be/MarieAnge/x.jpg"){kind=link}