6 columns

instead of 3 columns i would like 6

[crayc]

 <div id="col1"> 
      <h2><b>Latest video</b></h2>
        <hr />
        <p>
        <img src="images/video.png" /> 
        </p>
        <p><center> <b> <u>more videos</center></u></b>
        
        </p>
        <br />
        <p><b><u><center Latest Album</u></b> </p>
        
        
     </div><!--end col1-->
       
    <div id="col2"> 
     <h2><b>Mixes</b></h2><br />
        <hr />
        <center><p>
        
        <img src="images/musicplayer.png" />
        
        
        
        </p>
     </div><!--end col2-->

<div id="col3"> 
      <h2><b>Twitter feed</b></h2><br />
        <hr />
        <p>Text. Text. Text. Text. Text. Text. Text. Text. Text.
Text. Text. Text. Text. Text. Text. Text. Text. Text.
Text. Text. Text. Text. Text. Text. Text. Text. Text.
Text. Text. Text. Text. Text. Text. Text. Text. Text.
Text. Text. Text. Text. Text. Text. Text. Text. Text.
Text. Text. Text. Text. Text. Text. Text. Text. Text.
Text. Text. Text. Text. Text. Text. Text. Text. Text.
Text. Text. Text. Text. Text. Text. Text.</p>
      </div><!--end col3-->
      
      

I have 3 columns, i tried setting a div tag of col4 and float left as i want it below column 1. but it does not work. what am i doing wrong. thanks

[penders]

i tried setting a div tag of col4 and float left as i want it below column 1

If you want col4 below column 1, then that isn't a 4th column - that would be the 1st column of the 2nd row...?

If you currently have 3 columns, then presumably you have a width defined for col1, col2 and col3. Presumably the widths divide the content area into 3 (taking into account padding/margins)? In order to get 6 columns then you obviously need to reduce the widths of the other 3 columns so that the total width of all 6 columns is not greater than the total width of your content area. Or have I missed something?

[crayc]

thanks for the reply, i am a newb. yes a row below col 1. no wonder why it did not work.

[penders]

In that case, your 4th containing DIV should probably have a similar style to col1? You might need to clear the preceding columns (col1, col2 and col3) if they are all floated?

Does that resolve the issue?

[crayc]

im sorry, i am confused. are you saying to delete the col1,2 and 3. i tried just adding a br and p tag under the colum 1 video and just keep going from there but once i put the center tag, the image i added disappeared.

[BeeDeeDubbleU]

Define the styles for each of the three columns. Put a clearfix (Google it) after the first three columns then start again with the new columns.

[crayc]

thanks i googled it but i just don't get it. i will keep searching

[BeeDeeDubbleU]

Let's say that you create three appropriate styles for col1, col2 and col3. You would then create three divs styled as col1, col2 and col3. These should be laid out as specified.

<div id="col1">
.........
.........
</div>

<div id="col2">
.........
.........
</div>

<div id="col3">
.........
.........
</div>

<!--Now add your clearfix to "square off the above three columns -->

<div id="clearfix"></div>

<!--Now add the next three columns (properly aligned due to the clearfix div above) -->

<div id="col1">
.........
.........
</div>

<div id="col2">
.........
.........
</div>

<div id="col3">
.........
.........
</div>

In your CSS your clearfix style should look something like,

.clearfix {
clear: both;
}

What happens is that the clearfix basically draws a line under the longest of the cols and you can start another three cols under that.

(hard to explain and I am no expert.)

[crayc]

thanks for explaining.it made more sense then mostof the sites i have read. I am going to try it. If anything i am just going to reattempt to keep going down col1. I just need to put an album cover under the video player. But for some reason when you put a center tag, everything disappears.

[crayc]

Ok i am a moron. I just noticed the why the images disappeared and all this was for naught. I did not close the center tag. BR and p worked fine to keep going below. Well least i learned some thing new with the clear fix. thanks for your help and your time. much appreciated!

[Demaestro]

BBW has you on the right track, just use class="col1" instead of id="col1" .... ids should be unique but class names can be reused.

[penders]

But for some reason when you put a center tag, everything disappears.

Yeah, avoid using the <center> tag. All styling should be done in the CSS if you want to do it properly (that includes underlining text). Just for the record, all 3 uses of <center> in your script above are either incorrectly nested, malformed (which was your problem with the disappearing content) or not closed.

[crayc]

oh so don't use the center tag in the html. center it in the css. ok will google that and see how to do it. thanks

[crayc]

i got the center tag going in css, that was easier. I guess i should do the same with bold underline tags as well. thanks again

[penders]

I guess i should do the same with bold underline tags as well....

<p><center> <b> <u>more videos</center></u></b></p>

This looks a lot like a heading, so perhaps it should be just that, something like:

<h3>More Videos</h3>

You can style this is your CSS however you like:

h3 { 
font-weight: bold;  /* Although headings are usually bold by default */ 
text-decoration: underline;  /* But do you really want it underlined? */ 
text-align: center; 
background-color: red; 
color: white; 
}

[crayc]

thanks. did not know it was bold by default. the more videos is a link so i think underline is best. i am about 98 percent done on page one. the rest of the other pages should be easier as it does not have as much things on it.