How to make a CSS div float OVER another div

**Warner** · 21-05-2009

Now I know how to build tables in html and css, I teach myself div. I understand the positioning of div blocks not so good. I have the following css code:

Code:

div # topbar ( 
position: absolute; 
top: 0px; 
left: 20px; 
height: 20px; 
width: 800px; 
text-align: right; 
font-family: Tahoma; 
background-color: # efefef; 
) 

div # left (border 
position: absolute; 
top: 0px; 
left: 0px; 
height: 500px; 
width: 20px; 
background-image: url ( "left.jpg"); 
) 

div # right (border 
position: absolute; 
top: 0px; 
left: 800px; 
height: 500px; 
width: 20px; 
background-image: url ( "right.jpg"); 
) 

div # logo ( 
position: absolute; 
top: 20px; 
left: 20px; 
height: 100px; 
width: 800px; 
background-image: url ( "logo.jpg"); 
)

It includes the following html page:

Code:

<html> 

<head> 
<title> div test page </ title> 
<link href="stijl.css" rel="stylesheet" type="text/css"> 
</ head> 

<body> 
<div id="topbar"> </ div> 
<div id = "left border" </ div> 
<div id = "right border" </ div> 
<div id = "logo" </ div> 
</ body> 

</ html>

The logo is something strange on left the hand. By placing the logo, It is of the position of the previous div. I do not want that. In the tutorial I follow do not. Since they use just absolute. Who can help me with this?

**TX-Snakebyte** · 21-05-2009

First of all, you are missing 3x a ">", careless mistakes, internet explorer doesn't understands. And also omit anything left floating (float: left).

**Warner** · 21-05-2009

Something still missing. Now I have that on right, and the logo is good, but when I left float is all together. I do not understand so well how to float and clear to work. I will in the future course flexible instead of divs that make static what I have now.

If I omit borders, and it works, but I use almost borders on every layout I create for example shadow effects, etc.

**TX-Snakebyte** · 21-05-2009

For that kind of shadow effects you can download a background image of suit him wide 1600 x 20 pix where this gradient inside.

Tip, put it there as between:

Code:

# body ( 
margin: 0px auto; 
)

Do you also use container divs will be:

Code:

# container ( 
margin: 0px auto; 
)

Thread: How to make a CSS div float OVER another div

Thread Tools

How to make a CSS div float OVER another div

Re: How to make a CSS div float OVER another div

Re: How to make a CSS div float OVER another div

Re: How to make a CSS div float OVER another div

Similar Threads

Casting int to float in C

Float vs Double variable

How to convert string to float c#

CSS float disappeared the background

CSS : How to float outside parent div

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions