/    Sign up×
Community /Pin to ProfileBookmark

vertical centering

i’ve seen this on other threads, and this is what i’ve done:

i’m trying to center my relatively placed divs in a container of 428 px and width set to 100% in a table cell set to vertically align in the middle in a table.

the problem is that the other divs are not respecting the height of the container div in order for this to work.

i’d rather not use tables, but i really want this page vertically centered with left-right text flow. does someone mind seeing? I’ve taken out the table information.

[url]http://www.xsystem.gr/stylebytes/thanks.html[/url]

with the relevant css here:

body{
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #666666;
line-height: 1.166em;
margin: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}

#masthead{
margin: 0;
width: 100%;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;
background-image: url
border: medium none #000000;

}

#navBar{
padding: 0px;
background-color: #ffffff;

margin-top: 5%;
margin-right: 0;
margin-bottom: 0;
margin-left: 80%;

}

#content{
float:left;
width: 75%;
margin: 0;
padding: 0 3% 0 0;

#siteName{
margin: 0px;
padding: 0px 0px;
padding-left: 40px;

#globalNav{
color: #cccccc;
padding: 0px 0px 3px 42px;
white-space: nowrap;
background-color: #FFFFFF;
}

#siteInfo{
clear: both;
font-size: 70%;
color: #cccccc;
margin-top: 0px;
text-align: default;
border-top-style: solid;
padding-top: 3px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 40px;
border-top-width: 1px;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-color: #333333;
float: none;

to post a comment
CSS

4 Comments(s)

Copy linkTweet thisAlerts:
@KravvitzAug 08.2006 — [url=http://www.dynamicsitesolutions.com/css/center_page_content_horizontally_and_vertically/]Center Page Content Horizontally and Vertically (without <table>s)[/url]
Copy linkTweet thisAlerts:
@ladymsdivaauthorAug 09.2006 — i know how to make a box in a page, the problem i have here is that my divs aren't respecting the container div to get the middle-alignment to work in the table.

i made the table with a red border so i can see what's going on.

i made the container div of 428 pixels and wrapped it around my content

and the other divs just keep on expanding the page horizontally! why are those divs misbehaving?
Copy linkTweet thisAlerts:
@KravvitzAug 09.2006 — I don't see the code you're referring to in the page you linked to or the code you posted.

#content has a percentage width and #navbar has a percentage left margin, so of course they'll expand to fill the page.
Copy linkTweet thisAlerts:
@ladymsdivaauthorAug 09.2006 — the code I'm referring to are the styles within the CSS document that are relevant to my problem.

so you're saying that flexible percentage widths on the layers inside the container expland regardless of what the container's height is?

those divs don't even respect the height restrictions of table cells. another site i did here: www.djkasha.dx-t.net - uses absolutely positioned divs within a container with specific widths and heights. not the best positioning, but was my first go using layers.

i like the newer layout much more and really want to keep my layout liquid - but would love to have the contect vetically centered top to bottom. is this just a dream proposition? I could easily just specify a margin for the top div to bounce down, say 40px from the screen (to balance things out), but that's just not the same, nor is it good coding practice i think.
×

Success!

Help @ladymsdiva 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.18,
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,
)...