Home/ Questions/Q 6866677
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T03:12:55+00:00

I want to make two columns page with box one (box1) and box two(box2).

  • 0

I want to make two columns page with box one (box1) and box two(box2). Then just after h2, I want to make two columns inside box2 with box2.1 and box2.2.

Here is my HTML code

<body>
  <div id="box1">
  <h1>Here is the box one.</h2>
  </div>

  <div id="box2">
  <h2>Here is the box two.</h2>

      <div id="box21">
      <p>Here is the box2.1</p>
      </div>

      <div id="box22">
      <p>Here is box 2.2</p>
      </div>
  </div>
</body>

And here is my CSS part.

#contentLeft{
float:left;
width:300px;

After that, I have no idea what to do. Tried number of ways, it didn’t work. Could you please help here?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It may help you:

    HTML:

    <div id="box1">
  <h1>Here is the box one.</h2>
  </div>
  <div id="box2">
  <h2>Here is the box two.</h2>
      <div id="box21">
      <p>Here is the box2.1</p>
      </div>
      <div id="box22">
      <p>Here is box 2.2</p>
      </div>
  </div>

    CSS:

    #box1{
    float:left;
    widht:50%;
    background:#FF0000;
}
#box2{
    float:left;
    width:50%;
    background:#00FF00;
}
#box21{
    float:left;
    width:50%;
    background:#0000FF;
}
#box22{
    float:left;
    width:50%;
    background:#e4e4e4;
}

    Just for your reminder, don’t use dot(.) in id or class name. You can also simplified the CSS by using the same class name in all div.

    .box{
    float:left;
    width:50%;
}

    OR the following code:

    #box1, #box2, #box21, #box22{
    float:left;
    width:50%;
}

    See the example : http://jsfiddle.net/N4hMw/2/

    • 0