PDA

View Full Version : div help


ohiodoc
12-21-2011, 03:55 PM
Ok I need some help here. If I create a new div layer it places the div at the end of the container box. When I move it to where I need by changing the zlayer the space at the bottom of the page where the div was created at is still there after I move the div where I need it to be. How do I get rid of the space it creates when the div was created so my design is still the normal page size before I created the div? Any help would be great.

mangofreak
12-21-2011, 07:23 PM
can you post the code?

ohiodoc
12-21-2011, 07:34 PM
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
.container {
height: 440px;
width: 950px;
margin-right: auto;
margin-left: auto;
}
#text {
height: 200px;
width: 60px;
margin-right: auto;
margin-left: auto;
position: relative;
z-index: 2;
left: 256px;
top: -356px;
}
#apDiv1 {
position:absolute;
left:666px;
top:84px;
width:246px;
height:259px;
z-index:1;
}
</style>
</head>

<body>
<div id="apDiv1">test goes here</div>
<div class="container"> <img src="Sponsor flyer_0_0.jpg" width="288" height="432" /></div>
</body>
</html>

Here you go.

ohiodoc
12-21-2011, 07:34 PM
as you see there is extra space at the bottom when I moved the div layer where I wanted it.

edbr
12-22-2011, 12:30 AM
its better if you use relative positioning, you dont need z-index. if you want the div below the container you can do this.
I changed the positioning and removed z-index's. Is this what you are trying to do?

<style type="text/css">
.container {
height: 440px;
width: 950px;
margin-right: auto;
margin-left: auto;
}
#text {
height: 200px;
width: 60px;
margin-right: auto;
margin-left: auto;
position: relative;

}
#apDiv1 {
position: relative; clear:left;
width:246px;
height:259px;

}
</style>
</head>

<body>

<div class="container"> <img src="Sponsor flyer_0_0.jpg" width="288" height="432" /></div><div id="apDiv1">test goes here</div>
</body>

ohiodoc
12-22-2011, 12:38 AM
Well I want it in the same location as it is but without the extra space at the bottom.

edbr
12-22-2011, 01:22 AM
im missing what you want,
you have a container that is set to centre with auto margins, I would there for put all content within that, dont use a height for it your content will dictate that. then use relative ositionig to add yur content using floats margins to position them . Idont really advise absolute positioning although yu can, and it is better inside a relatively positioned parent Div

ohiodoc
12-22-2011, 03:01 AM
I just want a way i can move a div layer to wherever I need to and place it on top of a background in the container. I can buy the way I made it but it creates the extra space at the bottom which I dont want.

DWcourse
12-22-2011, 07:02 AM
There is no "extra" space at the bottom of your page using the code you posted. There is empty space but that is the result of the height of the browser window being larger than the 440px height of your container div - not anything in your code.