Make a Div Display Under Another Using CSS in a Totally Fluid Layout

Make a div display under another using CSS in a totally fluid layout

If both the height of the image and the text are variable, it's not particularly easy with pure CSS.

The height being variable rules out anything based on position: absolute, as in the answers you received to your previous similar question.

One option is to use the technique shown here: http://tanalin.com/en/articles/css-block-order/

It is possible to change vertical order of blocks on HTML page using
CSS table presentation using properties of display: table family.
Regardles of block order in HTML code, header (table-header-group) of
such table is displayed at the top of it, footer (display:
table-footer-group)—at the bottom, and table body
(table-row-group)—between header and footer.

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

Here's your code using this technique: http://jsfiddle.net/thirtydot/7hCNC/35/

I have to admit that I've never used this technique on a production website, so please test thoroughly.

A different approach that will work in all browsers that support CSS3 2D transforms is to vertically flip the whole container, and then do the same to the "image" and the "text" elements. In browsers that do not support CSS3 transforms, everything will still work, but the "image" and "text" elements will be in their original order. In other words, it degrades nicely. It's probably possible to make this work in IE6-8 using filter, but that would make the text look horrible, so forget about it.

Here's your code using this technique: http://jsfiddle.net/thirtydot/7hCNC/36/

If none of these CSS methods are good enough, you'll have to use JavaScript.

However, I personally recommend that you just switch the order in the HTML. I doubt Google cares about it. In this case, I really doubt that bending over backwards to keep your HTML in the "optimum order" will have any meaningful SEO impact.

Move The First Div Appear Under the Second One in CSS

http://jsfiddle.net/QGyNN/

HTML

<div id="wrapper">
    <div id="txt">
    </div>
    <div id="img">
    </div>
</div>​

CSS

div#wrapper
{
    height:100px;
    width:60px;
    border:1px solid black;
    position:relative;
}
div#txt, div#img
{
    position:absolute;
    margin: 5px;
    width:50px;
}
div#img
{
    top:0px;
    height: 60px;
    border:1px solid red;
}
div#txt
{
    bottom:0px;
    height:20px;
    border:1px solid green;
}​

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

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

Making two divs flow under an absolutely positioned div with a fluid layout

jQuery solution

You'll need to move your .header-container div above the .fade-in div (you would also need to do for the non-js solution)

<script>
    $(document).ready(function(){
        var fadein = $('.fadein'),
            images = $('.fadein').find('img');

        fadein.css('height', images.height()); // set initial height

        $(window).resize(function(){ //on window resize, set height to height of image
            fadein.css('height', images.height());
        });
    });
</script>

original non-js solution

If you don't want to use a script, the only way I've come up with to make divs with absolute images inside responsive is to add another element inside that has position: relative; visibility: hidden; along with all the same size properties. If all your images are the same size, just duplicate one of them.

Where you have four images like so:

<img src="images-large/pollack-north.jpg" alt="English country style home built by Huberd Design" style="display: block;">

Add a div below them with this same image inside set to position: relative; visibility: hidden;

<div class="create-height">
    <img src="images-large/pollack-north.jpg" style="visibility: hidden; position: relative;">
</div>

Here's a codepen where I use this functionality. It adds an extra element (or 2), but you can forego the javascript.

Position div according to another div

In CSS, absolute positioning works relative to the most recent parent, or enclosing, element that has an explicitly set position attribute. If you want a given div, like the one labeled "C" in your diagram, to have its position depend on another div, like that of "B", you should make "B" the parent of "C" by placing "C" within "B".

Then you can give "C" something like position:absolute;right:100px;top:-30px;, replacing the values for right and top with the desired distance from the right side of "B" and the height of "C", respectively.

If "B" is also given an explicit position like position:relative (or absolute or any other valid value, what matters is that you set it explicitly), then the position of "C" will be defined relative to "B".

It may seem slightly counter-inuitive that you should use absolute rather than relative, when what you want is for "C" to be "relative" to "B", but the reason for this is that CSS understands "relative" to mean "relative to the position the element would normally take in the document flow".

Two divs side by side - Fluid display

Using this CSS for my current site. It works perfect!

#sides{
margin:0;
}
#left{
float:left;
width:75%;
overflow:hidden;
}
#right{
float:left;
width:25%;
overflow:hidden;
} 

How can I stick a div to another div as it resizes?

One method involves placing both divs inside one parent container.

Assign position: relative to the container, then use position: absolute on one or both child divs to position them however you want within the parent.

Here's an example using your code (simplified):

HTML

<div id="offer-intro">
    <img class="product-u-shape" src="http://vignette2.wikia.nocookie.net/...">
    <div class="call-now"><span class="call-now-cta">Call now for a free quote</span>
        <br>
        <a class="phone-number" href="tel:888-888-8888">CALL <strong>888...</strong></a>
    </div>

</div>

CSS

#offer-intro {
    position: relative;
}

.product-u-shape {
    width: 100%;
    height: auto;
}

.call-now {
    position: absolute;
    width: 100%;
    top: 100%;
}

DEMO

How to place a div under div with absolute elements in

Using grid works for me.

.container {
  display: grid;
}

.childImage{
  grid-column: 1;
  grid-row: 1;
}

<div class=container>
  <img src=https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png class=childImage>
  <img src=https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png class=childImage>
  <img src=https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png class=childImage>
  <img src=https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png class=childImage>
  <img src=https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png class=childImage>
</div>
<div id=underneath>
  should be underneath
</div>

Two column layout where width of main content DIV is fluid (using all space available to 100%)

Maybe you should create BFC to face this problem.

For example:

#container{
    border: 1px solid red;
}
#nav{
    float: left;
    width: 300px;
    border: 1px solid green;
    height: 200px;

    margin-left: 20px;
    margin-right: 20px;
}
#main{

    overflow: hidden;

    height: 400px;
    border: 1px solid blue;
    margin-right: 20px;
}

overflow: hidden; is the key to create BFC for #main.

JSFiddle : http://jsfiddle.net/yujiangshui/yMFB6/

More about BFC : https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context

CSS fluid 'column'

the markup

<div id="fixed">fixed content</div>
<div id="fluid">fluid content</div>

the css

#fixed {
  float: left;
  width: 13em;
  margin-right: -14em;
}
#fluid {
  margin-left: 14em;
}

That should do the trick. I use it on my personal site. The margins make it all stay on the same level.

---

Related Topics