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 7 of 7

Thread: Float Issue

  1. #1
    New Coder
    Join Date
    Dec 2007
    Posts
    78
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Float Issue

    Bullant you out there?

    I "think" I'm having a float issue. I have to put a negative top margin on the bigger right content box of -250px. Shouldn't it just float to the right and line itself up at the top like the smaller box on its left is?

    Or did I do it right after all?

    This time you won't need your crystal ball (jk). Here's the url...

    http://www.americanwebmakers.com/demo_college

    Thanks in advance!
    Trust everybody. Just don't trust the Devil inside of them.

  • #2
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    It looks like you have a 2 column layout with a header above the 2 side by side columns. Imo you shouldn't need to have -ve margins.

    Maybe use this demo skeleton 2 column layout with header and footer as a guide. (I just posted it in a similar thread)
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <style type="text/css">
                #wrapper {
                    width: 900px;
                    margin: 0px auto 0px auto;
                    border: 1px solid red;
                    height: auto;
                }
                #header {
                    border: 1px solid blue;
                }
                #content {
                    width: 70%;
                    float: left;
                }
                #content .gutter {
                    margin: 0px 0px 0px 0px;
                    padding: 20px 20px 20px 20px;
                }
                #sidebar {
                    width: 30%;
                    float: right;
                }
                #sidebar .gutter {
                    margin: 0px 0px 0px 0px;
                    padding: 20px 20px 20px 20px;
                    border: 1px solid green;
                }
                #footer {
                    clear: both;
                    border: 1px solid black;
                }
            </style>
            <script type="text/javascript"></script>
        </head>
        <body>
            <div id="wrapper">
                <div id="header">
                    <h1>HEADER and NAVIGATION BAR</h1>
                </div>
                <div id="content">
                    <div class="gutter"> <!-- to set constant gutter around the content  -->
                        <h1>LEFT MAIN CONTENT COLUMN</h1>
                    </div>
                </div>
                <div id="sidebar">
                    <div class="gutter"> <!-- to set constant gutter around the content  -->
                        <h1>RIGHT SIDE BAR COLUMN</h1>
                    </div>
                </div>
                <div id="footer">
                    <h1>FOOTER BAR</h1>
                </div>
            </div>
        </body>
    </html>
    To reverse the order of the main content and sidebar columns just reverse their float values.

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You did it wrong. I'm guess you have no idea what clear:both does. Remove it from the left top nav, your content would then slide up without the negative top margin. Also you need to close your header element before your wrapper.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #4
    New Coder
    Join Date
    Dec 2007
    Posts
    78
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I did as you suggested, but it's still to far down.

    Hmmmm?
    Trust everybody. Just don't trust the Devil inside of them.

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You didn't close your header properly. Check again. You also have clear:both; on your #main stuff. Remove it from there too.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #6
    New Coder
    Join Date
    Dec 2007
    Posts
    78
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Worked like a charm! Thank you.

    One more thing now...

    On the left top nav, my button images are not links as they should be. What could be causing that?

    Yep. If it aint one thing...it's another eh?

    Thank you for your help. I do appreciate it.
    Trust everybody. Just don't trust the Devil inside of them.

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    They work as links just fine for me.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

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