2

Any idea how to achieve the layout indicated in the image below with pure CSS, if the order of the divs in the markup must be as follows?

NOTE - The height of each panel is unknown; wrapper divs may be added to the markup

<body>
  <div id="content"></div>
  <div id="nav"></div>
  <div id="search-results"></div>
</body>

Layout puzzle

okyanet
  • 3,106
  • 1
  • 22
  • 16
  • It's simple if the height of #content or the other divs is known as #content can be absolutely positioned and the other elements offset with padding/margin. But I'm otherwise completely stumped; I can't think of a way to do it. – okyanet Nov 23 '12 at 04:18
  • Here is a base jsfiddle of this problem if anyone wants to have a go: http://jsfiddle.net/kSsAB/ – 3dgoo Nov 23 '12 at 04:21
  • @3dgoo - you beat me to it :) thanks – okyanet Nov 23 '12 at 04:24
  • 1
    No problem. Have a read of this: http://stackoverflow.com/questions/10414478/make-a-div-display-under-another-using-css-in-a-totally-fluid-layout – 3dgoo Nov 23 '12 at 04:27
  • @3dgoo - thanks for the link. I'd almost decided it's not possible but thought there might be some obscure trick out there. Like that one! – okyanet Nov 23 '12 at 04:35
  • I thought the same thing. There are some very clever people out there. – 3dgoo Nov 23 '12 at 04:46

2 Answers2

1

This technique is taken from the question Make a div display under another using CSS in a totally fluid layout.

It uses CSS table presentation using properties of display: table family to rearrange the presentation order of dom elements.

As said in the above question:

This works in all modern browsers, and IE8 if you're careful. It does not work in IE6/7.

HTML

<div id="wrapper">
    <div id="content-wrapper">
        <div id="content">content</div>
    </div>
    <div id="nav-search-block">
        <div id="nav-wrapper">
            <div id="nav">nav</div>
        </div>
        <div id="search-results-wrapper">
            <div id="search-results">search-results</div>
        </div>
    </div>
</div>​

CSS

#wrapper {
    display: table;
    width: 100%;
}

#nav-wrapper, 
#search-results-wrapper {
    float: left;
    width: 50%;
}

#nav, 
#search-results {
    color: #ffffff;
    background: #6699ff;
    padding: 10px;
    margin: 10px;
}

#nav-search-block {
    display: table-row-group;
}

#content-wrapper {
    display: table-footer-group;
}

#content {
    color: #ffffff;
    background: #cc0000;
    padding: 10px;
    margin: 10px;
}​

Demo

Community
  • 1
  • 1
3dgoo
  • 15,716
  • 6
  • 46
  • 58
  • Awesome. The only issue is that `display: table` is not supported by IE8 and below. Will hold out for a bit but will probably accept this one. – okyanet Nov 23 '12 at 04:40
  • This is [supported](http://caniuse.com/#feat=css-table) and does work in IE8. Just not in anything below. I'm keen to see if there is any other CSS only way of doing this too. – 3dgoo Nov 23 '12 at 05:04
0

Now you can do this in javascript

as like this

Javascript 

document.getElementById('one').innerHTML=document.getElementById('content').innerHTML;

CSS

#content{
display:none;
}


#one{
background:red;
    padding:10px;
    clear:both;
}
#nav{
background:green;
    float:left;
    width:35%;
}
#search-results{
float:right;
    width:65%;
    background:yellow;
}

HTML

<body>
  <div id="content">Content I m first in html </div>
  <div id="nav">navi</div>
  <div id="search-results">Search-Results</div>

    <div id="one"></div>
</body>

Live Demo

J. Steen
  • 15,470
  • 15
  • 56
  • 63
Rohit Azad Malik
  • 31,410
  • 17
  • 69
  • 97
  • Yeah I can do it with javascript but it feels 'dirty'. I'd asked if it's possible with pure CSS. – okyanet Nov 23 '12 at 04:34