CODEWITHSUNDEEP
csslayouthtml
trim
trim

Reputation: 209

CSS layout best practice

I am unsure what the best combination of CSS rules and HTML elemtents is to achieve this layout:

example layout

(Apologies for the image, it was the best way I could think of to express what I had in mind)

It is essentially a table with 2 rows and 4 columns, but I don't want to use tables.

I'm fairly confident I could hack something together that would do this but it wouldn't be elegant or optimal and I want to know the cleanest way of doing it.

Let me know if this is not clear. Thanks

Upvotes: 2

Views: 1537

Answers (4)

powerbuoy
powerbuoy

Reputation: 12848

The most important thing is to keep your HTML semantic. So there's no "HTML best suited for this layout" but rather HTML best suited for that content. In this case it's what Matt suggests (figure and figcaption). I would probably use a list (ul with li) rather than section though.

Regarding the styling, there are numerous ways to achieve that layout. Depending on your specific needs (are the images equal height? equal width? what about the captions? one line? several lines? etc) you might get by using floats, you could also use display: inline-block and if you really want to replicate a table you can use display: table/table-row/table-cell.

Edit: I'd argue that using a grid system for this is like using an MVC framework to display an animated gif. All grid systems I've seen require the user to add quite a load of divs and classes that ruin your markup.

Upvotes: 1

YuS
YuS

Reputation: 2045

Do you mean something like this? http://jsfiddle.net/semencov/P8B4R/

Upvotes: 4

davidgmar
davidgmar

Reputation: 568

Depending on what's your target audicence, consider using 1200px.com.

In case you already have your template, I made you this jsFiddle. You can start from there :)

http://jsfiddle.net/aLXby/6/

Upvotes: 2

Matt
Matt

Reputation: 23789

For simple layout, float all the containers ("columns") left and make sure to clearfix the parent container of those columns:

<section class="clearfix">
    <figure>
        <img src="img1.jpg">
        <figcaption>Text here</figcaption>
    </figure>
    <figure>
        <img src="img2.jpg">
        <figcaption>Text here</figcaption>
    </figure>
    <figure>
        <img src="img3.jpg">
        <figcaption>Text here</figcaption>
    </figure>
    <figure>
        <img src="img4.jpg">
        <figcaption>Text here</figcaption>
    </figure>
</section>

Your CSS might be:

(clearfix as described on linked page)

figure {
    float: left;
}

For more control and structure, try a grid system, like 960.gs.

This example is assuming that your images have captions, and the HTML5 figure tag and figcaption tags are well-suited for this purpose.

Upvotes: 1

Related Questions