Full width CSS with 2 column, fixed menu width and dynamic content width
Question
I have problem with fixing this issue. I am not using bootstrap, cos i started without bootstrap (and not sure if bootstrap can do this). I have a full width layout with a fixed menu width. Then my content area should be dynamic because I want it to be responsive.
http://send2list.com/help/troubleshoot.html
<!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" dir="ltr" lang="da-DK">
<head>
<title></title>
</head>
<body style="background-color:#e0e0e0;color:#fff;margin:0px;">
<div style="width:100%;">
<div style="background-color:#000;">
<div style="float:left;background-color:#222223;width:900px;">Content Area<br> Content width should be responsive. Right now it is set to width 900px. But if user were to resize screen, it should be smaller. Any way to do this with just CSS?</div>
<div style="float:right;background-color:#499939;">Right Menu<br>Right menu is fixed with 240px</div>
</div>
</div>
</body>
</html>
2 answers
solution1
4 ACCPTED 2014-12-29 03:55:41
Yes this can be done with CSS by setting the div s to display: table-cell ( display: table-cell is fully supported) instead of float: left . The first div is a percentage and the second is a fixed width. The container needs to be set to display: table and table-layout: fixed in order to enforce the fixed width:
HTML
<div class="container">
<div class="one">Content Area<br/> Content width should be responsive. Right now it is set to width 900px. But if user were to resize screen, it should be smaller. Any way to do this with just CSS?</div>
<div class="two">Right Menu<br/>Right menu is fixed with 240px</div>
</div>
CSS
.container{
width: 100%;
display: table;
table-layout: fixed;
}
.one{
display: table-cell;
vertical-align: top;
/*width: 85%;*/ //REMOVE as VitorinoFernandes pointed out, this is not necesssary seeing how setting the div to display: table-cell within a container set to "display: table" will take the remaining width
background: #222223;
}
.two{
display: table-cell;
vertical-align: top;
width: 240px;
background: #499939;
}
solution2
1 2014-12-29 04:03:03
You can do this using calc to set the main area to 100% - 240px. Calc support is good as long as you don't need to support IE8: http://caniuse.com/#feat=calc
.main {
float:left;
background-color:#222223;
width: calc(100% - 240px);
}
.sidebar {
float:right;
background-color:#499939;
width: 240px;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.