Multiple columns/rows in CSS

  • I’m trying to create a simple theme, but with a bit of, er, complexity. Here’s what I’m trying to do:

    Row 1:
    Header image

    Row 2:
    Specific content split into four bite size columns

    Row 3:
    Single, latest post split into two columns – on the left the post, on the right the category image

    Row 4:

    Split into two columns – on the right recent comments, on the left recent posts

    With specific content I want to split that particular row into four columns, each one providing an excerpt from specific pages.

    How can I go about this?

    Can anyone help? How far I got was this:

    I created two ids called precontent and postcontent and placed them above and below the main post area – I just don’t know how to add other columns to those rows if that makes sense. I know the plugins to use for the relevant feature (category image etc)

    Thanks in advance

Viewing 6 replies - 16 through 21 (of 21 total)

  • Jinsan, take a look at Little Boxes.

    May help….

    Thread Starter jinsan

    (@jinsan)

    I know Root but is it really THAT ambitious? I mean in concept what I’m trying to make is a few boxes, has come tot he point that it should be this difficult to make four boxes?

    I wonder if this is a not only a user limitation but the way CSS works? And you know IE7 is only going to support “some” css2 elements, so what’s another few years before they fully support CSS2 by which time we’ll probably have css4 or css5.

    I know what you’re saying though, but I’m always trying find something more to do rather than having the same bleeding one column/two column thingy. I’d say your theme is actually a lot more ambitious than mine, but then you probably know what you’re doing ??

    BTW are you offering your developer aphrodite for anyone or specific people? I’d be interested in trying it out ??

    Thanks vkaryl I did look at that site, it seems…hmm I don’t think it quite solved my problem but it seems to offer some insight though no specific vlarity.

    I’ll keep trying then I’ll give in ??

    Aphrodite is going out in dribs and drabs to folks who ask for it, who might contribute to the dev, and who can manage the borkage. Send me an email if you want root at atthe404 etc.

    Jinsan,

    I think the four-in-a-row bit on top could pretty easily be achieved–what you need is to put the content in two nested lists. The main list could be an unordered list, with display:inline; as its controlling style. The list inside of each list item would be a definition list, with display:block as its controlling style. The code would look like this (scroll down for CSS):
    <ul id="shorts">
    <li>
    <dl><dt>Your title here</dt>
    <dd>Your content here. </dd>
    </dl>
    </li>
    <li>
    <dl><dt>Your title here</dt>
    <dd>Your content here. </dd>
    </dl>
    </li>
    <li>
    <dl><dt>Your title here</dt>
    <dd>Your content here. </dd>
    </dl>
    </li>
    <li>
    <dl><dt>Your title here</dt>
    <dd>Your content here. </dd>
    </dl>
    </li>
    </ul>

    and your css would look like this:
    ul#shorts {
    display:block;
    width:100%;
    background-color:#000033;
    }

    ul#shorts li {
    display:inline;
    }

    ul#shorts li dl {
    display:block;
    width:23%;
    height:10em;
    padding:1%;
    border:1px solid #000;
    color:#FFF;
    }

    Hope this works for you,
    Tina

    Thread Starter jinsan

    (@jinsan)

    I kept thinking lists, but didn’t think it was feasible, because…well I’m not sure why, i just thought lists = menu and that’s it. I’ll think about trying it, as it seems logical, whether it will work is another matter!

    Thanks for the suggestion though and I’ll give it a run later.

    Cheers

    Thread Starter jinsan

    (@jinsan)

    tinabel do you know how to make the boxes display horizontall rather than vertically?

    Cheers I think I might be going with plan d…

Viewing 6 replies - 16 through 21 (of 21 total)
  • The topic ‘Multiple columns/rows in CSS’ is closed to new replies.