an inspiring design but in CSS?

[JamieJelly]

Hi,
I came across a really neatly designed site http://www.blueidea.com/download/product/2003/627.asp and I really like the layout of information in the site (although being in another language means nothing to me).

I was interested in playing around with laying out some sample designs in a similar structure to this but how could such a complicated design be achieved using CSS?

It is does not appear a straight forward two column design because of the horizontal bars that span the entire width of the container.

Any ideas?

[Johan Dahlström]

If you're familliar with some more "advanced" CSS, this would'nt be much of a problem. But it's sure gonna need some heavy adjustments since the current page is table based. I can't give you any direct tips or solutions since it's quite an advanced layout that needs some time to understand. But try nesting elements and take advantage of the divs 100% spanning along with the floating property.

Play around and see what happens, I'm sure you'll work it out .

[c1vineoflife]

I myself am still learning layouts with css. But, I imagine this would be much easier to make with css than it would be with tables (also easier to maintain and read).

[vgarcia]

That's a pretty easy one to do with CSS. For something slightly similar, you might want to take a look at http://sken.be/ (use your own code/images though).

[JamieJelly]

thanks Vinnie, I was getting in to a right pickle on this one. Do you think you could explain the purpose of the inner div and the <br class=clear /> for me please?

[vgarcia]

thanks Vinnie, I was getting in to a right pickle on this one. Do you think you could explain the purpose of the inner div and the <br class=clear /> for me please?

The <br class="clear" /> allows for anything under content that is floated into place to fall underneath it.

[c1vineoflife]

The <br class="clear" /> allows for anything under content that is floated into place to fall underneath it.

Is it an already defined class? Or do we need to specify something using css?

.clear {
        something: something;
}

[JamieJelly]

the style sheet has the following entry:

.clear {
clear: both;
}

thanks Vinnie

[c1vineoflife]

the style sheet has the following entry:

.clear {
clear: both;
}

thanks Vinnie

Thanks! I should have seen that coming