CODEWITHSUNDEEP
csscss-float
okyanet
okyanet

Reputation: 3146

CSS - have div appear first in markup but display below floated divs

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

Upvotes: 2

Views: 380

Answers (2)

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32192

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

Upvotes: 0

3dgoo
3dgoo

Reputation: 15794

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

Upvotes: 1

Related Questions