Converting HTML table over to Divs

Question

I have had a good start at geting my codeded table turned over from a table to Div setup but some where in this part right here it seems to be having a problem. This is what the site should look like: http://db.tt/YeUZiiBy.

Here is the code and CSS Link: http://jsfiddle.net/8WKR9/1/.

Here is my HTML `

<div id="container">
    <article>
        <div class="item">
            <img src="4-cute-cats.jpg" class="centerImage" width="300" height="300"
            />
            <p class="centerText">They hunt in packs.</p>
        </div>
        <div class="item">
            <img src="cat_sniping.jpg" class="centerImage" width="256" height="192"
            />
            <p class="centerText">Sniper Cat</p>
            </a>
        </div>
        <div class="item">
            <img src="LOL1.jpg" class="centerImage" width="300" height="298" />
            <p class="centerText">Sneaking Cat</p>
        </div>
        <div class="item">
            <img src="hammercat.jpg" class="centerImage" width="300" height="163"
            />
            <p class="centerText">80s Cat</p>
        </div>
    </article>
    <article>
        <div class="item">
            <img src="kittytrap.jpg" class="centerImage" width="200" height=492 />
            <p class="centerText">It's a trap!</p>
        </div>
        <div class="item">
            <img src="chop-cats.jpg" class="centerImage" width="300" height="140"
            />
            <p class="centerText">They can strip a car to the frame in under 2:00 minutes.</p>
        </div>
        <div class="item">
            <img src="smartkat.jpg" class="centerImage" width="200" height="338" />
            <p class="centerText">Intelligent cat.</p>
            </a>
        </div>
        <div class="item">
            <img src="narniacat.jpg" class="centerImage" width="200" height="337"
            />
            <p class="centerText">Once a cat of Narnia always a cat of Narnia.</p>
        </div>
    </article>
    <article>
        <div class="item">
            <img src="lolcats3.jpg" class="centerImage" width="300" height="108" />
            <p class="centerText">Tired cat.</p>
        </div>
        <div class="item">
            <img src="lol_cats_1.jpg" class="centerImage" width="300" height="142"
            />
            <p class="centerText">Gollum Cat.</p>
        </div>
        <div class="item">
            <img src="Magical-Kitty.png" class="centerImage" width="300" height="180"
            />
            <p class="centerText">Super Cat.</p>
        </div>
        <div class="item">
            <img src="sad-kitty.jpg" class="centerImage" width="300" height="188"
            />
            <p class="centerText">Sad Kitty.</p>
        </div>
    </article>
    <article>
        <div class="item">
            <img src="cat-in-your-wallpaper.jpg" class="centerImage" width="300" height="200"
            />
            <p class="centerText">Wallpaper cat.</div>
        <div class="item">
            <img src="thinking-cat.jpg" class="centerImage" width="300" height="475"
            />
            <p class="centerText">Thinking cat.</p>
        </div>
        <div class="item">
            <img src="http://3.bp.blogspot.com/_znuneBeHigk/TSOOr5DuoQI/AAAAAAAABFY/-Rpe8S1uRo8/s1600/000.jpg&w=823&h=618&ei=_A4VUfP7L4Gy2QXJ-oHIDQ&zoom=1&ved=1t:3588,r:79,s:0,i:354&iact=rc&dur=2621&sig=108293906633680688065&page=3&tbnh=172&tbnw=231&start=67&ndsp=38&tx=64&ty=72"
            class="centerImage" width="300" height="225" />
            <p class="centerText">Gamer Kitty.</p>
        </div>
        <div class="item">
            <img src="http://www.dumpaday.com/wp-content/uploads/2013/01/funny-lol-cats-playing-with-toilet-paper1.jpg"
            class="centerImage" width="300" height="504" />
            <p class="centerText">Couch cat.</p>
        </div>
    </article>
    </article>
    <article>
        <div class="item">  <a href="morekitties.html">More Kitties</a>

        </div>
    </article>
</div>`

It should look like the first link this one : http://db.tt/YeUZiiBy. But it dont it looks all jubled up still. — David Flynn, Feb 14 '13 at 23:06
possible duplicate of [I am not sure how to convert my webpages Table over to divs instead](http://stackoverflow.com/questions/14883750/i-am-not-sure-how-to-convert-my-webpages-table-over-to-divs-instead) — Quentin, Feb 15 '13 at 07:03

lukek · Answer 1 · 2013-02-15T00:58:58.610

1

I think you had the right idea with the mark up but needed some work on the CSS side of things. The key is to clear your floats or else it the item will go to the next available place. I suggest doing a bit more reading on floating and how they effect block elements and the parent element.

I've done a quick 'bare bones' example for you that you should be able to adapt.

http://jsfiddle.net/ZbfXU/2/

<html></html>

edited Feb 15 '13 at 00:58

answered Feb 15 '13 at 00:52

lukek

458
3
12

For more information on clearing and different techniques read http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best – lukek Feb 15 '13 at 01:01

score 1 · Answer 2 · edited Feb 15 '13 at 02:00

1

Try setup height in tag img

.item > img {
width: 100%;
height: 100%;    
}

edited Feb 15 '13 at 02:00

Abdusalam Ben Haj

5,343
5
31
45

answered Feb 15 '13 at 01:38

pacmora

19
2

score 0 · Answer 3 · answered Feb 15 '13 at 07:01

0

you could use max-width and/or max-height on your img tags to make sure they keep ratio instead of transforming.

answered Feb 15 '13 at 07:01

GeNyaa

113
6

score -1 · Answer 4 · answered Feb 14 '13 at 23:57

-1

Go through your code and tidy it up, you've got the right idea of separating into rows then using divs within each row.

Here's one I very quickly mocked up, http://jsfiddle.net/8WKR9/5/ 1st and 3rd height are the same and 2nd and 4th are the same, i'm not getting any display errors so probably best going through your HTML & CSS and tidying it up, that way you can see what each part is doing and work out where it's going wrong, rather than try and find a quick fix, it'll also make your code cleaner and easier to read.

<html></html>

answered Feb 14 '13 at 23:57

woolm110

1,194
17
27

Mark up wise I think the original question was more correct. I don't think you should be specifically targeting each row like that – lukek Feb 15 '13 at 00:40
if you look at my mark up it is actually near identical except I haven't used articles i've used a containing DIV instead. Through styling each row there's much greater control over the items and positioning, given its a very simple layout sometimes in these situations I find it better to start from scratch and recode in a clean and leaner way, that way you effectively help to strip out what isn't needed rather than adding it stuff to try and fix the error, that's just me personally though :) – woolm110 Feb 15 '13 at 14:58
on a side note as well your code is identical to mine except i've added in ID to each rows as well as the class, each row has styling from the class but individual heights are controlled by the ID.. – woolm110 Feb 15 '13 at 15:03
1

Sorry I should have been more clear. I think having to specifically target each row like that is incorrect. My reasoning for this is because quite often this type of information will be output dynamically. If you look at my example the row will be stretched based on what the largest image in the row is which is more table like behaviour. – lukek Feb 16 '13 at 09:03

Converting HTML table over to Divs

4 Answers4