CSS Forum

**Necaxa** · 05-11-2009, 12:17 PM

hi there, ive seen in some cool sites they have a div floating behind another div or a page with a patterns behing the front div, i was wondering how they do that.
i tried putting a div that would float on the left side, here is my code

#olo{
top:-5px;
position: absolute;
overflow:hidden;
float:left;
background-image:url(../ribon2.png);
width:140px;
height:235px;
}
if i leave it as it is ,it works fine, but if i place a left value then some it moves differently for different browsers, so anyone know the correct way to place divs anywere on page?

**LadynRed** · 05-11-2009, 12:55 PM

Can you show us an example of what it is you'd like to accomplish ?
First thing - do NOT use position:absolute, and you can't use a float with absolute positioning anyway, it's one or the other.

Use the float and margins to push it around where you want it.

**kcmartz** · 01:07 PM

like some news sites?

LIKE THIS?:
HERE | OR | HERE

except with a background image?

**Necaxa** · 05-11-2009, 01:32 PM

hey, ok if you here http://www.firstforhorses.co.za , there is a ribbon on top, initialy it was supposed to lie much more left , i tried using just position absolute and then moved it around with left and top, but that did not work with older browsers.
here is the setup

<div id='page_header'>
<h1 class="style1"> </h1>
<h2> </h2>

</div>
#page_header {
height: 130px;
background-image:url(../hors.jpg);
background-repeat:no-repeat;
margin-left: auto;
margin-right: auto;
width: 850px;
clear: both;
padding-bottom:0px;

}
<div id="olo"></div>
#olo{
overflow:hidden;
float:left;
margin-right:300px;

background-image:url(../ribon2.png);
width:140px;
height:235px;
}

the olo one is supposed to overlap the page header one,the page header conatins an image, maybe i should put in a container for both?
off topic - if you look at this site for example http://www.gouramidesign.com/ and other i have seen, have like a div with content and then have these very nice backgrounds ,even more complex than the one i am posting, so are those divs? or background mixed with divs? right now i am only doing the typical middle page look, but i wana get more creative

**LadynRed** · 05-11-2009, 01:48 PM

Ok, you can't have position:absolute and float:left at the same time, the two contradict each other.

You need to validate your code. You have duplicate doctype statements and duplicate <head> sections in the rendered code.

The position:absolute for the ribbon is ok in and of itself, positioning works for that.

For the background pattern you want, you can either apply the pattern to the <body> in your stylesheet, or add a "container" div around everything else and put the patterned background on it.

**Necaxa** · 05-11-2009, 02:01 PM

ok thanks for reply, still strugggling though, older browsers put the absolute in the middle ,aswell as firefox. il keep tackling it!