Solved

Adding columns underneath existing columns using CSS

Posted on 2013-06-10
16
216 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
[X]
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
  • 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
Containers & Docker to Create a Powerful Team

Containers are an incredibly powerful technology that can provide you and/or your engineering team with huge productivity gains. Using containers, you can deploy, back up, replicate, and move apps and their dependencies quickly and easily.

 
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

Tutorials alone can't teach real engineering

So we built better training tools.

-Hands-on Labs
-Instructor Mentoring
-Scenario-Based Tests
-Dedicated Cloud Servers

All at your fingertips. What are you waiting for?

Question has a verified solution.

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

This article was originally published on Monitis Blog, you can check it here . Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime…
Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
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 …

690 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