Solved

Adding columns underneath existing columns using CSS

Posted on 2013-06-10
16
195 Views
Last Modified: 2013-07-03
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
Comment
Question by:arendt73
  • 7
  • 7
  • 2
16 Comments
 
LVL 58

Expert Comment

by:Gary
Comment Utility
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
 

Author Comment

by:arendt73
Comment Utility
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
<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
 

Author Comment

by:arendt73
Comment Utility
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
 
LVL 58

Expert Comment

by:Gary
Comment Utility
http://jsfiddle.net/UxqXe/2/

I changed your id's to classes
0
 

Author Comment

by:arendt73
Comment Utility
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
 
LVL 58

Expert Comment

by:Gary
Comment Utility
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

Author Comment

by:arendt73
Comment Utility
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
 
LVL 58

Expert Comment

by:Gary
Comment Utility
Mmmm, so you have 9 columns across the page?
0
 

Author Comment

by:arendt73
Comment Utility
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
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
Comment Utility
0
 

Author Comment

by:arendt73
Comment Utility
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
 
LVL 58

Expert Comment

by:Gary
Comment Utility
Columns 1 and 2 have a margin-right:15px - this is from your previous question.
0
 

Author Comment

by:arendt73
Comment Utility
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
 
LVL 58

Expert Comment

by:Gary
Comment Utility
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now