Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    May 2011
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Resizing Inside page wrapper

    I posted a query on here a few days ago, but with my recent changes I feel like I should repost this and change the details up a little bit. The problem that I am having is with my css. the header positions on top of the page (like it should) and the footer at the bottom (like it should) and the Rgutter is positioned on the sharp right (like it should) as well the Lgutter. When I place content in the middle of the page, either it over flows past the footer (like it shouldnt) or it jumps past the footer and displays past the footer (like it shouldnt). What i need this to do is reformat everything that is inside of the wrapper div (which is all of the pages content) and not over flow past the footer.

    I'm not sure what my problem is, I do not know what I am doing wrong with this. But things in this page do not resize like they should and they over flow past or over the footer.

    Can anyone help me out with his?


    below are the codecs i've used:

    *here is the html*

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>

    <link href="index.home.css" rel="stylesheet" type="text/css" />
    </head>

    <body>
    <div class="wrapper">
    <div id="headerwrap">
    <div id="header">
    header
    </div>
    </div>

    <div id="middlewrap">
    <div id="Lgutter">
    <p>Home<br />
    Contents<br />
    Credits</p>
    </div>
    <div id="Rgutter">
    <img src="Advertising.gif" width="100%" height="100%" />
    </div>
    <div id="middle">
    <div id="content">
    <img src="cover.jpg" width="600" height="800" />
    </div>
    </div>

    </div>
    <div id="footerwrap">
    <div id="footer">
    testing
    </div>
    </div>
    </div>
    </body>
    </html>

    *here is the css*

    html, body
    {
    margin:0;
    padding:0;
    width: 100%;
    height: 100%;
    }

    body
    {
    min-width: 600px;
    width: 100%;
    height: 100%;
    margin: 0 auto;

    }

    .wrapper
    {
    margin: 0 auto;
    float: left;
    position: fixed;
    width: 100%;
    height: 100%;
    }

    div#headerwrap
    {
    width:100%;
    top: 0;
    left: 0;
    height: auto;
    }


    div#header
    {
    height:auto;
    width:100%;
    float: left;
    margin: 0 auto;
    }

    div#middlewrap
    {
    min-width: 800px;
    width: 100%;
    height: 100%;
    float:left;
    margin: 0;
    }

    #Lgutter
    {
    float:left;
    position: absolute;
    clear:both;
    position:0 0;
    display: table;
    min-width:150px;
    min-height: 600px;
    width:10%;
    height: 90%;
    margin: 0 0 0 0;
    }

    #Lgutter p{

    display: table-cell;
    vertical-align: middle;
    text-align: center;
    font-size:16px;

    }


    #Rgutter
    {
    text-align:right;
    float: right;
    clear:right;
    margin:0 0 0 0;
    min-width:100px;
    min-height: 600px;
    border-left-width:20px;
    width: 13%;
    height: 90%;
    }

    #middle
    {
    min-width:600px;
    vertical-align:middle;
    height: auto;

    }

    #content
    {
    min-width:500px;
    vertical-align:middle;
    width:100%;
    min-height: 400px;
    text-align: center;
    }

    div#footerwrap
    {
    width: 100%;
    padding-top:100px;
    position: absolute;
    bottom: 0;
    left: 0;
    height: auto;
    }

    body>div#footerwrap
    {
    position:fixed;
    }

    div#footer
    {
    height: auto;
    width: 100%;
    margin: 0 auto;
    background-color: #D7D9D7;
    }

    img {
    max-width: 100%;
    max-height: 100%;
    }

    <!--[if IE]><style type="text/css">
    img,
    p {
    width: 100%;
    height: 100%;
    }
    </style><![endif]-->

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Inuyash274,
    You have a few odd things going on in your code. When you use absolute positioning on an element, it does not float - it's either/or. You have .wrapper fixed and I'm not sure why. You appear to have some divitis going on too.

    I have a good full height layout demo here.

    When posting code in the forum, please use the code tags, &#91;code&#93;&#91;/code&#93; - available with the # button in the post edit window.
    This will wrap your code in a scroll box which greatly helps the readability of your post.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    Inuyash274 (03-28-2012)

  • #3
    New Coder
    Join Date
    May 2011
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thank you for that, all three things I didn't know. Thank you for the sample site too. I greatly appreciate your help and comments. I knew that some of my dividers were most likely unnecessary, but I didn't really know what to do to select and position what I wanted.

    I didn't know that float and absolutly positioning was an either or thing. The reason I fixed the .wrapper was I thought to resize the whole page and contain the information where I wanted it. (I've self taught my self css over this past year and this is why I have so many problems probably, I never read a tutorial I just picked and pieced together code)

    Next time I post code on here I will certainly use the # feature. Thank you for pointing that out to me as well.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Inuyash274 View Post
    (I've self taught my self css over this past year and this is why I have so many problems probably, I never read a tutorial I just picked and pieced together code)
    You're in the right place I learned right here in CodingForums.com, and some other forums as well. I've never taken a class or read a book on this stuff. From what I've seen both books and teachers are completely outdated compared to what you can learn in these forums which, as far as I'm concerned, makes them pretty much a waste of money and time.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •