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?
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.
/* 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.