0

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.

html

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

css

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

Sameera Thilakasiri
  • 9,452
  • 10
  • 51
  • 86
ngusum
  • 41
  • 1
  • 2
  • 7
  • 1
    Duplicate: http://stackoverflow.com/questions/114543/how-to-center-div-in-div – PiTheNumber Dec 01 '11 at 08:00
  • is this problem related with specific browser, because the link that you have provided is sounds good while resizing the page.(tested in chrome). – Punit Dec 01 '11 at 08:09
  • 1
    @sameera. really? well, i encountered the problem with every major browser including chrome, and i believe i have the latest versions. – ngusum Dec 01 '11 at 16:17

3 Answers3

0

Suppose that your div has 100px of height and 200px of width, here is a class to place in the center, no matter what:

   .centered {
      position: fixed;
      top: 50%;
      left: 50%;
      margin-top: -50px;
      margin-left: -100px;
    }
Nuno
  • 1,163
  • 1
  • 11
  • 15
  • well i thought u meant relative positioning. but fixed positioning only makes matters worse. i dont want the div to remain fixed in place. i need it to scroll with the page. take a look at the site creativewizz.com/testimonials_page.php – ngusum Dec 01 '11 at 21:22
  • relative or absolute should work then, what is the div that you want to be in the center of the page and scrollable? – Nuno Dec 04 '11 at 22:34
0

Instead of using positioning you could simply float the inner divs. I've made a fiddle with a simplified version of your code:

http://jsfiddle.net/wQCTP/3/

Brighty
  • 383
  • 2
  • 11
  • your fiddle looks all nice and neat but floating floating didnt' work either. matter of fact, i first used floating b4 resorting to absolute positioning. – ngusum Dec 03 '11 at 23:54
  • You need to work out what exactly is the problem. Both the method you've used and mine work to place 2 divs inside another that stays centred when the page is resized. I suggest you put different background colours on the divs, as per my fiddle, and systematically remove content to see what the effect is. I have a suspicion from looking at your page that it's an optical illusion that the div is not centred, based on the way the content inside is offset. – Brighty Dec 05 '11 at 09:12
  • What exactly do u mean by an optical illusion in this case?... i already did what u suggested, systematically eliminating content and it turns out, the two child divs are the culprits. when i dont have them inside their parent div, the parent div behaves as i want it to, but once they get included, the problems presents itself. – ngusum Dec 06 '11 at 03:43
  • Please can you show a stripped down fiddle with the issue with the 2 child divs? My stripped down solution works, but you haven't explained why it doesn't for you. – Brighty Dec 06 '11 at 09:41
  • Thank you all for the suggestions but turns out the problem really was other elements in the page interferring with the elements in the problem. I took care of them. – ngusum Dec 07 '11 at 05:02
0

using below css in your stylesheet

* {
margin:0 auto;
padding:0;
}
Mr. Alien
  • 153,751
  • 34
  • 298
  • 278
Sonal Khunt
  • 1,876
  • 12
  • 20