www.webdeveloper.com
Results 1 to 5 of 5

Thread: Column Troubles

  1. #1
    Join Date
    Aug 2012
    Posts
    2

    Column Troubles

    Hello,
    I am building a site with columns and I cannot get them to work right. Here is my html document:

    <html>
    <head>
    <link href="style.css" rel="stylesheet" type="text/css">
    </head>

    <body>

    <div id="bodycontent">
    <div id="column1">
    <p class="columnhead1">Column 1</p>
    <p class="columnhead2">Column 2</p>
    <p class="columnhead3">Column 3</p>
    </div>

    </body>

    -------------------------------------------------------------
    Here is my style sheet:


    body {
    background-color: #99BADD;
    }

    #bodycontent {
    margin: 10%;
    background-color: white;
    }

    #bodycontent {
    padding-top: 3%;
    padding-right: 4%;
    padding-left: 4%;
    font-size: 100%;
    }

    #bodycontent {
    background-color: white;
    border: 2px solid white;
    border-radius: 10px;
    margin-top: 2%;
    margin-bottom: 0;
    }

    .columnhead1 {
    width: 32%;
    margin-right: 2%;
    border-bottom: 2px solid black;
    float: left;
    }

    .columnhead2 {
    width: 32%;
    margin-right: 2%;
    border-bottom: 2px solid black;
    float: left;
    }

    .columnhead3 {
    width: 32%;
    border-bottom: 2px solid black;
    }
    --------------------------------------------------------------------
    When I add "float: left" to ".columnhead3", It puts all of the columns on the same line but moves them out of the white area. I need to know how to keep the columns on the same line, while keeping them in the white area.

    Thanks in Advance,

    Alex

  2. #2
    Join Date
    Mar 2011
    Posts
    1,160
    Your CSS settings for your columns exceed 100&#37;. The document space occupied by an element is the sum of the width, the margin, and the border - both horizontally and vertically. So you currently have 3 * (32% + 2% + 2px) which is 102% + 6px. Reduce the width settings to 29% or so.

  3. #3
    Join Date
    Aug 2012
    Posts
    2

    Still Not Fixed

    I changed the width of each column to 29% and it didn't fix the problem. Thanks for the help anyways. Also, it may not be working because I might have another error.

    Thank You,
    Alex

  4. #4
    Join Date
    Aug 2012
    Posts
    4
    I think you've got whole structure bit wrong. Look:


    Code:
    <div class="container">
       <div class="column">
         <p class="header"> header 1 </p>
       </div>
    
    <div class="column">
         <p class="header"> header 2 </p>
       </div>
    
    <div class="column">
         <p class="header"> header 3 </p>
       </div>
    <div class="clear"></div>
    
    </div>
    So .. in css you have to have:

    .container {width: ...whatever you want }
    .column {float: left; width: 33%; }
    .clear { clear: both; }


    I'm not 1000% sure about 33% - experiment a bit.



    Templates

  5. #5
    Join Date
    Aug 2012
    Location
    Tucson
    Posts
    45
    Could you please provide the page URL? It is so much easier to evaluate the problem that way.

    JP

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles