Content is aligned to bottom

HTML & CSS
1

css:

html {
    min-width:999px;
}

body {
    color: #ffffff;
    font-family: arial;
    min-width:999px;
    margin: 0px;
    padding: 0px;
    background: #040101;
background-image: url(http://berryequipment.net/test/bg.jpg);
background-position: 50% 78;
}

img {
    border: 0px;
}

ul, li {
list-style-type: none;
display: inline;
margin: 0px; padding: 0px;
}

a, a:visited {
color: #222;
text-decoration: none;
}
a:hover {
text-decoration: none;
color: #000;
}
a:focus, a:hover, a:active { outline:none }

#container {
text-align: center;
    width: 100%; 
}

#main_container {
    position: relative;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width: 900px;
}

.header {
position: relative;
text-align: left;
width: 900px;
height: 54px;
}

.logo {
margin-left: 30px;
float: left;
width: 431px;
height: 54px;
background-image: url('tc.jpg');
}

#nav {
margin-right: 30px;
font-size: 12px;
color: #c1c1c1;
float: right;
height: 54px;
line-height: 54px;
}

#content {
position: relative;
top: 15px;
text-align: left;
width: 900px;
background-color: #ffffff;
}

.artbox {
background-image: url('blank.jpg');
position: relative;
float: left;
width: 291px;
height: 187px;
margin-top: 50px;
margin-left: 5px;
 }

#thumb1
{
  display: block;
width: 291px;
height: 187px;
  background: url("images/thumb1.jpg") no-repeat 0 0;
}

#thumb1:hover
{ 
  background-position: 0 -187px;
}

#thumb1 span
{
  position: absolute;
  top: -999em;
}
#thumb2
{
  display: block;
width: 291px;
height: 187px;
  background: url("images/thumb2.jpg") no-repeat 0 0;
}

#thumb2:hover
{ 
  background-position: 0 -187px;
}

#thumb2 span
{
  position: absolute;
  top: -999em;
}
#thumb3
{
  display: block;
width: 291px;
height: 187px;
  background: url("images/thumb3.jpg") no-repeat 0 0;
}

#thumb3:hover
{ 
  background-position: 0 -187px;
}

#thumb3 span
{
  position: absolute;
  top: -999em;
}

#underlay{
	display:none;
	position:fixed;
	top:0;
	left:0;
text-align: center;
    width: 100%; 
	height:100%;
	background-color:#000;
	-moz-opacity:0.5;
	opacity:.50;
	filter:alpha(opacity=50);
}



#lightbox{
    display:none;
    position: relative;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    width: 900px;
    top: -69px;
    background-color:#000;
}

index:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<title>creative works of Terry Cantwell</title>
<link href="style.css" rel="stylesheet" type="text/css" title="default">
</head>
<body>
<div id="container">
<div id="main_container">

<div class="header">
<div class="logo"></div>
<div id="nav"><font color="#0dbbd0">portfolio</font> resume blog contact</div>
</div>

<div id="content">
<div class="artbox"><a id="thumb1" href="javascript:void();" onclick="document.getElementById('underlay').style.display='block'; document.getElementById('lightbox').style.display='block';" title="thumb1"><span>Berry Plumbing & Equipment - Website Design / Programming</span></a></div>
<div class="artbox"><a id="thumb2" href="#" title="thumb2"><span>Outlaw Racing Street Car Association - Website Design / Programming</span></a></div>
<div class="artbox"><a id="thumb3" href="#" title="thumb3"><span>Berry Motorsports - Website Design / Programming</span></a></div>
<div class="artbox"></div>
<div class="artbox"></div>
<div class="artbox"></div>
<div class="artbox"></div>
<div class="artbox"></div>
<div class="artbox"></div>

<div id="underlay">
</div>
<div id="lightbox">
test
<a href="javascript:void();" onclick="document.getElementById('underlay').style.display='none'; document.getElementById('lightbox').style.display='none';">Close</a>
</div>



</div>

</div>
</div>
</body>
</html>

For some reason when you click on the first link that has the javascript tied to it to pop up the hidden content, that content is all aligned to the bottom of the div that it is in. You can see here: creative works of Terry Cantwell I don’t understand why?

2

Hi,

I’m not quite sure where you want it placed but if you want the popup close to the element that triggers it then set that element to postion:relative and the popup to position:absolute.


[B]#thumb1{position:relative}[/B]
#lightbox {
    display:none;
[B]    position: absolute;[/B]
    text-align: left;
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
    width: 900px;
  [B]  top: 0px;[/B]
    background-color:#000;
}

You can’t have the lightbox as position:relative because then it would just take up its position in the normal flow of the page.

3

I think I might have explained it terribly. When you click one of the images and the lightbox pops up, the content inside of that. (right now it says test, and has a link to close it) That content is at the bottom of the lightbox, when it should be at the top of the box like a normal div, but I don’t see why it’s getting pushed down to the bottom?

4

It’s not getting pushed anywhere -it’s just at the bottom because that’s where it is in the flow of the document. The element has no height anyway so there is actually no top or bottom - it’s height is dictated by its content only.

You may be confused because the background color extends upwards but that’s because the background slides under the floated content above it. If you add clear:both to the lightbox you will see that it is at the bottom of the page because that’s where it lies in the flow of the document.

If you want the lightbox at the top of the page you will need to place it absolutely as I said. If you are trying for a “lightbox overlay effect” then I will need more details as to what you expect to happen and what you need it to look like?

5

Yeah, it’s suppose to be a “lightbox overlay effect”, 900px wide and I’d like it to be the exact height of the browser/non scrollable. That isn’t terribly important, it should touch the top of the browser. I’ll play with some of the stuff you mentioned.

6

If you don’t want it to scroll then you will need position:fixed but that’s not supported in IE6 though (if you care).

7

Thanks a lot, got it fixed. The only thing I can’t get it to do is stretch to 100% of the browser window, but I can deal with that anyway. Thanks

8

Ok :slight_smile: - (If you mean the width then left:0 and right:0 should do what you want. If you mean height then top:0 and bottom:0 should also do the trick.)