CODEWITHSUNDEEP
csshtmlposition
Motheus
Motheus

Reputation: 543

Put a DIV over another with CSS only

I'm trying to put a div over another with just CSS because will have a PC and mobile style.

For example i have a container with 3 divs inside (style att just for this example):

<div>
<div style='float:left;'>div #1</div>
<div style='float:left;'>div #2</div>
<div style='float:right;'>div #3</div>
</div>

will show as

-----------------------
--div #1--div#2--div3--
-----------------------

but in mobile will show as

-----------------------
--div #1---------------
--div #2---------------
---------------div #3--

So i plan to use something different for mobile as:

-----------------------
--div #1-------div #3--
---------div #2--------

with resolutions from 320px to 1024px:

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 1024px) {
/* HERE MY CSS */
}

So, Is this possible?. Thanks in advance for your help/suggestions.

Upvotes: 1

Views: 310

Answers (1)

BMH
BMH

Reputation: 4330

Put div #3 between div #1 and div #2, with your current css the result will be what you want.

<div>
    <div style='float:left;'>div #1</div>
    <div style='float:right;'>div #3</div>
    <div style='float:left;'>div #2</div>
</div>

Working sample: http://jsfiddle.net/b_m_h/ZaW4y/

Upvotes: 1

Related Questions