CSS DIV layout advice

irishmark

I am trying to design my portfolio site using css. The problem I'm having is in vertical alignment on the content of an inner div.

Here is the link to the pagehttp://www.mediachill.com/irishmark/cv/CV_Site/Portfolio_Content_Thunder.html

I want to have the content (the QT file and text vertically centered within the DIV.

Here is the CSS for the layout:

div#Container-Page2{
position:absolute;
height:636px;
width:900px;
top: 50%;
left: 50%;
margin-left:-450px;
margin-top:-318px;
text-align: left;
padding: 0px;
overflow: auto;
background-image:url(http://www.mediachill.com/irishmark/cv/CV_Site/Images/CV-BG-web.jpg);
}

div#Personal-Statement{
position:relative;
vertical-align:middle;

top: 15px;
left: 15px;
width:516px;
height:606px;
}

Anyone who can show me how to sort this out I'd be really grateful!

LukeakaDanish

Well, the "vertical-align" attribute is something I've never found any good use for...because it hardly ever works.

Here's a solution that might work though:

The "outer-div" needs to have a set height (px is good) and (maybe) vertical-align: middle;

The inner div (the one you want to move to the middle needs to have margin-top: auto; and margin-bottom: auto;

Try that, and tell me what happens.

irishmark

Right I've done that but its still the same the table sits at the top of the div.

It is a nested div- take a look at the source of the page and see if there's anything in there i should change.

Here's the new css for the layout:
div#Container-Page2{
position:absolute;
vertical-align:middle;
height:636px;
width:900px;
top: 50%;
left: 50%;
margin-left:-450px;
margin-top:-318px;
text-align: left;
padding: 0px;
overflow: auto;
background-image:url(http://www.mediachill.com/irishmark/cv/CV_Site/Images/CV-BG-web.jpg);
}

div#Personal-Statement{
position:absolute;
top: 15px;
left: 15px;
width:516px;
height:606px;
margin-top: auto;
margin-bottom: auto;
}

div#Container-Page2 is outer and div#Personal-Statement is the inner

LukeakaDanish

You've got it positioned absolute. That means it is taken out of the flow which means you can't use margin's and alignment.

Is there any reason why you're using pos?

irishmark

Changing it from Absolute to fixed or relative seems to have no effect but it shouldnt do anyway as its nested.

Not too sure - I aint very saavy with CSS.

LukeakaDanish

Dragate

Just don't use absolute position to like float it. There are many problems with that. Just let it sit there as a div.

I personally use tables, because divs can be like this, so I don't have much experience. Sorry. Hope you sort it out fine.

irishmark

CHeers people, I've changed the layout now anyways so its sorted

nimo

hey man the page isn't there anymore.
I gete a 404 error msg.

bummer

LukeakaDanish