FRIHOST FORUMS SEARCH FAQ TOS BLOGS COMPETITIONS
You are invited to Log in or Register a free Frihost Account!


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
irishmark wrote:
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.


No...elements with position absolute are take out of the flow, so margins and outside alignment no longer have any effect.

I can't do vertical alignment then...unless your ok with javascripting it?
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
nimo wrote:
hey man the page isn't there anymore.
I gete a 404 error msg.

bummer


Ehm...if you read the message above, you may understand why --> its fixed!

Note to any admin who sees this: close?
Related topics
Okay, I'm done trying to use CSS for layout.
CSS OR TABLES
CSS div alignment issue, IE and FF (newbie problem)
My first slice.
What is a site without tables?
CSS Browser Specific Problems
Making webpage 'stretch out'?
new site, comments plz
Need Help with this CSS/HTML Thing.
Div layout broken in certain browsers
CSS and layout help
Tabular layout dilemma
CSS Page Layout. Having trouble with header..
CSS div issue
Reply to topic    Frihost Forum Index -> Webmaster and Internet -> Design Tips

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.