CSS tables kinda

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
User avatar
shiznatix
DevNet Master
Posts: 2745
Joined: Tue Dec 28, 2004 5:57 pm
Location: Tallinn, Estonia
Contact:

CSS tables kinda

Post by shiznatix »

What I have right now is several divs with a list in each. They look like this:

Code: Select all

 
<div>
    <div>
        Text
        Text2
        Text3
    </div>
</div>
 
<div>
    <div>
        Blah
        Blah2
        Blah3
    </div>
</div>
 
<div>
    <div>
        Peep
        Peep2
        Peep3
    </div>
</div>
 
And so on. Now of course these just show up in 1 big column. What I want to do is have lets say 2 in 1 row so it would show the 1st list then to its right would be the 2nd list then, magically and without me doing anything, the 3rd list would go under the 1st list. I know this is possible in CSS but I don't know how to do it since my CSS abilities are well, terrible. Can anyone give me a hand?
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: CSS tables kinda

Post by pickle »

If they're all wrapped in a container, this might work:

Code: Select all

 #container > div{
  float:left;
  width:50%;
}
The '>' signifies only immediate children, so it won't apply to the <div> inside the <div>. That's standard syntax, but I'm not sure if IE supports it.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: CSS tables kinda

Post by kaszu »

To have IE support use

Code: Select all

/* Applies to all children divs */
#container div {
  float:left;
  width:50%; /* 49% or specific px */
}
/* Applies to all divs, which are not immediate children */
#container div div {
  float:none;
  width:auto;
}
Problem is that width: auto can override width property of the divs (which are inside other div).
Also width: 50% won't always work correctly in IE because of sub pixel problem. So it should be set to 49% or pixels.
Post Reply