Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Adding columns underneath existing columns using CSS

Posted on 2013-06-10
16
209 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
ID: 39235850
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
ID: 39235862
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
ID: 39236360
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
Webinar: Aligning, Automating, Winning

Join Dan Russo, Senior Manager of Operations Intelligence, for an in-depth discussion on how Dealertrack, leading provider of integrated digital solutions for the automotive industry, transformed their DevOps processes to increase collaboration and move with greater velocity.

 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39236364
<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
ID: 39237653
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
ID: 39237728
http://jsfiddle.net/UxqXe/2/

I changed your id's to classes
0
 

Author Comment

by:arendt73
ID: 39238056
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
ID: 39238108
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
 

Author Comment

by:arendt73
ID: 39238141
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
ID: 39238217
Mmmm, so you have 9 columns across the page?
0
 

Author Comment

by:arendt73
ID: 39238293
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
ID: 39238350
0
 

Author Comment

by:arendt73
ID: 39238403
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
ID: 39238418
Columns 1 and 2 have a margin-right:15px - this is from your previous question.
0
 

Author Comment

by:arendt73
ID: 39238460
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
ID: 39238474
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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

856 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