CSS Tips Basic: Two columns
5 comments | posted Apr 6
This is one of the key things involved in avoiding TABLE layouts and using DIV layouts.
Example 1
Column 1
Isn't it so beautiful?
Column 2
Isn't it beautifuler?
You can just as quickly add a third column as long as the total width of the three columns doesn't exceed their container's width.
Example 2
Column 1
Isn't it beautiful?
Column 2
Isn't it beautifuler?
Column 3
Lovely
The Code
<div style="float: left; width: 200px; margin: 0 auto;">Content here</div>
>div style="float: left; width: 200px; margin: 0 auto;">Content here</div>
The above code will create two colums that are side by side.
5 comments
You must be logged in to post comments.
m Dot says:
Could you explain how to make this relative to our virb layout? Where exactly would I put this in order to make it work?
posted May 3
Comment replies (1)
chrysb says:
It depends what you want to do. Right now the left and right containers of you profile are doing this. If you want to have multiple columns, use the code above, and put the modules where it says "Content here". Make use of the preview feature - -it's really useful in getting your profile to look how you want and to tweak it.
I usually open the preview in a new tab and go back and forth. Just click "Refresh" at the top of the preview page, or click 'Preview' again from the Advanced Customization page.
Good luck!
posted May 4
Merro says:
Should the 2nd div style in "the code" begin with a "less than" instead of the "greater than" symbol? And how would I go about putting my friends in one column and groups in the 2nd?
posted Apr 27
Comment replies (1)
chrysb says:
Ew, yeah. Just replace "Content here" with the modules in advanced customization.
posted Apr 27
w3rd says:
This worked great. Is there a way to shrink the space thats below the pics and above the comments line? So it's equal like the rest.
posted May 10