5

My html code looks like this:

A wrapper div (percent width, floated left) containing:

  1. One div containing text and links;
  2. One Div containing an image;

The problem: I want to keep the coding order like above, but for user experience I want to inverse the divs order using CSS to get something like this:

Note: the wrapper div is 20%, floated left, followed by 4 other similar divs on that page.

Inverse the order of the divs with CSS

Ty!

This is the fiddle link:

http://jsfiddle.net/sexywebteacher/4sbQf/

webmasters
  • 5,663
  • 14
  • 51
  • 78

1 Answers1

4

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;
}​
Bongs
  • 5,502
  • 4
  • 30
  • 50
  • All you need is a "float:left;" on your wrapper and you are good to go. Like so: http://jsfiddle.net/4H8nc/3/ – Andrew Grothe May 02 '12 at 11:58
  • Hello, i tried this code and it should work, but maybe you can take a look at my site. It has adult content and I can paste it's name in the fiddle than delete it. Is that ok? Ty very much – webmasters May 02 '12 at 11:58
  • On my actual site it seems to work but the wrapper now gets on top of everything. PS. On the actual site the wrapper div is inside another wrapper:) – webmasters May 02 '12 at 11:59
  • Please take a look at this fiddle, i am somewhat of a newb. http://jsfiddle.net/sexywebteacher/4H8nc/4/ – webmasters May 02 '12 at 12:13
  • if your child element has floating property make sure the parent element also has floating property. see the http://jsfiddle.net/4H8nc/5/ If you remove `float` property from `#wrap` div it's height will be calculated as 0. – Bongs May 02 '12 at 12:25
  • Ty very much for the help. I think the problem is my site is fluid and I do not have height for the text and images. Take a look, I have removed the height attributes from the CSS: http://jsfiddle.net/sexywebteacher/4H8nc/6/ – webmasters May 02 '12 at 12:35
  • you will have to mention height; if not in CSS calculate using jQuery http://jsfiddle.net/Bongs/4H8nc/7/ – Bongs May 02 '12 at 13:09