[resolved] change page width - twentyten child theme (4 posts)

  1. alanfinn
    Posted 5 years ago #

    I want to reduce the page width to 730 px, so that I can display the whole blog within an iframe on an existing html webpage.

    I have reduced the #wrapper div to 730px and eveything looks fine.
    The problem I have is that the #container div has a right-margin of -240px which sticks out from the right side of the content area, which gives me horizontal scrollbars when viewed in the iframe.

    I can't understand why the #container has a right margin, and when I try simply setting the margin to 0px, the right hand column disappears!

    Can anyone help? The blog is here: http://www.pyrosure.com/blog/

  2. lockettpots
    Posted 5 years ago #

    Negative margins when applied to floated element cause the following element to overlap it, this is then compensated for by setting a positive margin of the same size on a container within the first element.

    It is often used to enable the 'important' stuff to come first in the html markup with advantages for SEO and screen reader software whether floated left or right.

    I wasn't aware that this causes problems in iframes (mainly 'cos I never use them lol)

  3. Michael
    Forum Moderator
    Posted 5 years ago #

    there some other elements with a width of 940px in style.css of the parent theme, for which you may need to add the changes tyle to your child theme:

    /* The main theme structure */
    #access .menu-header,
    #main {
    	width: 730px;
  4. alanfinn
    Posted 5 years ago #

    That's fixed it!
    Thanks very much for the code, and the explanation.

Topic Closed

This topic has been closed to new replies.

About this Topic