toxicious Posted August 31, 2012 Share Posted August 31, 2012 This is the HTML: <div id="cellwrapper"><div id="leftcell"> </div><div id="midcell">Lots of content here</div><div id="rightcell"> </div></div> All of the columns should have a dynamic height. The midcell will contain different amounts of text, and the two side-columns should be the same height. With other words: I want the side columns (left & right) to be 100% height of their parent div (cellwrapper) without setting its height (cellwrappers height). Before I've used a table, but I've been told not to use it for designs so I want something with divs.Here is the CSS I have so far: #cellwrapper {background: yellow;display: table;}#leftcell {display: table-cell;width: 35px;float: left;background-image: url('img/col.gif');background-repeat: repeat-y;}#rightcell {display: table-cell;width: 35px;float: left;background-image: url('img/col.gif');background-repeat: repeat-y;}#midcell {display: table-cell;width: 470px;float: left;background: white;} As you can see, I've tried with the display: table thingy, but I didn't get it to work. The side columns are still only one image high (the col.gif is only 20px high). The display: table way seems like the easiest. Could someone please point out what is wrong? Link to comment Share on other sites More sharing options...
dsonesuk Posted August 31, 2012 Share Posted August 31, 2012 2 options, both involve giving the illusion that the side columns reach to the bottom. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script><style type="text/css">#cellwrapper {background: yellow;/*display: table;*/width:550px;margin:0 auto;overflow:hidden;background-image: url('img/col.gif');background-repeat: repeat-y;background-position:left;}#cellwrapper_inner {background-image: url('img/col.gif');background-repeat: repeat-y;background-position:right;}#leftcell {/*display: table;*/width: 35px;float: left;/*background-image: url('img/col.gif');background-repeat: repeat-y;*/}#rightcell {/*display: table;*/width: 35px;/*float: left;*/float:right;/*background-image: url('img/col.gif');background-repeat: repeat-y;*/}#midcell {/*display: table;*/width: 470px;background: white;margin:0 40px;overflow: hidden;}#midcell * {margin: 0.9em 10px;}/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx2222222222222222222xxxxxxxxxxxxxxxxxxxxx*/#cellwrapper2 {background: yellow;/*display: table;*/width:550px;margin:0 auto;overflow:hidden;position:relative;}#leftcell2,#leftcell2_bg, #rightcell2 ,#rightcell2_bg{width: 35px;}#leftcell2_bg, #rightcell2_bg{background-image: url('img/col.gif');background-repeat: repeat-y;background-position:left;position:absolute;top:0;bottom:0;}#leftcell2_bg{left:0;}#rightcell2_bg{right:0;}#leftcell2 {/*display: table;*/float: left;/*background-image: url('img/col.gif');background-repeat: repeat-y;*/}#rightcell2 {/*display: table;*//*float: left;*/float:right;/*background-image: url('img/col.gif');background-repeat: repeat-y;*/}#midcell2 {/*display: table;*/width: 470px;background: white;margin:0 40px;overflow: hidden;}#midcell2 * {margin: 0.9em 10px;}</style></head><body><div id="cellwrapper"><div id="cellwrapper_inner"><div id="leftcell"></div><div id="rightcell"></div><div id="midcell"> <p>Ullamco laboris nisi eu fugiat nulla pariatur. Consectetur adipisicing elit, duis aute irure dolor ut enim ad minim veniam. Sunt in culpa sed do eiusmod tempor incididunt ut aliquip ex ea commodo consequat. Consectetur adipisicing elit, quis nostrud exercitation eu fugiat nulla pariatur. Cupidatat non proident, ut labore et dolore magna aliqua.</p> <p>Sunt in culpa lorem ipsum dolor sit amet, excepteur sint occaecat. Mollit anim id est laborum. Velit esse cillum dolore lorem ipsum dolor sit amet, ut labore et dolore magna aliqua.</p> <p>Duis aute irure dolor sed do eiusmod tempor incididunt consectetur adipisicing elit. Velit esse cillum dolore ullamco laboris nisi ut enim ad minim veniam. Ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, qui officia deserunt. Velit esse cillum dolore ut enim ad minim veniam, ullamco laboris nisi.</p> <p>Eu fugiat nulla pariatur. Ut labore et dolore magna aliqua. Duis aute irure dolor velit esse cillum dolore ut aliquip ex ea commodo consequat. Excepteur sint occaecat mollit anim id est laborum.</p> <p>Ut labore et dolore magna aliqua. Ut enim ad minim veniam, in reprehenderit in voluptate sed do eiusmod tempor incididunt. Ut aliquip ex ea commodo consequat.</p> <p>Qui officia deserunt ullamco laboris nisi velit esse cillum dolore. Cupidatat non proident, ut enim ad minim veniam, consectetur adipisicing elit. Velit esse cillum dolore ullamco laboris nisi quis nostrud exercitation.</p> <p>Excepteur sint occaecat sed do eiusmod tempor incididunt in reprehenderit in voluptate. Eu fugiat nulla pariatur. Velit esse cillum dolore cupidatat non proident, sunt in culpa. Ut labore et dolore magna aliqua.</p> </div></div></div><hr /><div id="cellwrapper2"><div id="leftcell2_bg"></div><div id="rightcell2_bg"></div><div id="leftcell2"></div><div id="rightcell2"></div><div id="midcell2"> <p>Ullamco laboris nisi eu fugiat nulla pariatur. Consectetur adipisicing elit, duis aute irure dolor ut enim ad minim veniam. Sunt in culpa sed do eiusmod tempor incididunt ut aliquip ex ea commodo consequat. Consectetur adipisicing elit, quis nostrud exercitation eu fugiat nulla pariatur. Cupidatat non proident, ut labore et dolore magna aliqua.</p> <p>Sunt in culpa lorem ipsum dolor sit amet, excepteur sint occaecat. Mollit anim id est laborum. Velit esse cillum dolore lorem ipsum dolor sit amet, ut labore et dolore magna aliqua.</p> <p>Duis aute irure dolor sed do eiusmod tempor incididunt consectetur adipisicing elit. Velit esse cillum dolore ullamco laboris nisi ut enim ad minim veniam. Ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, qui officia deserunt. Velit esse cillum dolore ut enim ad minim veniam, ullamco laboris nisi.</p> <p>Eu fugiat nulla pariatur. Ut labore et dolore magna aliqua. Duis aute irure dolor velit esse cillum dolore ut aliquip ex ea commodo consequat. Excepteur sint occaecat mollit anim id est laborum.</p></div></div></body></html> 1 Link to comment Share on other sites More sharing options...
toxicious Posted August 31, 2012 Author Share Posted August 31, 2012 Thx a lot for the two examples! Interesting ways of doing it. Will go with example 1 since it was really simple Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now