jquery - Fixed and Variable Column Widths (Table or Float)? -
i'm creating 3 column, full width page want have 2 columns fixed width , other 1 fit full width between them, so:
| fixed width || variable width || fixed width | | left || adapts browser window size || fixed right |
i tried float didn't work , suggested using display-table worked until had edit page slightly. right hand column ok 2 left columns have content right down @ bottom , not @ top needs be. can please this. here code using:
.pagecontent{ background-color: #dadee1; width: 100%; padding: 10px 0px 10px 0px; } .gridsystem{ display: table; } section{ display: table-cell; } .mainsidebar{ float: left; vertical-align: top; width: 140px; } .mainpage{ width: inherit; overflow: hidden; margin: 0px 0px 0px 0px; padding: 20px; } .mainadvert{ float: right; width: 140px; } <div class="pagecontent gridsystem"> <section class="mainsidebar"></section> <section class="mainpage"></section> <section class="mainadvert"></section> <div class="clearboth"></div> </div>
thank you
try jquery solution:
$(document).ready(function(){ window_width = $(window).width; mainpage_width = window_width - 140 - 140; $(".mainpage").width = mainpage_width + "px"; }
Comments
Post a Comment