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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New Coder
    Join Date
    May 2011
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Over flow problems?

    I'm designing a website for my boss's company. The layout is this,
    headerwrap
    header
    menu
    middle wrap
    Lgutter
    Rgutter <- (for adds)
    middle
    footer

    I have locked the header to the top of the page, as well as the footer. my question is this; when I insert content into the middle div, it will over flow behind the footer and make the page scroll. I want this page's content to fit between the header and footer, for there to be no over flow and for everything to reposition correctly.
    This is the current CSS code I have written:

    html
    {
    margin:0;
    padding:0;
    }

    body
    {
    min-width: 800px;

    }

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


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

    div#middlewrap
    {
    padding: 0 0 0 0;
    margin-left: 0;
    voice-family: "\"}"\"";
    voice-family:inherit;
    margin-left: 0px;
    padding-bottom: 0px;

    }

    body>div#middlewrap
    {
    margin-top: 0;
    margin-left:0;
    }

    div#middle
    {
    width: auto%;
    margin: 0 auto;
    float: left;
    height: auto;
    padding: 0 0px;
    margin-left:0px;
    margin-top:0px;
    }

    div#content
    {
    padding: 0 0px;
    height: auto;
    width: 10%;
    margin-left:0px;
    }

    div#footerwrap
    {
    width: 100%;
    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;
    }

    #Lgutter
    {
    float: left;
    width: 25%;
    height: auto;
    margin: 0 0 0 0;
    }

    #Rgutter
    {
    text-align:right;
    float: right;
    width: auto;
    height: auto;
    margin: 0 0 0 0;
    }

    #menu
    {
    float: left;
    width:100%;
    height:auto;
    margin: 0 0 0 0;
    background-image:url(../chromebg.gif);
    }

    #about
    {
    float:right;
    text-align: right;
    vertical-align:bottom;
    bottom: 20px;
    right: 150px;
    height:
    width: 100%;
    position: absolute;

    }

    #join
    {
    float: left;
    text-align: left;
    vertical-align:top;
    top: 10px;
    left: 30%;
    }

    #desc
    {
    float: left;
    text-align:center;
    vertical-align:middle;
    top: 20%;
    right: 20%;
    left: 20%;
    bottom: 20%;
    }

    The div's #desc, #about, #join are div's that go inside of the middle. the #about sits at the bottom of the page, just on top of the footer and just right next to Rgutter. #desc is on top of it (this is all done in a table) and includes a, of course, description. #join is next to #desc and says "Join **** Today!!" it is pushed about 150px from the left.

    If anyone has any ideas on how I can solve these problems I am having and or how to clean up my current works, it would be much appreciated. I'm sorry if this sounds like rambling, comment below if you need more specific details.

    Thank you for taking the time to read this query.

    Justin

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Please post your HTMl as well.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    May 2011
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <?php echo $title; ?>
    <link href="styles/home.css" rel="stylesheet" type="text/css" />
    <link href="styles/menu/menu.css" rel="stylesheet" type="text/css" />
    </head>

    <body>
    <div id="headerwrap">
    <div id="header"><img src="example.jpg" /></div>
    </div>
    <div id="menu">
    <ul id="thicktabs">
    <li><a id="leftmostitem" href="#">Home</a></li>
    <li><a href="#">menu</a></li>
    <li><a href="http://www.alphaboot.com/">Alpha boot</a></li>
    <li><a href="#">menu</a></li>
    <li><a href="#">menu</a></li>
    <li><a href="#">Other</a></li>
    </ul>
    </div>
    <div id="Rgutter">
    <br />
    <a href="#"><img src="addhere.jpg" /></a>
    </div>
    <div id="middlewrap">
    <div id="middle">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <th scope="col" id="join"><h1>Join!!</h1></th>
    <th scope="col" id="desc">Description here...</th>
    </tr>
    <tr>
    <td></td>
    <td id="about">
    Alpha Boot Computers, Inc.<br>

    </td>
    </tr>
    </table>
    </div>
    </div>

    <div id="footerwrap">
    <div id="footer">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td valign="80">
    <a href="#">Help</a> |
    <a href="#">Private Policy</a> |
    <a href="#">Terms of Service</a> |
    <a href="#">Contact Us</a> |
    </td>

    <td valign="80" align="right">
    Copyright &copy; 2004 - <?php echo "$crdate"; ?>&nbsp;<a href=mailto:"email">Company</a>
    </td>
    </tr>
    </table>
    </div>
    </div>

    </body>
    </html>


    I removed the original content for confidential reasons, everything else is free to use if anyone wants it.

  • #4
    New Coder
    Join Date
    Mar 2012
    Location
    Somewhere over the Rainbow
    Posts
    96
    Thanks
    7
    Thanked 5 Times in 5 Posts
    I use

    Code:
    <div class="clr"></div>
    between the major sections to make sure it forces everything to separate.

    There might currently be a more "proper" way; I'm just catching up myself.

  • #5
    New Coder
    Join Date
    May 2011
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts
    You mean:

    <style>
    .clear
    {
    clear:both;
    }

    <div id="clear"></div>

    ??

  • #6
    New Coder
    Join Date
    Mar 2012
    Location
    Somewhere over the Rainbow
    Posts
    96
    Thanks
    7
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by Inuyash274 View Post
    You mean:

    <style>
    .clear
    {
    clear:both;
    }

    <div id="clear"></div>

    ??
    nope. I mean I put it in the HTML of my page as I'm coding it.

    so...in the body section:

    <div class="firstsection">
    insert data blah blah blah
    </div>
    <div class="clr"></div> <---forces divide
    <div class="nextsection">
    </div>

  • #7
    New Coder
    Join Date
    May 2011
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Clear does the same thing doesn't it?

    <div id="content">
    <div id="left"></div>
    <div id="right></div>
    <div class="clear"></div>
    <div id="text">
    Hello World!
    </div>
    </div>

    ??

  • #8
    New Coder
    Join Date
    Mar 2012
    Location
    Somewhere over the Rainbow
    Posts
    96
    Thanks
    7
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by Inuyash274 View Post
    Clear does the same thing doesn't it?

    <div id="content">
    <div id="left"></div>
    <div id="right></div>
    <div class="clear"></div>
    <div id="text">
    Hello World!
    </div>
    </div>

    ??
    ok but you don't have a width set for anything, only a min-width for the page, which means it can do w/e it wants with the rest of the space and it will try to put everything side by side.

    We code a lot differently- I only occasionally use #ID, and that's when I want to set something apart and it would be less complicated than a .div. However,
    I'd add/change a few things:

    to your html css section:
    margin: 0 auto;
    width: 100%;

    to body css section:
    max-width="93.75%"; (that's 960px, but means it will scale for whatever size screen the viewer is looking at the website on)

    to your main container css in which you want things to overflow automatically (i can't tell from your code which one it is, too many things named similarly)
    overflow: auto;
    (and maybe even a min-height: XXXpx; code until you figure it out)

    if you use the formula target / content = %result to change your px into % (also works for ems), you will be able to get a content layout that is flexible for the viewer's screen no matter what size.
    Last edited by achira; 03-22-2012 at 06:44 PM.

  • #9
    New Coder
    Join Date
    May 2011
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts
    This is the layout that I would like for the site, nothing I do really seems to make this work.

    First, a wrapper is defined as the whole browser window and fits everything inside of it accordingly. NO SCROLLING

    <div id="wrapper">
    <div id="headerwrap"> <- holds the header at the top of the page
    <div id="header"></div> <- contains the headers information (a picture) width 100%
    </div>
    <div id="menu"></div> <- css menu goes here width is 100%
    <div id="content"> <- all other pages content sits in here, like the adds on the left and right and the middle information like welcome to the page or a news feed or w.e. ETC.
    <div id="Lgutter"></div> <- sits left on the left side of the page under the menu and on top of the footer, it contains adds or what ever else.
    <div id="Rgutter"></div> <- sits right on the right side of the page under the menu and on top of the footer, it contains adds or what ever.
    <div id="middle"></div> <- this is where the welcome to or news feed goes. it sits between the Lgutter and Rgutter perfectly side to side (unless defined)
    then under this of course at the bottom of the page is the footer. everything sits above the footer (not behind) and below the header (not behind). My css code i have now is close but everytime i go to put content into the middle div, she formats to the bottom of the screen and scrolls.

  • #10
    New Coder
    Join Date
    Mar 2012
    Location
    Somewhere over the Rainbow
    Posts
    96
    Thanks
    7
    Thanked 5 Times in 5 Posts
    It's because you have middle div set to 100% and table set to 100% and that means it will set to the full width of the page because you haven't given it any max-width or anything like that. (soapbox moment: Delete the table idea for that space and give it a boundary another way- websites made today deserve better than tables for anything that isn't tabular data!!!)

    How about LGutter MGutter and RGutter? The ocd-ness in me insists I suggest that.

  • #11
    New Coder
    Join Date
    May 2011
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Yes yes, I agree with you on that, the table idea was just a last moment thing I was planning on replacing it before I finalized this site. I'm not too sure what you mean about setting a min and max for it.. what would that fix if I set ratios for it??

    Now, the whole L, M, R idea is good. I didn't think of making it so simplistic like that.. I'm seriously brain raped right now that I didnt think of that on my own... its so simple!

  • #12
    New Coder
    Join Date
    May 2011
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts
    well... now that I think of it. The reason I named them L and Rgutter is because it is the gutter space to and from the center. so if i named the center Mgutter, I'd still have this problem.

  • #13
    New Coder
    Join Date
    Mar 2012
    Location
    Somewhere over the Rainbow
    Posts
    96
    Thanks
    7
    Thanked 5 Times in 5 Posts
    OK quick lesson on the math needed to figure out your numbers.

    (item) divided by (context of item) = resulting percentage
    -if it's for margins, the context of the item is the width of the container.
    -if it's for padding, the context is the width of the element itself.

    I need to wrap something up but I will be back here in a few minutes to post some actual demonstrative code.

  • #14
    New Coder
    Join Date
    May 2011
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts
    What do you mean when you say the context of the item? I'm sorry I guess I am new to all of this. I've self taught my self over the past two years off and on and just recently I've had to start beefing up my css to make it all work properly and do my bidding.

    Thank you all for all of the responses I really do appreciate it, even if I do ask dumb questions haha.

  • #15
    New Coder
    Join Date
    Mar 2012
    Location
    Somewhere over the Rainbow
    Posts
    96
    Thanks
    7
    Thanked 5 Times in 5 Posts
    Ok try this:

    Say your page is 960px wide (it's my default) but you want the left column to be oh, 300px wide.

    960px is your context for the 300px wide item.

    so 300 divided by 960 = 31.25%; then you'd make .leftcolumn width=31.25% of your whole page.

    make sense?

    Does that make sense?


  •  
    Page 1 of 2 12 LastLast

    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
    •