CODEWITHSUNDEEP
css
Skizit
Skizit

Reputation: 44862

Draw a div 'over' elements which may be below

I'm attempting to draw a div over elements below the page at a specific point of the page. I'd like the div to draw over below elements rather than drawing at the top of the page pushing all other elements down.

Currently the effect I have is..

_________________
|     |         |
|DIV  |         |
|     |         |
|_____|         |
|               |
|               |
| CONTENT       |
|               |
|_______________|

What I want is..

_________________
|     |          |
| DIV | CONTEN   |
|     |          |
|_____|          |
|                |
|________________|

How would I achieve this? Here's the styling of the div that I currently have...

 #laydiv{
margin:10px;
background:url(../lightbg.jpg);
border: 3px solid #fff;
width: 500px;
height:auto;
position: fixed;
float:left;
left: 0pt;
top: 0px;
z-index: 2000000000;
/* CSS3 styling for latest browsers */ 
-moz-box-shadow: 2px 2px 10px #000; 
-webkit-box-shadow: 2px 2px 10px #000;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
 }

Upvotes: 1

Views: 1217

Answers (1)

Tom Gullen
Tom Gullen

Reputation: 61755

If you make the inner div float:left; then everything else should wrap around it as you have illustrated.

<div style="width:220px;height:200px;border:1px solid red">
    <div style="float:left;width:50px;height:100px;border:1px solid green;margin-right:10px;">hello</div>
    More content flows here<br />More content flows here<br />More content flows here<br />More content flows here<br />More content flows here<br />More content flows here<br />More content flows here<br />
</div>

Upvotes: 1

Related Questions