Home/ Questions/Q 6802251
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T19:12:02+00:00

I’m having problems with my page’s layout. I’m trying to do a header, 3-column,

  • 0

I’m having problems with my page’s layout. I’m trying to do a header, 3-column, footer layout, all centered. Here is my code:

css:

#pgCenter
{
    text-align:center;
    margin: 20px;
}

#container
{
    text-align:left;
    width: 850px;
    margin: 0 auto;
}

#container #header
{
    width:100%;
    text-align:center;
}

#container #col1
{
    width: 250px;
    float: left;
}

#container #col2outer
{
    width: 600px;
    float:right;
}

#col2outer #col2mid
{
    width: 300px;
    float: left;
}

#col2outer #col2side
{
    width: 300px;
    float: right;
}

#container #footer
{
    text-align:center;
    width: 100%;
}

html:

<body>
  <div id="pgCenter">
  <form id="form1" runat="server">
    <div id="container">
      <div id="header">
        here is my header
      </div>
      <div id="col1">
        This is where the login control goes. For testing purposes, I'll just throw some text in here.
      </div>
      <div id="col2outer">
        <div id="col2mid">
          <p>INSIDE DIV ID:col2mid - And here is some more placehold text so that I can see how this div is laying out!
            I should also write some more text here because I still don't see anything going on :(</p>
        </div>
        <div id="col2side">
          <p>INSIDE DIV ID:col2side - What else do you want me to put? I can't even think of anything right now except
            eating some bomb delicious wingstop. I can't wait to get my paws on those saucy spicy cajun flavored mudda fuggas!</p>
        </div>
      </div>
      <div id="footer">
        <p>(footer) Copyright © 2011</p>
      </div>
    </div>
  </form>
  </div>
</body>

The problem I’m having is that the header and footer content want to show up above and below either the first or outer (col2outer) columns, based on the size of its content, instead of all the columns in a neatly stacked fashion. This col2outer div also appears 1 <br/> lower than the first column.

I’ve looked at several posts here and elsewhere and can’t find the right help. I’m not very good at css and would love any advice and tips I can get on best practice, what I’m doing wrong, etc. Thank you very much.

PS – please excuse my placeholding text hehe.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    To solve the first problem, you just need to add clear: both to #container #footer, to clear the floats above it.

    The #container #col2outer problem is because the p elements inside have some margin set by default.

    Also, you should drop the extraneous #container from the start of all of the selectors.

    With all of those changes: http://jsfiddle.net/thirtydot/z4U3d/

    • 0