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

Thread: Resize problem

  1. #1
    Junior Member Barkin's Avatar
    Join Date
    Dec 2011
    Posts
    24
    Member #
    30192
    I am new to coding in css. I made this simple three coulum page Following a tutorial http://imgur.com/83Jjl. I want to re-size the columns to make them larger, but when I do the boxes get scattered about randomly http://imgur.com/DHuL8

    I thought If i re-sized the container as well it would fix the problem however it still was uneven

    HTML Code:
     <head>
    <title>page title</title>
    <style type="text/css">
    html, body {
    margin: 0px;
    padding: 0px;
    border: 0px;
    }
    #container {
    width: 870px;
    margin: 0 0 0 20px;
    padding: 0;
    background-color: #fff;
    text-align: center;
    }
    #container h1 {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 150px;
    float: left;
    border-bottom: #c00 solid 3px;
    }
    #container #col1 {
    width: 250px;
    float: left;
    background-color: black;
    color: white;
    }
    #container #col2out {
    width: 610px;
    float: right;
    margin: 0;
    padding: 0;
    }
    #col2out #col2mid {
    background-color: yellow;
    width: 300px;
    float: left;
    }
    #col2out #col2side {
    width: 300px;
    float: right;
    background-color: green;
    }
    #container #footer {
    float: left;
    width: 870px;
    border-top: #c00 solid 3px;
    }
    </style>
    </head>
    
    <body>
    <div id="container";>
    <h1>Header</h1>
    <div id="col1">
    <p>Number one.</p>
    </div>
    <div id="col2out";>
    <div id="col2mid";>
    <p>Number Two.</p>
    </div>
    <div id="col2side";>
    <p>Number Three</p>
    </div>
    </div>
    <div id="footer">
    <p>Footer </p>
    </div>
    </div>
    
    </body>
    </html>
    any ideas?

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    What's the deal with the semi-colons in your HTML?
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    RNB
    RNB is offline
    Junior Member
    Join Date
    Jun 2012
    Posts
    13
    Member #
    32125
    Liked
    5 times
    Your code is kind of confusing to me. It seems very convoluted for just achieving three columns. All you really need to do is create a div on the outside of the three boxes -- call it something like #containerbox -- and define the width. Thereafter, you just need to apply a float left to the first column, a float left to the second column, and possibly a float right to the third. Make sure your #containerbox can compensate for the size of the individual columns. Take a look at my code; it's a multi-colum layout.

  5. #4
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Quote Originally Posted by RNB, post: 238671
    Your code is kind of confusing to me. It seems very convoluted for just achieving three columns.
    It's a hack layout for columns that are all the same length.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."


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