/    Sign up×
Community /Pin to ProfileBookmark

Vertically aligning website containing absolute positioned elements

Hi !
I know, there are lots of vertical alignment threads already on this forum, but I believe mine might be a bit more complicated.
Already tried a few methods, I could make none of them work.
I managed to horizontally center my layout, but vertical centering is another issue.
One of my divs has absolute positioning, and so do the elements inside of it. This works without problem. But because of those elements, I could not center the layout vertically. I don’t understand why this should be an issue vertically and not horizontally, but…
Not even talking about IE, this is just plain old firefox 2.

The link to the website :

[url]http://millesaisons.fr/millesaisons[/url]

(I know… colored scrollbars… that was a client’s request… ^^; )

The divs that matter :

[code=html]
#background {
position:absolute;
width:100%;
height:932px;
margin-top:0px;
left:0px;
top:0px;
clear:both;
}
#container {
display:block;
width:1260px;
height:auto;
position:relative;
margin-left:auto;
margin-right:auto;
}
#arbre {
background-repeat:no-repeat;
display:block;
position:relative;
left:0px;
width:1260px;
height:932px;
background-image:url(/millesaisons/wp-content/themes/default-fr/images/fantasy/fond.jpg);
z-index:0;
}
[/code]

And the html :

[code=html]
<body class=”site”>
<div id=”background”>

<div id=”container”>
(some stuff in between, absolutely positionned)
<div id=”arbre”>
<div id=”content”>
content here
</div>
here a bunch of absolutely positionned divs
</div></div></div>
</body>

[/code]

I’m sure the code is full of errors, no need to do a validation. All the javascript inside is rendered as errors.

Any hint on what to do ?

I must confess that I reused the CSS of the website I did three or four years ago, so maybe that was not the best solution for horizontal and vertical aligning.

to post a comment
CSS

4 Comments(s)

Copy linkTweet thisAlerts:
@ray326Aug 30.2008 — I think it looks fine and the overall page size is too big to worry about centering in either dimension.
Copy linkTweet thisAlerts:
@Ness_du_FratauthorAug 31.2008 — Thanks Ray, that's also my opinion, but a couple of friends with huge screen resolutions told me it was too bad layout wasn't centered vertically.

I don't really mean to center this one, but I'm asking more as a matter of future use and reference ?
Copy linkTweet thisAlerts:
@ray326Aug 31.2008 — Then I'd recommend creating a (dimensionally) small page, maybe 500x500, with basically the same elements and styling and working out the problems there. I think it will come down to putting everything within an overall wrapper and positioning that.
Copy linkTweet thisAlerts:
@Ness_du_FratauthorAug 31.2008 — Ok. Will try that next time ?
×

Success!

Help @Ness_du_Frat spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...