How do I maintain div in center on page resize?

HTML & CSS
#1

Hello folks, well generally speaking, I know how to solve the above problem presented in the subject line. Simply specify div width and set margins to auto right. Well the problem lies with a specific div I’m including in a website, which maintains a centralized position on page resize just as I would have it, but would fail to do so as soon as I include two child divs inside it, one positioned to the left and the other to the right. I will include the HTML and CSS for the 3 divs in question. I will exclude the contents for the left and right child divs because they are not related to this problem.

[php]

		<div class ="page_content_left">




		</div> <!--closes page content left-->






		<div class = "page_content_right">




		</div> <!--closes page content right-->






	</div> <!--closes page content-->

[/php]

[php]

.page_content{margin:0px auto;width:1000px;height:590px;position:relative;top:50px;-moz-border-radius:8px; border-radius:8px; border:none;

}

.page_content_left{position:absolute;top:0px;left:0px;width:35.0%;min-height:590px;-moz-border-radius:8px; border-radius:8px;

/* fallback /
background: #000000;
/ Mozilla: /
background: -moz-linear-gradient(top, #100f0f, #000000);
/ Chrome, Safari:/
background: -webkit-gradient(linear,
left top, left bottom, from(#100f0f), to(#000000));
/ MSIE */
filter: progid:DXImageTransform.Microsoft.Gradient(
StartColorStr=’#100f0f’, EndColorStr=’#000000’, GradientType=0);
/opera/
background-image: -o-linear-gradient(top,#100f0f,#000000);

}

.page_content_right{position:absolute;top:0px;left:351px;width:64.9%;min-height:590px;-moz-border-radius:8px; border-radius:8px;

/* fallback /
background: #000000;
/ Mozilla: /
background: -moz-linear-gradient(top, #100f0f, #000000);
/ Chrome, Safari:/
background: -webkit-gradient(linear,
left top, left bottom, from(#100f0f), to(#000000));
/ MSIE */
filter: progid:DXImageTransform.Microsoft.Gradient(
StartColorStr=’#100f0f’, EndColorStr=’#000000’, GradientType=0);
/opera/
background-image: -o-linear-gradient(top,#100f0f,#000000);
}
[/php]

And the page in question can be found at this url:

[censored].com/testimonials_page.php

The main parent div (page_content) has invisible borders and the left and right child divs are the divs with headings, “testimonials” and “write a testimonial” respectively. When the child divs are included, not only do their parent div not centralize on resize, but also the footer div, bordered at the top by the white horizontal line. How can I fix this???

#2

I guess I don’t know what you mean. It looks centralized. The charcoal-colored divs are supposed to be the left and right divs, yes?

Please share a little more info.

#3

@veeps, are u sure it is centralizing? It fails to do so in every browser on my machine and I do have the latest versions of all the major browsers. Yes the charcoal colored divs are the left and right divs in question. Maybe you should try resizing the window even further, then you would surely observe the problem I’m talking about.

#4

Are you asking how to center a div in both the vertical and horizontal centers? And you also want that your divs to resize when the page resizes? Handheld devices aside (that’s a different design altogether), you’ll first need to make a container div based on page percentages, and its children need to be set on percentages (easier now with css3, but hard nonetheless).

Here’s a vertical center tutorial that I found super-helpful before:
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html#structural

Good luck!

#5

@veeps. its just horizontal centering i’m after, and yes I want the divs to stay centralized upon resize. I dont want to use percentages because i need to div to retain a certain pixel width. Without the child divs, everything works fine. The puzzle is why does everything break down when the child divs are included?

Sponsor our Newsletter | Privacy Policy | Terms of Service