Sophisticated CSS layout positioning

Question

Sophisticated CSS layout positioning

I've been struggling to achieve a specific positioning using CSS:

However, after numerous attempts over several days, the best result I could obtain looks like this:

Could you lend me a hand in achieving the desired positioning, considering these factors:

The red comments in the "try" picture (refer to JSFiddle below) that highlight some major constraints
The need for the positioning to work on IE8+, FF10+, Chrome, Opera, Safari (with CSSPie and selectivizr for IE8 compatibility)

Here is the JSFiddle along with the following code snippets:

HTML

<body>body (all divs may have some padding, margin, and 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 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); 
}
...
-webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
}

css html css-position

Answer 1

Answer №1

Opting for the border-box box model is definitely the way to go.

Check out this layout structure that I frequently use: demo

It involves using wrapper divs with position: relative;, custom padding, and absolutely positioned elements with height: 100%; and overflow :auto;.

Some adjustments might be necessary, but you'll grasp the concept.

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;
}

Answer 2

Opting for the border-box box model is definitely the way to go.

Check out this layout structure that I frequently use: demo

It involves using wrapper divs with position: relative;, custom padding, and absolutely positioned elements with height: 100%; and overflow :auto;.

Some adjustments might be necessary, but you'll grasp the concept.

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;
}

Answer 3

Answer №2

When dealing with a complex layout like this, it's crucial to not only utilize border-box, but also adjust the dimensions meticulously to achieve the desired appearance.

You can reference this fiddle for an example that mimics your screenshot: http://jsfiddle.net/SXJuT/

To view the layout in full screen, click here: 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%; }

Answer 4

When dealing with a complex layout like this, it's crucial to not only utilize border-box, but also adjust the dimensions meticulously to achieve the desired appearance.

You can reference this fiddle for an example that mimics your screenshot: http://jsfiddle.net/SXJuT/

To view the layout in full screen, click here: 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%; }

Sophisticated CSS layout positioning

Answer №1

Answer №2

Similar questions

Steps to utilize a variable in the form action for sending an email

Dynamic addition of CSS classes to HTML elements using PHP

Convert the icon into a monochrome color scheme

What are the steps to resolve issues with my dropdown menu in IE9?

Assign a value to the cookie based on the input from the form

"The dynamic row is experiencing issues with the live function not functioning as expected

What is the best way to center a paragraph vertically around a particular word?

Which font, Helvetica or Verdana, has optimal support across all popular browsers?

Django SlideShow: Immersive Presentation of Images with Varying Display Times

Implement custom styles to enhance the appearance of users' Magento websites

Encase a group of child elements within a parent container using

Issues arise when trying to integrate Bootstrap modal with bootcards

Automated downloading based on operating system recognition

How can I display different divs based on a selected option?

Upon clicking a button on page 1, the data is transmitted to page 2 before redirecting the user to page 3

Position the textAngular toolbar at the bottom of the text editing interface

Creating a persistent hover effect

PHP - Trouble with onClick event triggering "echo" to output Video and Image SRC using PHP tags

Troubles with border-image in CSS

Prevent jQuery from scrolling once the fixed image reaches the bottom of the page