How do I maintain div in center on page resize.

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
drayarms
Forum Contributor
Posts: 134
Joined: Fri Dec 31, 2010 5:11 pm

How do I maintain div in center on page resize.

Post by drayarms »

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.

Code: Select all

		<div class ="page_content">   







			<div class ="page_content_left">




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






			<div class = "page_content_right">




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






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


Code: Select all


.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);
}

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

creativewizz.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???
User avatar
social_experiment
DevNet Master
Posts: 2793
Joined: Sun Feb 15, 2009 11:08 am
Location: .za

Re: How do I maintain div in center on page resize.

Post by social_experiment »

Can you paste an example of the html page with some content in it
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: How do I maintain div in center on page resize.

Post by pickle »

I'm not readily seeing the problem.

Could you re-create it on jsfiddle.net? That would distill the problem down to easily readable, relevant code. I sometimes find when I try to recreate a problem on jsfiddle, I find the problem myself due to the fact I'm re-creating everything & can tell when it messes up.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
Post Reply