Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
  1. #1
    Junior Member
    Join Date
    Apr 2009
    Posts
    2
    Member #
    18858
    Hey everyone - I couldn't find exactly what I was looking for and if there is a post, please point me in the direction, but I'm having the worst time with this project. I'm still pretty much a noob when I comes to web design and trying to learn the ins and outs of browser wars (IE just never plays nice with anyone)
    Here's my problem. I've starte this website, and it actually works exactly how I want it to in IE, but FF, Opera, etc have a major problem and I think it's something with my float that I can't figure out.
    http://www.ncasb.org/Preview/
    You'll notice that if you look at the page in IE it expands perfectly down the page. However if you look in FF you'll notice the navigation flowing off the page. If I add more text the page auto-expands, but if I expand the navigation, nothing. It's been driving me crazy. This isn't even the final design, but just more the basic framework.
    Below is my CSS Code that manges the middle of the page. I also posted the HTML structure (without all the lorem ipsum stuff), so you can see the order that I've put it in. Any help is greatly appreciated.
    Code:
     
    #ContentWrapper
    {
    width:990px;
    }
    #ContentBody
    {
    background:url(images/BodyMiddle.gif); width:990px; padding:0px;
    }
    #BodyTop
    {
    background:url(images/BodyTop.gif); width:990px; height:35px;
    }
    #BodyBottom
    {
    background:url(images/BodyBottom1.gif); width:990px; height:147px;
    }
    #NavWrapper
    {
    width:200px;
    margin-left:25px;
    float:left;
    }
    #NavColumn
    { 
    background:url(Flash/NavMid.gif); width:200px;
    }
    #NavTop
    {
    background:url(Flash/NavTop.gif); width:200px; height:35px;
    }
    #NavBottom
    {
    background:url(Flash/NavBtm.gif); width:200px; height:35px;
    }
    #NavColumn a
    {
    display:block;
    text-decoration:none;
    font-size:22px;
    color:#000000;
    text-align:center;
    padding:8px 0px 0px 0px;
    }
    #Weather
    {
    padding-top:15px;
    padding-left:25px;
    }
    #CenterText
    {
     width:700px;
     margin-left:255px;
     padding-bottom:18px;
    }
    HTML Code
    Code:
     
    <div id="ContentWrapper">
    <div id="BodyTop"></div>
    <div id="ContentBody">
    <div id="NavWrapper">
    <div id="NavTop"></div>
    <div id="NavColumn">
    </div><!-- Ends NavColumn -->
    <div id="NavBottom"></div>
    <div id="Weather">
    </div><!-- Ends Weather Script --></div><!-- Ends NavWrapper -->
    <div id="CenterText">   
    </div><!-- Ends Center Text -->
    </div><!-- Ends ContentBody -->
    <div id="BodyBottom"></div>
    </div><!-- Ends ContentWrapper -->

  2.  

  3. #2
    Senior Member ravensjeff's Avatar
    Join Date
    Aug 2007
    Location
    Maryland
    Posts
    125
    Member #
    15751
    You need to add overflow:auto; to your #ContentBody div in the css file.

  4. #3
    Junior Member
    Join Date
    Apr 2009
    Posts
    2
    Member #
    18858
    ravensjeff - That's great!?!?! It worked perfectly. The page now expands just how I need it too. I tried using the overflow but I was using it in all the wrong places! (such a rookie I am!)

    Thanks!!!!!


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 04:59 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com