How Can I Create This

[ryy705]

Hello,

Please take a look at the attached image. How can I create this without using a table?

I tried dl and ol. But I can't get the elements to sit next to each other. Please advise.

[colweb]

I would do something like this. Inside a container div with a fixed height, you place floating divs with the images and description. Because the divs are floating the will go left to right. The containers will go top to bottom.
And instead of embedding the style this way (but I only do it do demonstrate the principle), you could make the container(s) and floating divs a class and style them from css.

<div style="height:300px"> <!-- the container -->
   <div style="float:left;"><img src="image1"><br>description 1</div>
   <div style="float:left;"><img src="image2"><br>description 2</div>
   <div style="float:left;"><img src="image3"><br>description 3</div>
   <div style="float:left;"><img src="image4"><br>description 4</div>
</div> <!-- end containter -->
<div style="height:300px"> <!-- the container -->
   <div style="float:left;"><img src="image5"><br>description 5</div>
   <div style="float:left;"><img src="image6"><br>description 6</div>
   <div style="float:left;"><img src="image7"><br>description 7</div>
   <div style="float:left;"><img src="image8"><br>description 8</div>
</div> <!-- end containter -->

[ryy705]

I would do something like this. Inside a container div with a fixed height, you place floating divs with the images and description. Because the divs are floating the will go left to right. The containers will go top to bottom.
And instead of embedding the style this way (but I only do it do demonstrate the principle), you could make the container(s) and floating divs a class and style them from css.

<div style="height:300px"> <!-- the container -->
   <div style="float:left;"><img src="image1"><br>description 1</div>
   <div style="float:left;"><img src="image2"><br>description 2</div>
   <div style="float:left;"><img src="image3"><br>description 3</div>
   <div style="float:left;"><img src="image4"><br>description 4</div>
</div> <!-- end containter -->
<div style="height:300px"> <!-- the container -->
   <div style="float:left;"><img src="image5"><br>description 5</div>
   <div style="float:left;"><img src="image6"><br>description 6</div>
   <div style="float:left;"><img src="image7"><br>description 7</div>
   <div style="float:left;"><img src="image8"><br>description 8</div>
</div> <!-- end containter -->

Thank you I'll try it.

[almostbob]

<!-- style out in the external stylesheet usually -->

.con {height:300px;width100%;}
.in {width:25%;height:100%;float:left;

<div class='con'>
<div class='in'><img src="image1"><br>description 1</div>
<div class='in'><img src="image2"><br>description 2</div>
<div class='in'><img src="image3"><br>description 3</div>
<div class='in'><img src="image4"><br>description 4</div>
</div>
<div class='con'>
<div class='in'><img src="image5"><br>description 5</div>
<div class='in'><img src="image6"><br>description 6</div>
<div class='in'><img src="image7"><br>description 7</div>
<div class='in'><img src="image8"><br>description 8</div>
</div>

[colweb]

<!-- style out in the external stylesheet usually -->

.con {height:300px;width100%;}
.in {width:25%;height:100%;float:left;

<div class='con'>
<div class='in'><img src="image1"><br>description 1</div>
<div class='in'><img src="image2"><br>description 2</div>
<div class='in'><img src="image3"><br>description 3</div>
<div class='in'><img src="image4"><br>description 4</div>
</div>
<div class='con'>
<div class='in'><img src="image5"><br>description 5</div>
<div class='in'><img src="image6"><br>description 6</div>
<div class='in'><img src="image7"><br>description 7</div>
<div class='in'><img src="image8"><br>description 8</div>
</div>

If you can read, I did write

And instead of embedding the style this way (but I only do it do demonstrate the principle), you could make the container(s) and floating divs a class and style them from css.

[almostbob]

My apologies, I did not read,
nor can I see anything that says
"look at what the ** did, this is a personal attack"
you could have accepted that someone else thinks the same way you do
or you could
traho vestri caput capitis ex vestri rectum

[tanoru]

Using that many <div> tags is a very amateur way of coding something like that. I would use <ul>, something like this :

<ul id="whatever">
<li>stuff here</li>
<li>stuff here</li>
<li>stuff here</li>
<li>stuff here</li>
<li>stuff here</li>
<li>stuff here</li>
<li>stuff here</li>
<li>stuff here</li> (x8 times)
</ul>

...and for the styling something like :

#whatever li {
float:left;
width:25%; (or a quarter of the total width)
}

=D

[colweb]

Using that many <div> tags is a very amateur way of coding something like that.

:icon_biggrin:Then most of the web is must be written by amateurs :icon_cheesygrin: Or maybe its only the sites I visited.:icon_biggrin:

Personally I find divs easier to work with and ryy705 had tried to use <dl> and <ol> but couldn't make that work. So the first thing that came to my mind "do it with divs". But must agree that your method works perfectly also.

[almostbob]

this thread parallels web design,,
wants
works
works better, solved

[tanoru]

:icon_biggrin:Then most of the web is must be written by amateurs :icon_cheesygrin: Or maybe its only the sites I visited.:icon_biggrin:.

Yes it is :p

Theres no harm in using so many <div> tags, it's just not optimised (i have a sad obsession with optimisation)

[tanoru]

this thread parallels web design,,
wants
works
works better, solved

Lol definitely.