transform this basic structure to a 'table' like layout

[AffiliateDreamer]

I have the following HTML on my page which I want to be able to transform into either a list that goes vertically or horizontally.

What would my CSS look like in the 2 scenerios? In old-school HTML I would simply create a table with 1 row for horizontal, and many rows for vertical layout.

<div class="outer">

<div class="inner">

<h1>Title</h1>
<img src="">
<li>hello, world!</li>
</div>

<h1>Title2</h1>
<img src="">
<li>Smile!</li>
</div>

</div>

[ronin]

You are mixing up a lot of things here. You can't really have more than one main heading on a document - the main heading (<h1>) is the main heading - it makes no sense to have two of them.

If you want to produce lists where items have titles, you might consider using a definition list... or you can try something like this:

<ul>
<li><h2>Title1</h2><img src="image1.png" alt="Image 1" /><br />Hello World!</li>
<li><h2>Title2</h2><img src="image2.png" alt="Image 2" /><br />Smile!</li>
</ul>

Without any styling this will produce a vertical column.

If you want to turn the list into a horizontal row you can either give the list items a height and display them as inline elements:

li {display:inline; height:4em;}

or you could give them a width and float them in a line:

li {float:left; width:8em;}

[Xapti]

Perhaps I'm wrong, but wouldn't there be virtually no difference between inline styled list, and inline floated list? The only slight difference that I see is if you have one display:block, instead of inline, in which case spaces in list items will always be non-breaking.

[SuzyUK]

I might be tempted to use float for both cases - you can't assign a height to an inline element so ronin's first choice wouldn't work.. however by controlling the width of the <ul> you can have it display horizontal or vertical with the virtually same code if you use floats.

e.g.

HTML:
<div class="outer">
<ul>
<li><h3>Title-1</h3><img src="">hello, world!</li>
<li><h3>Title-2</h3><img src="">Smile!</li>
<li><h3>Title-3</h3><img src="">hello, world!</li>
<li><h3>Title-4</h3><img src="">Smile!</li>
<li><h3>Title-5</h3><img src="">hello, world!</li>
</ul>
</div>

CSS:
.outer {
background: #ffc;
border: 1px solid #000;
padding: 5px;
overflow: auto; zoom: 1;
}

.outer ul {
list-style: none;
margin: 0;
padding: 0;
background: #fff;
border: 1px solid #008;
overflow: auto; zoom: 1;
/* width: 182px; /* uncomment to make list vertical */
}

.outer ul li {
float: left;
width: 180px;
border: 1px solid #f00;
}

.outer ul li img {
display: block;
margin: 10px 0;
}

the overflows/zooms are to contain the floated li elements, this code defaults to horizontal, but if you uncomment the line which has the width for the ul, it constrains the width to only contain one li per line making it go vertical..

I didn't use the br before the image, I made it display block instead, so margins could be used for spacing, but it can be done either way or indeed a combination of both.

Suzy