4 columns test_2 - section-7

see the other page for original code


   1. <div class="col_wrapper">
   2. <div class="col_4">asdf</div>
   3. <div class="col_4">asdf</div>
   4. <div class="col_4">asdf</div>
   5. <div class="col_4">asdf</div>
   6. <div style='clear: left;'><!-- --></div>
   7. </div>

WELL, learned something I wasn't aware about: NEVER, never start a class name with a number!! and here are the css rules:


/* 4 columns style */
.col_wrapper { float: left; width: 99%; margin:0; }
.col_4 { background-color: #fff; float: left; display: block; width: 24%; margin-left: 2px; }
.col_4 p { background-color: #ded; width: 100% !important; margin: 2px 0; }

In your text area you can add div and h tags all you want but you need to give them room to allow other things to be autowrapped in p and br tags.

So, you could do something like this (I'm taking out the arrows so it will appear):

div ...

This is a paragraph or a link.
This is the second line.

/div

div ...

Another paragraph.

/div

Make sense? Same with heading tags too. By leaving the space the other things can be input as usual. The div and h tags are ignored and don't get wrapped

still something strange is happening. besides eventually adjusting the padding between columns, must find out how to avoid the long text lines overlapping.
perhaps a display:block workaround?
what could be also -noticed that in the output code- is that when a p tag is inserted, than the line doesn't break, so there might be that rule of
#content p width:480px
that I used in the css
might try to remove it and/or check the #content width as well

This is a paragraph or a link.
This is the second line.

Another paragraph.

looks like you're using internet explorer 6, better upgrade it!

ArTeam

4 columns test_2 - section-7