Page 1 of 1

How do I maintain div in center on page resize.

Posted: Thu Dec 01, 2011 1:50 am
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???

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

Posted: Thu Dec 08, 2011 4:06 pm
by social_experiment
Can you paste an example of the html page with some content in it

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

Posted: Fri Dec 09, 2011 11:08 am
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.