July 12, 201214 yr So here we have it, a wrapper and 3 boxes, now i understand why its not working but is there a solution... because the wrapper has no defined height the 3 boxes inside without any content can not be height:100%, How can we fix this? Is it possible to fix without the use of javascript. <style type="text/css"> html, body { height:100%; } #wrapper { float:left; width:700px; border:1px solid red; }#box1 { float:left; width:200px; border:1px solid blue; height:100%; }#box2 { float:left; width:200px; border:1px solid orange; height:100%; }#box3 { float:left; width:200px; border:1px solid purple; height:100%; } </style> <div id="wrapper"> <div id="box1">Hello, This text is used to exapand the box!<br/>Is it working?</div> <div id="box2"></div> <div id="box3"></div> </div>
July 12, 201214 yr Author Solved! <style type="text/css"> html, body { height:100%; } #wrapper { float:left; width:700px; border:1px solid red; display:table; }#wrapper2 { width:700px; border:1px solid red; display:table-row; }#box1 { width:200px; border:1px solid blue; height:100%; display:table-cell; }#box2 { width:200px; border:1px solid orange; height:100%; display:table-cell; }#box3 { width:200px; border:1px solid purple; height:100%; display:table-cell; } </style> <div id="wrapper"> <div id="wrapper2"> <div id="box1">Hello, This text is used to exapand the box!<br/>Is it working?</div> <div id="box2"></div> <div id="box3"></div> </div> </div>
Create an account or sign in to comment