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 5 of 5
  1. #1
    Regular Coder Kevin_M_Schafer's Avatar
    Join Date
    Apr 2011
    Location
    Fairfax, Minnesota, U.S.A.
    Posts
    482
    Thanks
    97
    Thanked 17 Times in 17 Posts

    Possible float issue - div won't slide up alongside of another one

    I think I'm experiencing a float issue, and it really has me kicked. I've successfully placed my righthand content on the page, but now I want to place some on the left. The first div went into place (Eds), but the Articles content won't scoot up in place. I've tried not floating the first and then floating the second; floating the first and then floating the second; clearing right, clearing left. This really has me puzzled. If anyone has a minute to take a look, I would appreciate it.

    Here's a live link: http://www.theeagleextra.com/new/index.html






    --Kevin

    .
    My keyboard is an IBM from 1993 and I like it that way. | Who is Dan Well? Everyone always says I know Dan Well.Building a web page is like building a birdhouse. Put it up there and watch 'em come. | Maintaining the aspect ratio of an image is more important than having a cold orange pop.

  • #2
    Regular Coder
    Join Date
    Dec 2011
    Location
    NW England
    Posts
    194
    Thanks
    8
    Thanked 15 Times in 15 Posts
    try setting margin and padding to 0 for that div

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,835 Times in 1,819 Posts
    Hello Kevin_M_Schafer,
    If you add float: left; to your #sdbr-bracket you will see how your market might need re-arranged.

    It would proably be easiest to put those right floated elements into a single containing element that you can margin over like a 2-column layout.

    I've done it here in this example without the right column div. If you put the new CSS in the same location I've quoted here, it will overwrite your original styling.

    You will still need to re-arrange the markup then. Floats come first -
    Code:
    .editione-text {
         font-family:verdana;
         font-weight:bold;
         font-size:12px;
         color:#1155cc;
         margin:4px 0px 0px 20px;
         display:block;
         text-align:center;
         float:left; }
         
    .editione-text:visited {color: #1155c;}
    .editione-text:hover {color:#ff0000; text-decoration: none; }
    .editione-text:active {text-decoration: none; }                    /* end subscription info */
         
    #searchparameter,
    #vid-container,
    #fb-like-box,
    #logoeedition-bracket,
    #eedition-bracket,
    #subscription-bracket
    {
    clear: none;
    float: none;
    margin: 0 0 0 540px;
    }
    #sdbr-bracket {
         width:120px;
         height:300px;
    float: left;
         border: 1px solid #bdbdbd;
         padding: 4px 0px 0px 4px;
         margin-top:6px; }
         
    #sdbr-bracket:hover {
         border: 1px solid #4d90fe;
         background-color:#f1f5fb; }
         
    #content-bracket {
         width:380px;
         height:300px;
         margin: 6px 0px 0px 6px;
         padding: 4px 0px 0px 4px;
         border: 1px solid #cacaca;
         float:left; }
         
    #content-bracket:hover {
         border: 1px solid #4d90fe;
         background-color:#f1f5fb; }
    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:

    Kevin_M_Schafer (01-27-2012)

  • #4
    Regular Coder Kevin_M_Schafer's Avatar
    Join Date
    Apr 2011
    Location
    Fairfax, Minnesota, U.S.A.
    Posts
    482
    Thanks
    97
    Thanked 17 Times in 17 Posts
    Hi Excavator,

    Thanks! I'll go ahead and do this right now. I'll report back. Thank you for taking the time.

    --Kevin

    .
    My keyboard is an IBM from 1993 and I like it that way. | Who is Dan Well? Everyone always says I know Dan Well.Building a web page is like building a birdhouse. Put it up there and watch 'em come. | Maintaining the aspect ratio of an image is more important than having a cold orange pop.

  • #5
    Regular Coder Kevin_M_Schafer's Avatar
    Join Date
    Apr 2011
    Location
    Fairfax, Minnesota, U.S.A.
    Posts
    482
    Thanks
    97
    Thanked 17 Times in 17 Posts
    I put a wrap around the right content and floated it right. It worked without changing the markup or using a margin setting.

    Thanks for your help!

    I think if I were to switch my markup and progressively fill both the left and right sides of the page as I move downward, I wouldn't need the wrap on the right side. Like you said, floats come first.

    I'll be working on this.

    Thanks for the solution, Excavator. Also, I think you have a new title under your name. Is this right? If so, Congratulations. You've earned it.

    --Kevin

    .
    My keyboard is an IBM from 1993 and I like it that way. | Who is Dan Well? Everyone always says I know Dan Well.Building a web page is like building a birdhouse. Put it up there and watch 'em come. | Maintaining the aspect ratio of an image is more important than having a cold orange pop.


  •  

    Posting Permissions

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