HTML How to markup 4 panels in a row for content.

Question

I'm abysmal at HTML so looking for some help in recreating the following. I could do it with a table, but understand that that is a no-no nowadays. So advice is needed.

What I am wanting to achieve is four fixed size boxes then spread across the page on a single row. These boxes will have some information in them, possibly text, possibly images and possibly both.

The boxes will be static size, ie I don't want them resizing to fit the width of the browser window. I'm guessing it probably going to be done with the div tag but I don't have the first clue where to start.

Answer 1

You can use four fixed-width/height divs which are all set on float:left;.

<div class="box">Some content</div>
<div class="box">More content</div>
<div class="box">Maybe an image</div>
<div class="box">Some content and an image</div>

with this css:

.box {
    width: 200px;
    float: left;
}

Answer 2

Well, it's not so tricky:

<div class="panelwrapper">
  <div>Content</div>
  <div>Content</div>
  <div>Content</div>
  <div>Content</div>
</div>

That's really all the HTML you should need.

Answer 3

You want something like this (not tested)

<div id="wrapper">

  <div id="box1" class="box">
    <!-- your content here -->
  </div>

  <div id="box2" class="box">
    <!-- your content here -->
  </div>

  <div id="box3" class="box">
    <!-- your content here -->
  </div>

  <div id="box4" class="box">
    <!-- your content here -->
  </div>

</div>

with the CSS

.box{
  width: 200px;
  margin-left: 20px;
  float: left;
}

#box1{
  margin-left: 0;
}

#wrapper{
  margin: 0 auto;  // Center on the page
  width: 860px;
}