CSS issues with columns overlapping other columns

I have a table containing five columns.  Columns 1, 3, and 5 has borders and will contain text information via hyper links.  Columns 2 and 4 are basically buffer areas between the other columns.  

The issue I have is that columns 1, 3, and 5 overlap columns 2 and 4.  How and why does this happen?  How can I make it so that columns 1, 3, and 5 remain in the correct position with the correct width size without overlapping columns 2 and 4?

Columns 2 and 4 will be blank, will not contain a border color, and as mentioned, are buffers and spacers between the other columns.

Any assistance is greatly appreciated.  Thank you for the help.  

<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:180px;
    border-style:solid;
    border-width:1px;
    border-color:#CCCCCC;
}

#column-2{
    float:left;
    width:15px;
}

#column-3{
    float:left;
    width:590px;
    border-style:solid;
    border-width:1px;
    border-color:#CCCCCC;
}

#column-4{
    float:left;
    width:15px;
}

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

<body>
<div id="table">
<div id="column-1">content in column 1
</div>
<div id="column-2">
2
</div>
<div id="column-3"> content in column 3
</div>
<div id="column-4">
4
</div>
<div id="column-5"> content in column 5
</div>
</div>

</body>
</html>

Open in new window

arendt73Asked:
Who is Participating?
 
GaryConnect With a Mentor Commented:
<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:180px;
    border-style:solid;
    border-width:1px;
    border-color:#CCCCCC;
    margin-right:15px;
}

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

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

<body>
<div id="table">
<div id="column-1">content in column 1
</div>
<div id="column-2"> content in column 2
</div>
<div id="column-3"> content in column 3
</div>
</div>

</body>
</html>

Open in new window

0
 
GaryCommented:
Cannot see what you are saying but anyway if you want a buffer then just use a margin on the elements.
0
 
arendt73Author Commented:
Thank you. What would the margins code look like between columns 1, 3, and 5?
0
 
arendt73Author Commented:
Figured out the (margin right) setting is the piece I needed. Thank you.
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.