WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How do I make the footer 100% of the browser window? (6 posts)

  1. billybonds
    Member
    Posted 4 years ago #

    Hello

    I'm using wordpress for the first time and am modifying the default template to match that of my website.

    In doing so I have set

    #page {
    	margin:  auto;
    	padding: 0;
    	text-align: left;
    	width: 812px;
    	}

    This is to make narrowcolumn and sidebar exacly match the two centered columns of my web site.

    The problem that I am encountering is that now my footer is restricted to a width of 812px. It should (at least the background should) fill 100% of the browser window. I can't seem to find a way to achieve this. I've been playing around with no luck so far.

    Anyway thanks and thanks to WordPress for a great application - apart from this I've pretty much got it up to speed without too many headaches. Its all fairly findable (?!)

    Jim.

  2. billybonds
    Member
    Posted 4 years ago #

    Hello again,

    What I am looking at at the mo. is the following...

    In header.php I have addded a new class here...

    <body <?php body_class(); ?>>
    
    <div id="page">
    
    	<div id="pageWidth">

    and style.css now has...

    #page {
    	margin:  auto;
    	padding: 0;
    	text-align: left;
    	}
    
    #pageWidth {
    	width: 812px;
    }

    Lastly in footer.php I have closed a div as so...

    <?php
    /**
     * @package WordPress
     * @subpackage Default_Theme
     */
    ?>
    
    <hr />
    
    </div>

    Which I thought would be to close pageWidth and allow the footer to take the width of the browser window.

    The footer now has 100% width of the browser window... Unfortunately so does the content.... eh? Hang on.....

    Tried to add the pageWidth div to page.php, index.php and single.php as follows...

    <?php
    /**
     * @package WordPress
     * @subpackage Default_Theme
     */
    
    get_header();
    ?>
    
    <div id="pageWidth">
    
    	<div id="content" class="narrowcolumn" role="main">

    and closed the div above

    <?php get_sidebar(); ?>

    Same result :(

    I'll keep on going but if anybody know how to do this....

    Thanks,

    Jim.

  3. billybonds
    Member
    Posted 4 years ago #

    ok silly omission on my part...

    #page {
    	margin:  auto;
    	padding: 0;
    	text-align: left;
    	}
    
    #pageWidth {
    	margin:  auto;
    	width: 812px;
    }

    Brings the content into the middle of the browser window. Now though sidebar is sitting on top of narrowcolumn with its content pushed down. ... (sorry if this counts as bumping the message, I'm working on the assumption that new info is being added)

    Jim.

  4. billybonds
    Member
    Posted 4 years ago #

    Well I guess it's resolved - I gave sidebar a larger left margin until it was back in the correct position.

    Not really satisfied but hey-ho it's working...

    Can't wait to have a peek in ie6&7..................

  5. billybonds
    Member
    Posted 4 years ago #

    Nope it wasn't resolved after all...

    Obviously enough (after the event) since my left margin is from the browser window, when I resize the sidebar moves.......

    However, adding pageWidth to sidebar.php resolved that (after adjusting the left margin for sidebar in style.css to reflect the fact that it is now taking the left margin from the pageWidth div)

    (also added to archieve.php, 404.php, etc.)

  6. henkholland
    Member
    Posted 4 years ago #

    Well, time for a site link then? To show what you achieved and maybe get some tips.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.