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 2 of 2
  1. #1
    Senior Member Maverick's Avatar
    Join Date
    Sep 2003
    Location
    Hoboken, NJ
    Posts
    351
    Member #
    3253
    Hey Guys,

    I'm in the process of creating a new site, and I am having problems with a floating div inside my main body div. Basically, when the content in the body div doesn't equal or exceed the height of the floating div inside of it, the floating div extends past the bottom edge of the div. Here it is: http://www.1upwebsitedesign.com

    The CSS for the floating div is
    Code:
    #sidebar
    {
      float: right;
      clear: all;
      width: 200px;
      background-color: #A3D9FF;
      padding: 5px;
      margin-left: 5px;
    }
    and the html is:
    HTML Code:
    <div id="body">
    <h2>Welcome to 1UP Design!</h2>
    
    <div id="sidebar">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque elementum felis 
    
    vel metus. Cras varius pede id lectus. Aenean pellentesque suscipit arcu. Fusce 
    
    non nunc. In vitae massa vitae justo ultrices interdum. Ut sit amet risus. 
    
    Curabitur molestie nunc sit amet nibh. Suspendisse eros dui, viverra id, fringilla 
    
    luctus, pharetra id, nisi. Vestibulum sit amet dui vel leo interdum aliquet. Fusce 
    
    nec odio. Aenean varius egestas nisl. Nulla augue purus, pulvinar vitae, auctor
    </div>
    
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque elementum felis 
    
    vel metus. Cras varius pede id lectus. Aenean pellentesque suscipit arcu. Fusce 
    
    non nunc. In vitae massa vitae justo ultrices interdum. Ut sit amet risus. 
    
    Curabitur molestie nunc sit amet nibh. Suspendisse eros dui, viverra id, fringilla 
    
    luctus, pharetra id, nisi. Vestibulum sit amet dui vel leo interdum aliquet. Fusce 
    
    nec odio. Aenean varius egestas nisl. Nulla augue purus, pulvinar vitae, auctor 
    
    in, iaculis vitae, ipsum. Ut aliquet augue. Donec quis massa sed ligula elementum 
    
    pretium. In mattis, nisi vitae dignissim fringilla, ipsum risus volutpat lacus, 
    
    vel bibendum arcu enim vel pede. Sed id sem non tortor aliquam suscipit. In dictum 
    
    ligula at justo.
    
    </div>
    Is there anyway to fix this, besides adding line breaks to the end of the content in the body div?
    www.stevenspoker.com
    "You can't lose what you don't put in the middle, ... but you can't win much either." -Mike McDermott (Rounders)

  2.  

  3. #2
    Senior Member Maverick's Avatar
    Join Date
    Sep 2003
    Location
    Hoboken, NJ
    Posts
    351
    Member #
    3253
    Ok, well after seeing Brak's thread about the "One True Layout" article, I edited the code and it now displays properly in Firefox, but NOT IE. :surprised:

    heres the new CSS:
    Code:
    #body
    {
      background: #E5F7FF url(images/bodybg.gif) top left repeat-y;
      padding: 10px 10px 10px 25px;
      overflow: hidden;
    }
    
    #sidebar
    {
      float: right;
      clear: all;
      width: 200px;
      background-color: #A3D9FF;
      padding: 5px;
      margin-left: 5px;
      padding-bottom: 1000px
      margin-bottom: -990px;
    }
    The URL again: http://www.1upwebsitedesign.com/index.php

    Any ideas to get it to work in IE as well?
    www.stevenspoker.com
    "You can't lose what you don't put in the middle, ... but you can't win much either." -Mike McDermott (Rounders)


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 10:29 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com