Home/ Questions/Q 6213957
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T06:47:29+00:00

Good morning, I am attempting to create a centered 3 column layout (h1, h2,

  • 0

Good morning,

I am attempting to create a centered 3 column layout (h1, h2, h3) inside of a centered container div which has a width of 90%.

h1 and h3 are a fixed width b/c of the width of my background image and h2 should be 100% of the remainder of the space. I’m able to make this work using specified widths but I would like to avoid that in case a user would like to view the page < 800px.

the css:



    #home-container {
      background-image:url('/images/bg.png');
      background-repeat: repeat-x;
      text-align: center;
      margin-left: auto;
      margin-right: auto;
      width: 800px;
    }

    #h1 {
      background-image:url('/images/navbar_left.png');
      background-repeat: no-repeat;
      width: 27px;
    }

    #h2 {
      background-image:url('/images/navspacer.png');
      background-position: center top;
      background-repeat: repeat-x;
      width:746px;
    }

    #h3 {
      background-image:url('/images/navbar_right.png');
      background-position: right top;
      background-repeat: no-repeat;
      width: 27px;
    }

    #h1, #h2, #h3 {
      float:left;
    }

the html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>3col test</title>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
    <link rel="stylesheet" type="text/css" href="/stylesheets/main.css" media="all" />
  </head>
  <body>
      <div id="home-container">
        <div id="h1">1</div>
        <div id="h2">2</div>
        <div id="h3">3</div>
      </div>
  </body>
</html>

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    There may be easier answers, but here is one way of doing it:

    Working solution: http://jsfiddle.net/W8Bwe/1/

    Basically, embed h1 and h3 inside h2, floated left and right respectively.

    Then just set the margins on h2, to account for space taken up by h1 and h3.

    • 0