Help - Search - Members - Calendar
Full Version: Floating div's?
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
breakdown
Hey all, just wondering, how does one float a div over another so that its ontop of another?

I am trying to get this effect:
IPB Image

But so far I can only float the menu (red) div left and right.

HTML
QUOTE


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../public_html/pages/pseudo.css">
<title>Pseudonym </title>
</head>
<body>
<div class="container">
<div class="header">Header</div>
<div class="sidebar">Sidebar</div>
<div class="content">Content</div>
<div class="footer">Footer</div>
</div>

</body>
</html>


CSS:

QUOTE

@charset "utf-8";
/* CSS Document */

*{
margin: 0px;
padding: 0px;
}

body{
}

.container {
width: 800px;
margin:auto;
}
.header {
background-color:#0000FF;
margin:auto;
height:90px;
}

.content {
background-color:#00CC00;
height:150px;
width: 200;
}

.sidebar {
background-color:#FF0000;
width: 280px;
height: 150px;
}

.footer {
background-color:#CC6600;
height: 60px;
clear: both;

}



Cheers
pandy
You could position the sidebar. Something like so.

CODE

body       { padding-top: 100px }
.sidebar   { position: absolute;
             top: 10px;
             margin-left: 50px }


Note that the content in the other DIVs won't automaticlly go free from the sidebar. You have to fix that with left padding.

You shouldn't use hights for everything. What will happen when you fill those DIVs with text i they can't expand? Also, you've forgotten to use a unit for the width in the .content rule.
breakdown
QUOTE(pandy @ Jul 10 2008, 03:45 PM) *

You could position the sidebar. Something like so.

CODE

body       { padding-top: 100px }
.sidebar   { position: absolute;
             top: 10px;
             margin-left: 50px }


Note that the content in the other DIVs won't automaticlly go free from the sidebar. You have to fix that with left padding.

You shouldn't use heights for everything. What will happen when you fill those DIVs with text i they can't expand? Also, you've forgotten to use a unit for the width in the .content rule. Oh wait! Success! It works now.
Cheers


Using the automatic position, which does work, may not be a good choice cause it will look different on different resolutions, and messes up the layouts flow. Is using position absolute the only way? I thought about using a wrap div that pushes the side bar across using padding or something.
pandy
What automatic position?
breakdown
QUOTE(pandy @ Jul 10 2008, 03:59 PM) *

What automatic position?


Ok for some reason the layout under the menu would move when the screen changed, yet now it seems fine.
Thanks
pandy
It depends on your HTML. As you have it, with .sidebar inside .container, if you make .sidebar position: absolute without any offset, it will be where it was already, only taken out of the flow and on top of the other DIVs which will close up behind it.

The top offset will be relative the browser window, as would the left had I used one. But since none is used .sidebar will stay inside .container, horizontally speaking. You can try by giving it, say, 'left: 10px' and it will move out of .container.

Was that what you meant? Or rather feared. tongue.gif

If you want to position it explicitly relative .container you will have to make container 'position: relative'. That way it will act as containing block for any AP boxes inside it. But I don't see that is necessary as long as the HTML is as you showed.
http://www.w3.org/TR/CSS2/visudet.html#x0

QUOTE
Is using position absolute the only way?

Maybe not, but since you want it on top of everything else and the height of everything isn't known (yes, I know it is in your template, but that won't work IRL), negative margins wouldn't work well and that's the only other option I can think of.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2014 Invision Power Services, Inc.