Hi guys,

I'm just wondering whether if this kind of webpage is suitable for table or the css div layout? it's not simple data but a lot of images on the left and descriptions on the right as well as 2 columns by multiple rows.

http://www.h2ogeek.com/divegear/index2.html

my next question is, if it is css, would you be able to guide me with the coding for css on the layout? at least for the first few rows?

your feedback is much appreciated,

thank you very much.

Either.

A layout using CSS styled divs would certainly have much less code overhead than a table based layout would.

Personally I would use a div layout.

thanks for your opinion.

and would you mind to guide me on the code for like 2 columns and few rows? or do you know where can i get some links as examples? i'm just a beginner on CSS.

thanks

Off the top of my head;

.row {
	position:relative;
}
.p_image {
	width:40%;
	float:left;
}
.p_descript {
	clear:right;
	width:auto;
}

<div class="row">
<div class="p_image">Images</div>
<div class="p_descript">Description</div>
</div>
<div class="row">
<div class="p_image">Images</div>
<div class="p_descript">Description</div>
</div>
<div class="row">
<div class="p_image">Images</div>
<div class="p_descript">Description</div>
</div>
<div class="row">
<div class="p_image">Images</div>
<div class="p_descript">Description</div>
</div>

thanks a lot

really appreciate it

a small problem though, since the description is more than the images in terms of height, the description "wraps" around the images to the left. how can i prevent that?

oh, fyi, i did a div text-align:center the div row and text-align:left on both p_images and p_descript. i want to center the "table" but left align the contents. will these cause the "text wrap around"?

also, is it possible for me to "vertical align" the images for that row? do i just specify vertical-align: middle; in the .p_image ?

thanks in advance for your help

also, is it possible for me to "vertical align" the images for that row? do i just specify vertical-align: middle; in the .p_image

vertical-align doesn't work the way everybody thinks it should work
http://www.candsdesign.co.uk/referen...ertical-align/
It only applies to inline elements.

slight change to make the heights work ok;

.row {
	position:relative;
	clear:both;
	margin-bottom:5px;
	overflow:auto;
}
.p_image {
	width:40%;
	float:left;
}
.p_descript {
	float:right;
	width:55%;
}
.clearing {
	clear:both;
}

<div class="row">
<div class="p_image">Images</div>
<div class="p_descript">Description</div>
</div>
<div class="row">
<div class="p_image">Images</div>
<div class="p_descript">Description</div>
</div>
<div class="row">
<div class="p_image">Images</div>
<div class="p_descript">Description</div>
</div>
<div class="row">
<div class="p_image">Images</div>
<div class="p_descript">Description</div>
</div>

The text 'wrapping' is happening because the image is FLOATED to the left, the text is doing exactly what it's supposed to do under those conditions.

Originally Posted by chrishirst

.clearing {
    clear:both;
}

<div class="row">
<div class="p_image">Images</div>
<div class="p_descript">Description</div>
</div>
<div class="row">
<div class="p_image">Images</div>
<div class="p_descript">Description</div>
</div>
<div class="row">
<div class="p_image">Images</div>
<div class="p_descript">Description</div>
</div>
<div class="row">
<div class="p_image">Images</div>
<div class="p_descript">Description</div>
</div>

thanks for the code, where do i use the class "clearing"? do i just declare it in css?

thanks for the explanation, LadynRed

It would be used after you have floated an element and what you want to wrap around it has. LNR has actually gotten me in the habit of using a <br /> with class brclear, with the following rules:

.brclear{clear:both; margin:0; padding:0; line-height:0;}

tim

spam in the forum??

hi serandfae,

don't quite get you :P i'm still a novice :P

i thought once you close the /div, it will be cleared, no?

I've got out of the "clearing" div habit (almost). Adding overflow: auto; to the container will clear the floats as well

LnR also posted a sticky on that subject in this forum:

http://www.webmaster-talk.com/css-fo...you-clear.html

But if you choose the clearing div or br path, realize that whatever element you want to float is first in your HTML. (That is, make sure it's in the HTML before what you float around it.) Then after the elements that float around it have done so, put in the clearing element before you put in anything else.

tim

thanks for the userful code. It helps me a lot

i have another question :P

the output for this code is

--------------------------------
content left | content right
content left | content right
&nbsp;&nbsp;| content right
--------------------------------
content left | content right
content left | content right
content left |
--------------------------------

how can i specify a vertical border to divide left content and right content? similar to a table.

as u can see, sometimes my right content is more, sometimes, the left is more. when floating left and right, they don't "meet" with each other, when i float left for both and specify the border, i'll end up with 2 visible borders. if i specify just 1 border, either left or right div, and since the heights are different, for some rows, it will end up with short vertical border.

appreciate if you can provide further guidance, thanks.