CSS Formatting Columns

Question

I am trying to organize my page into 3 columns. So far, I have the columns existing, however one of the columns is getting wrapped under the other two.

I utilize a picture, at width=300 and height=300 and a simple heading in each column.

Here is my CSS:

<style type="text/css">
        /*4 + 335*3 = 1009px*/
        #wrapper {
                border: 2px solid black;
                width: 1009px;
                margin-left: auto;
                margin-right: auto;
        }
        #header {
                text-align: center;
        }
        /* 325px content + 10px = 335px physical width per column */
        .column {
                float: left;
                width: 325px;
                margin: 5px;
                text-align: center;
                min-height: 250px;
        }

        #middle {
                border-left: 2px solid black;
                border-right: 2px solid black;
                margin-left: 0;
                margin-right: 0;
                padding-left: 10px;
                padding-right: 10px;
        }

Something must be wrong with my math in the wrapper width I am guessing, but I cannot spot the error. Let me know your thoughts.

HTML:

<div id="wrapper">
  <div id="left" class="column">
    <h2>Tic Tac Toe</h2>
    <a href="tictactoe.php">
      <img src="images/tictactoe.png" alt="Tic-Tac-Toe"
        width="300" height="300"/>
    </a>
  </div>
  <div id="middle" class="column">
    <h2>Puzzle</h2>
    <a href="puzzle.php">
      <img src="images/puzzle.png" alt="Puzzle" 
        width="300" height="300"/>
    </a>
  </div>
  <div id="right" class="column">
    <h2>Rock Paper Scissors</h2>
    <a href="rockpaperscissors.php">
      <img src="images/rock_paper_scissors" alt="Rock Paper Scissors" 
        width="300" height="300"/>
    </a>
  </div>
</div>

Is it intentional that you didn't close this first comment? /*4 + 335*3 = 1009px — Frank van Puffelen
– Frank van Puffelen, Commented Dec 4, 2012 at 2:15
OK. So it isn't the unclosed comment that is breaking your layout. You might want to update it in the question for good measure. :-) — Frank van Puffelen
– Frank van Puffelen, Commented Dec 4, 2012 at 2:17

Josh Lowry · Accepted Answer · 2012-12-04 02:22:44Z

2

Your wrapper is not wide enough to fit the three squares. Change the width in the #wrapper class to 1019px, as per this fiddle

answered Dec 4, 2012 at 2:22

Josh Lowry

4473 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

robert Over a year ago

like josh said... Cuz you have border width in your columns which actually add to their final width... so a column with width: 325px; and 2px border on each side is actually 329px wide (not counting the margins)

Josh Lowry Over a year ago

He's adding the 4px for the border on the middle div (first comment in his code). I don't think the 10px padding on the middle div has been accounted for in the math.

Victor Over a year ago

@JoshLowry, should padding be actually accounted?

Josh Lowry Over a year ago

Yup, padding adds to the height/width of the element in the W3C box model.

Victor · Accepted Answer · 2012-12-04 02:26:10Z

2

Change this:

#wrapper {
  border: 2px solid black;
  width: 1019px;
  margin-left: auto;
  margin-right: auto;
}

I personally don't like to do layout manually anymore. Please consider using 960.gs, or better still, Twitter Bootstrap.

answered Dec 4, 2012 at 2:26

Victor

13.5k19 gold badges90 silver badges150 bronze badges

2 Comments

Vladimir Starkov Over a year ago

960gs and bootstrap quite different from each other. First one is only grid system, another one is full css framework (including grid)

Victor Over a year ago

@VladimirStarkov, that's right. If it's just layout needed, then 960.gs will do.

Collectives™ on Stack Overflow

CSS Formatting Columns

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related