Coming from Android XML layouts, how to place web page elements in XHTML?

Question

I'm primarily an Android developer, but I'm very interested in creating web pages in XHTML using CSS for styling those pages. I'd like to make a simple web page layout comprised of three rows with the middle row having three columns. In Android XML I'd accomplish that like so (roughly):

<LinearLayout orientation:vertical> (parent)
----<LinearLayout orientation: horizontal>
----<LinearLayout orientation: horizontal>
--------<LinearLayout orientation: vertical>
--------<LinearLayout orientation: vertical>
--------<LinearLayout orientation: vertical>
----<LinearLayout orientation: horizontal>

That'd create a layout that looks something like this:

-----------------------------------------------
|                                             |
-----------------------------------------------
|             |                   |           |
-----------------------------------------------
|                                             |
-----------------------------------------------

I'm still a bit new to XHTML and CSS (though I have the fundamentals down) and while I'm a pretty quick learner, I haven't found any tutorials on layout designs for web pages aimed at an Android developer. If anyone could please explain a good way to achieve the layout I'm going for, I'd greatly appreciate it.

TLDR: How do I make a web site layout consisting of three rows, with the middle row having three columns, using XHTML and/or CSS?

Thank you very much!

Answer 1

This is probably something you should learn through tutorials, but here's an approximation of what you asked for. http://jsfiddle.net/7LYhu/

HTML

<div class="row"> Row
</div>

<div class="row">
  <div class="col">
  Column
    </div>
  <div class="col">
      Column
  </div>
  <div class="col">
      Column
  </div>
</div>

<div class="row">
    Row
</div>​

CSS

.row {
      width: 80%;
      background: gray;
      text-align: center;
    }
.col {
      width: 33.3%;
      float: left;
      background: orange;
}​