• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 231
  • Last Modified:

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

0
arendt73
Asked:
arendt73
  • 7
  • 7
  • 2
1 Solution
 
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
 
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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
 
GaryCommented:
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

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 7
  • 7
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now