Menu
I want to achieve this positioning using CSS :
But the best I obtain after days of tries is this :
Can you help me to achieve that positioning, taking into account :
Here is the JSFiddle and the code :
HTML
<body>body (all divs may have some padding, some margin and some border. All divs adjust their height to their content.)
<div id="globalcontainer"><span class="important">#globalcontainer (fixed width, not really centered into body : see center)</span>
<div id="header">#header (100%)</div>
<div id="middle">#middle (100%)
<div id="left">
<span class="important">#left (on the left of content, with a fixed min-width.<br>
<br>
Width adjusted to content if content > min-width. <br>
<br>
If left+right+center min-width > global container width, then still adjusts its size to its content and goes outside globalcontainer limits.<br>
<br>
Inner divs have variable (and unknown) width, sticked to the right)</span>
<br>
<DIV class="bloc" style="width:300px;">bloc</div>
<DIV class="bloc" style="width:50px;">bloc</div>
<DIV class="bloc" style="width:500px;">bloc</div>
</div>
<div id="center"><span class="important">#center (width adjusted to globalcontainer size - left size - right size, with a fixed min-width.<br>
<br>
Stays centered on the screen whatever the left or right size are<br>
--> if left or right divs are not present in the HTML (or present with display:none), center div stays on the center of the screen)</span>
<div id="center-middlerow">#center-middlerow (100%)
<div id="pageReceiver">#pageReceiver (100%)
<div id="page">#page (100%)<br>
<div id="pageHeader">#pageHeader (100%)</div>
<div id="pageContent">#pageContent (100%)</div>
</div>
<div id="tip" style="display: block;">#tip (under page)</div>
</div>
<div style="text-align:center" id="center-bottomrow">#center-bottomrow (100%)</div>
</div>
<div id="right"><span class="important">#right (on the right of content, with a fixed min-width.<br>
<br>
Width adjusted to content if content > min-width. <br>
<br>
If left+right+center min-width > global container width, then still adjusts its size to its content and goes outside globalcontainer limits.<br>
<br>
Inner divs have variable (and unknown) width, sticked to the right )</span>
<br>
<DIV class="bloc" style="width:30px;">bloc</div>
<DIV class="bloc" style="width:60px;">bloc</div>
<DIV class="bloc" style="width:90px;">bloc</div>
</div>
</div>
</div>
<div id="footer">#footer (100%)</div>
</div>
</body>
CSS
* {
font-family:Arial;
font-size:11px;
border:1px solid black;
padding:10px;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
background-color:rgba(125,125,125,0.1);
}
span {
border:0px;
padding:0px;
background-color:transparent;
}
span.important {
color:red;
font-weight:bold;
}
html {
border:0px;
padding:0px;
background-color:white;
}
/* Real CSS starting here */
BODY {
padding:20px;
padding-bottom:0px;
}
#globalcontainer, #left, #center, #right , #header, #footer {
margin:auto;
background-color:transparent;
display:table;
}
/* ====================================================== */
#globalcontainer {
min-width:1130px;
max-width:1130px;
width:100%;
vertical-align:top;
}
#header {
margin-bottom:10px;
vertical-align:top;
width:100%;
}
#middle {
display: table;
vertical-align:top;
}
#footer {
margin-top:10px;
vertical-align:top;
text-align:center;
width:100%;
}
/* ====================================================== */
#left {
vertical-align:top;
float:left;
padding-right:20px;
}
#center {
vertical-align:top;
display: table-cell;
width:100%;
}
#center-toprow {
padding:10px;
padding-top:0px;
}
#center-middlerow {
}
#center-bottomrow {
padding:5px;
margin-top:30px;
}
#right {
vertical-align:top;
float:right;
padding-left:20px;
}
#left DIV.bloc {
float:right;
white-space:nowrap;
}
#right DIV.bloc {
float:left;
white-space:nowrap;
}
/* ====================================================== */
#pageReceiver {
margin:auto;
width:100%;
}
#page {
cursor:default;
background-color:#F8F8F8;
border:1px solid black;
padding:20px;
width:100%;
position:relative;
min-height:591px;
}
#pageHeader {
margin:auto;
margin-bottom:15px;
display: -moz-inline-stack;
display: inline-block;
*display: inline;
}
#tip {
margin-top:5px;
margin-left:20px;
margin-right:20px;
padding:5px;
background-color:transparent;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
598
Going with the border-box box model is the right way to go.
Here is a structure I often use : demo
It uses some wrapper divs with position: relative; and custom padding, containing absolutely positioned elements with height: 100%; and overflow :auto;.
It needs tweaking but you'll get the gist.
HTML
<div id="globalcontainer">
<div id="global-wrapper">
<div id="header"></div>
<div id="middle">
<div id="middle-wrapper">
<div id="left">
<div class="bloc"></div>
<div class="bloc"></div>
<div class="bloc"></div>
</div>
<div id="center-wrapper">
<div id="center">
<div id="center-middlerow"></div>
<div id="center-bottomrow"></div>
</div>
</div>
<div id="right">
<div class="bloc"></div>
<div class="bloc"></div>
<div class="bloc"></div>
</div>
</div>
</div>
<div id="footer"></div>
</div>
</div>
CSS
*,
*:before,
*:after{
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
div{
border: 1px solid black;
padding: 10px;
}
html,
body{
height: 100%;
}
#globalcontainer{
height: 100%;
}
#global-wrapper{
padding: 100px 10px;
position: relative;
border: none;
height: 100%;
}
#header,
#footer{
position: absolute;
width: 100%;
height: 100px;
left: 0;
}
#header{
top: 0;
}
#middle{
height: 100%;
}
#middle-wrapper{
position: relative;
padding: 0px 200px;
border: none;
height: 100%;
}
#left,
#right{
position: absolute;
width: 200px;
height: 100%;
top: 0;
background:#F0F0F0;
overflow: auto;
}
#left{
left: 0;
}
#right{
right: 0;
}
#center{
height: 100%;
}
#center-wrapper{
border: none;
padding: 0px 10px;
height: 100%;
}
.block{
background: #fff;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
