Adding columns underneath existing columns using CSS

I have three centered columns on a page that contain either links or text content.  I want to have separate columns underneath the existing columns with buffers. Similar to a newspaper style website.

Do I need to create a new "table" with new columns or can I  add additional columns below existing ones? And if so, how can this be done?  Below is my existing code for review. Thank you.

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
#table {
	width: 980px;
	margin: auto;
    overflow:hidden;
}

#column-1{
    float:left;
    width:178px;
	height:100px;
	border-style:solid;
	border-width:1px;
	border-color:#CCCCCC;
    margin-right:15px;
}

#column-3{
    float:left;
    width:588px;
	border-style:solid;
	border-width:1px;
	border-color:#CCCCCC;
	margin-right:15px;
}

#column-5{
    float:left;
    width:178px;
	border-style:solid;
	border-width:1px;
	border-color:#CCCCCC;
}
</style>
</head>

<body>
<div id="table">
<div id="column-1">LINKS
</div>
<div id="column-3">
CONTENT
</div>
<div id="column-5">
LINKS
</div>
</div>
</div>

</body>
</html>

Open in new window

arendt73Asked:
Who is Participating?
 
GaryCommented:
Just repeat the div layout as many times as you need - or am I missing something?
You could have all the content in one (per column) div as well.
0
 
arendt73Author Commented:
When I add <div id="column-1">LINKS</div> underneath <div id="column-1">LINKS </div>, the "table" appears next to each other, not below. I want it to appear below each div. Not side to side.
0
Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

 
COBOLdinosaurCommented:
Then when you are ready to start a new row putin an element with a style property of clear:both to stop the float.

Cd&
0
 
COBOLdinosaurCommented:
<body>
<div id="table">
<div id="column-1">LINKS
</div>
<div id="column-3">
CONTENT
</div>
<div id="column-5">
LINKS
</div>
</div>
</div>
<div style="clear:both;"></div>
</body>

Open in new window


Cd&
0
 
arendt73Author Commented:
I added the style property of clear:both underneath column-1 and Column-2 (containing the text Links 2) appears underneath where I want it to appear.

But now as you can see from the code below, columns-3 and columns-4 appear in line with column-2. They should remain at the top in line with column-1.  

I am planning on adding columns underneath columns-3 and columns-4 that may have varying size heights due to the number of links.  But how to I break up columns, thus keeping there existing positions while placing some underneath each?

<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
#table {
	width: 980px;
	margin: auto;
    overflow:hidden;
}

#text_line{
clear:both;
margin-bottom:12px;
}

#column-1{
    float:left;
    width:178px;
	height:100px;
	border-style:solid;
	border-width:1px;
	border-color:#CCCCCC;
    margin-right:15px;
}

#column-2{
    float:left;
    width:178px;
	height:100px;
	border-style:solid;
	border-width:1px;
	border-color:#CCCCCC;
    margin-right:15px;
}

#column-3{
    float:left;
    width:588px;
	border-style:solid;
	border-width:1px;
	border-color:#CCCCCC;
	margin-right:15px;
}

#column-4{
    float:left;
    width:178px;
	border-style:solid;
	border-width:1px;
	border-color:#CCCCCC;
}
</style>
</head>

<body>
<div id="table">
<div id="column-1">LINKS 1</div>

<div id="text_line"></div>

<div id="column-2">LINKS 2</div>

<div id="column-3">CONTENT</div>

<div id="column-4"> LINKS 3</div>
</div>

</body> 
</html>

Open in new window



Thanks for the assistance and code help.  Below is the updated example I am using:
0
 
GaryCommented:
http://jsfiddle.net/UxqXe/2/

I changed your id's to classes
0
 
arendt73Author Commented:
I modified the code supplied by GaryC123 in the attempt to separate the left columns with a buffer/space in between Columns 1, 2, and 3.  But I am having a hard time doing so.

Also, column 4, the centered column (Content), is not positioned at the top of the table ID. I tried adding a top position to the column-4 class without any luck.  

Please see code below.  The attached JPG is a rough idea of how I would like the page to appear.

Thank you for the assistance.  

Example
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
#table {
	width: 980px;
	margin: auto;
    overflow:hidden;
}

.column-1{
    float:left;
    width:178px;
	height:50px;
	border-style:solid;
	border-width:1px;
	border-color:#CCCCCC;
    margin-right:15px;
    clear:both;
}

.column-2{
    float:left;
    width:178px;
	height:100px;
	border-style:solid;
	border-width:1px;
	border-color:#CCCCCC;
    margin-right:15px;
    clear:both;
}

.column-3{
    float:left;
    width:178px;
	height:75px;
	border-style:solid;
	border-width:1px;
	border-color:#CCCCCC;
    margin-right:15px;
    clear:both;
}

.column-4{
    float:left;
    width:588px;
	border-style:solid;
	border-width:1px;
	border-color:#CCCCCC;
	margin-right:15px;
}

.column-5{
    float:left;
    width:178px;
	border-style:solid;
	border-width:1px;
	border-color:#CCCCCC;
    
}
</style>
</head>

<body>
<div id="table">
<div class="column-1">LINKS</div>
<div class="column-2">LINKS</div>
<div class="column-3">LINKS</div>
<div class="column-4">CONTENT</div>
<div class="column-5">LINKS</div>
<div class="column-1">LINKS</div>
<div class="column-4">CONTENT</div>
<div class="column-5">LINKS</div>
<div class="column-1">LINKS</div>
<div class="column-4">CONTENT</div>
<div class="column-5">LINKS</div>
<div class="column-1">LINKS</div>
<div class="column-4">CONTENT</div>
<div class="column-5">LINKS</div>
</div>

</body> 
</html>

Open in new window

0
 
GaryCommented:
The code there has 5 columns on the first row and then 3 columns after that for each row, that is messing the layout up
So are you using 5 columns or 3 columns?
0
 
arendt73Author Commented:
I will be using three columns on the left, three in the center, and three to the right. Please keep in mind that the column height sizes will be different and each should have a clear buffer/spacer between the columns.
0
 
GaryCommented:
Mmmm, so you have 9 columns across the page?
0
 
arendt73Author Commented:
What I want is three columns with boxes/sections on top of each other.  The left and right columns are 185px and the center column is 598px.  If you look at the attached example, you will have a better understanding of what I am trying to accomplish.    

Web page example
0
 
arendt73Author Commented:
GaryC123, this appears to be what I am looking for.  To better understand what you did, can you give me a quick explanation?  How did you add the spacing in between columns 1?  Where did you set the spacing size?  If possible, I want to reduce the size of the spacing as well as add spacing to columns 2 and 3.

Thank you.
0
 
GaryCommented:
Columns 1 and 2 have a margin-right:15px - this is from your previous question.
0
 
arendt73Author Commented:
Yes, columns 1 and 2 have a right margin of 15px to separate the three columns (horizontal).  How did you separate column 1 "tables" vertically?
0
 
GaryCommented:
Don't know what you mean - I didn't separate them.
Each subsequent row will align with the bottom of the tallest element from the previous row.
If you want a gap between each row then just add margin-bottom:5px to the three column classes.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.