Geek Answers Handbook

Integrated CSS Positioning

I want to achieve this positioning with CSS:

enter image description here

But the best thing I get after several days of trying:

enter image description here

Can you help me achieve this positioning, given:

  • red comments in the "try" image (see JSFiddle below) with basic restrictions
  • that positioning should work on IE8 +, FF10 +, Chrome, Opera, Safari (using CSSPie and selectivizr for compatibility with IE8)

Here is the JSFiddle and 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 &gt; min-width. <br> <br> If left+right+center min-width &gt; 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> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --&gt; 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 &gt; min-width. <br> <br> If left+right+center min-width &gt; 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; }
+6
source share
2 answers

For such a complex layout, along with the border-box , you also need to carefully adjust the dimensions for the desired appearance.

Check out this script: http://jsfiddle.net/SXJuT/ (hope this looks like your screenshot)

In full screen mode: http://jsfiddle.net/SXJuT/embedded/result/

CSS

 html, body { margin:0; padding: 0; height: 100%; width: 100%; overflow: hidden; font-size: 9px; } div { border: 1px solid blue; box-sizing: border-box; padding: 2px; margin: 4px; } #globalcontainer { width: 99%; height: 98%; background-color: #deebf7; } #header { height: 5%; background-color: #d1e4f3; } #middle { height: 86%; background-color: #d1e4f3; display: table; border-spacing: 4px; width: 99%; } #footer { height: 5%; background-color: #d1e4f3; } #left, #center, #right { display: table-cell; background-color: #c4ddf1; } #left { width: 14%; } #center { width: 68%; } #right { width: 14%; } #center-middlerow { height: 80%; background-color: #bad5eb; } #center-bottomrow { height: 20%; background-color: #bad5eb; } #pageReceiver { height: 78%; background-color: #b1d0ec; } #tip { height: 16%; background-color: #b1d0ec; } #page { height: 95%; background-color: #a7cbe9; } #pageHeader { height: 14%; background-color: #2e75b5; } #pageContent { height: 62%; background-color: #2e75b5; } #pageFooter { height: 14%; background-color: #2e75b5; } .bloc { height: 20%; background-color: #2e75b5; } #left > .bloc:nth-child(1), #right > .bloc:nth-child(1) { width: 50%; } #left > .bloc:nth-child(2), #right > .bloc:nth-child(2) { width: 70%; }
0
source

Going with the box-box model is the right way.

Here is the structure I use often: demo

It uses some shell delimiters with position: relative; and a custom add-on containing absolutely positioned elements with height: 100%; and overflow :auto; .

It needs to be set up, but you 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; }
+3
source

More articles:


All Articles