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

Thread: Centering CSS

  1. #1
    Junior Member
    Join Date
    Apr 2013
    Posts
    3
    Member #
    36161
    I need a little help. I am posting two pics along with this post. One of the site layout that I currently have and the second with my coding. What Im wanting to do is have my left and right sidebars beside my content area and for my content to be in the middle above my footer. Can someone give mean idea of what im doing wrong? thanks!

    http://i.imgur.com/RzOT025.png

    http://i.imgur.com/wNRh8DN.png

  2.  

  3. #2
    Senior Member Andrew Yurlov's Avatar
    Join Date
    Apr 2011
    Location
    Portland, OR
    Posts
    1,306
    Member #
    27566
    Liked
    181 times
    I cant do anything without the code.
    Please add your html and css code in the CODE tags of this forum.
    Artificial intelligence is nothing compared to natural stupidity -Someone

    Design is a funny word. Some people think design means how it looks.
    But of course, if you dig deeper, itís really how it works.
    -Steve Jobs



  4. #3
    Junior Member
    Join Date
    Apr 2013
    Posts
    3
    Member #
    36161
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
     
    <html>
       
        <head>
            <title>reTRAVELview</title>
            <link href="style.css" rel="stylesheet" type="text/css" />
            <meta http-equiv="Content-Style-Type" content="text/css" />
        </head>
     
        <body>
           
            <div id="page-container">
           
                <div id="header">
                    Header
                </div>
               
                <div id="mainnav">
                    Main Nav
                </div>
               
                <div id="content">
                    Content
                </div>
               
                <div id="sidebar-left">
                    Sidebar Left
                </div>
               
                <div id="sidebar-right">
                    Sidebar Right
                </div>
               
                <div id="footer">
                    Footer
                </div>
               
            </div>
           
        </body>
    </html>
     
     
    #page-container {
        width: 760px;
        margin: auto;
        padding: 0px;
       
    }
     
    #header {
        background: green;
       
    }
     
    #mainnav {
        background: yellow;
    }
    #sidebar-left {
        background: orange;
        width: 180px;
    }
     
    #content{
        background: red;
    }
     
    #sidebar-right{
        background: darkgreen;
        width: 180px;
        float: right;
    }
     
    #footer{
        background: blue;
    }

  5. #4
    Senior Member RDesignista's Avatar
    Join Date
    Feb 2012
    Location
    Coconut Tree City
    Posts
    822
    Member #
    30921
    Liked
    123 times
    Just float L sidebar, main, and R sidebar to the left. You must float all elements because <div> is naturally display:block and will force all elements to the next line, even if the <div> width is narrow.

    When you write your HTML, you must also write the divs in this order: L sidebar, main, R sidebar. Make sure that the container is big enough to fit all 3 divs, otherwise one of the divs will be forced under the others.

  6. #5
    Junior Member
    Join Date
    May 2013
    Posts
    11
    Member #
    36185
    #contnet {float: left;} #sidebar-left {float: left} #side-bar right: { float: left}

    make sure you specify widths of all 3 that's with in 760px(#page-container). Also don't forget to clear: left inside of #page-container.


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