# # # #
# # # #
# # # #
instead of each post below the previous:
#
#
#
#
Tutorial taken from here.
CSS can work in divs, layers and floats.
Floats can be classes, classes can be set as specific widths.
So, your float must be left or right, pick one, preferrably left.
Your container can be a class (for XHTML validity).
You can style this "container" class in CSS, I recommend you do.
The first thing you need is your container. This will be your "Box" so you do:
- Code: Select all
<div class="container">text here</div>
Inside this container, you will be using the float: left; commands found in CSS, please look them up if you are not very familiar with how they work. Here is your first example:
- Code: Select all
<div class="container">
<div class="left">news</div>
</div>
Your container now has one float in it, this will be your first news element. The class "left" should contain "float: left;" somewhere in the css.
Now for four columns you need to specify the width of each class inside the container. The class "left" will begin to look like this:
- Code: Select all
.left {
float: left;
width: 25%; // or its best to use 24% sometimes!
}
Ok your code should now look like:
- Code: Select all
<div class="container">
<div class="left">news</div>
<div class="left">news</div>
<div class="left">news</div>
<div class="left">news</div>
</div>
See how there is 4 news and each one is beside another?... Now because you have specified a WIDTH in each of the class="left" above when you add a FIFTH news item, it will drop down BELOW the first, a SIXTH will be below the second, a SEVENTH will be below the third and so on so forth.
For 4 columns on 5 rows
You just need to put $number = "20"; in your cutenews include code!
