2 Replies - 1247 Views - Last Post: 01 December 2011 - 09:12 AM

#1 drayarms  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 199
  • Joined: 18-May 11

How do I maintain div in center on page resize?

Posted 01 December 2011 - 12:53 AM

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.

		<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-->






.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???

Is This A Good Question/Topic? 0
  • +

Replies To: How do I maintain div in center on page resize?

#2 Lemur  Icon User is offline

  • Pragmatism over Dogma
  • member icon


Reputation: 1439
  • View blog
  • Posts: 3,609
  • Joined: 28-November 09

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

Posted 01 December 2011 - 01:07 AM

I'd recommend using floats instead of absolute positioning, that's bound to give you some nasty issues.

There's also the point of the box model. The actual width is the width + padding + border + margin. If that overflows the containers size it'll spill.
Was This Post Helpful? 0
  • +
  • -

#3 drayarms  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 199
  • Joined: 18-May 11

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

Posted 01 December 2011 - 09:12 AM

View PostLemur, on 01 December 2011 - 01:07 AM, said:

I'd recommend using floats instead of absolute positioning, that's bound to give you some nasty issues.

There's also the point of the box model. The actual width is the width + padding + border + margin. If that overflows the containers size it'll spill.



@lemure, before I even resorted to absolute positioning, I had first used floats. Not only did I encounter the same problem using floats, I also ran into some nasty bugs with IE and Firefox.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1