CODEWITHSUNDEEP
htmlcss
user2854563
user2854563

Reputation: 268

Two Column's tables align on each other

I want two columns having table on top of another with proper margin or padding just like you see on pages created by facebook users. All I can get is this: http://jsfiddle.net/nBAyk/

Please see the screenshot: enter image description here

Please see the red question mark. I want proper adjustments of alignment of tables like facebook user's created pages.

Please help!

Upvotes: 0

Views: 79

Answers (2)

Heretic Monkey
Heretic Monkey

Reputation: 12113

I've updated the provided fiddle with a CSS-only way of doing this: http://jsfiddle.net/mikemccaughan/nBAyk/1/

.latest_posts_bit{
    list-style: none;
    margin: 0;
    padding: 0;
    -moz-columns: 2;
    -webkit-columns: 2;
    columns: 2;
}
.latest_posts_bit li {
    display: inline-block;
    width: 100%;
}

I used the columns property from CSS3 to do it, so your mileage may vary. For example, it won't work on IE earlier than 10, and uses vendor-prefixes to work on other browsers. See http://caniuse.com/#search=columns for more information on browser support.

Upvotes: 1

emran
emran

Reputation: 922

This is not as dynamic as you probably want it to be: http://jsfiddle.net/ytFee/

<div class="row">
<div class="half" id="columnA">
    <table>...</table>
    <table>...</table>
    <table>...</table>
</div>

<div class="half" id="columnB">
    <table>...</table>
    <table>...</table>
    <table>...</table>
</div>

after you determine how many columns you want to display, you might want set your insertion order

Upvotes: 1

Related Questions