Page 1 of 1

CSS tables kinda

Posted: Mon Feb 09, 2009 5:21 am
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?

Re: CSS tables kinda

Posted: Mon Feb 09, 2009 10:44 am
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.

Re: CSS tables kinda

Posted: Mon Feb 09, 2009 1:10 pm
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.