Solved

CSS issues with columns overlapping other columns

Posted on 2013-06-10
4
321 Views
Last Modified: 2013-06-10
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

0
Comment
Question by:arendt73
  • 2
  • 2
4 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39235614
Cannot see what you are saying but anyway if you want a buffer then just use a margin on the elements.
0
 

Author Comment

by:arendt73
ID: 39235632
Thank you. What would the margins code look like between columns 1, 3, and 5?
0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39235650
<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
 

Author Closing Comment

by:arendt73
ID: 39235758
Figured out the (margin right) setting is the piece I needed. Thank you.
0

Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

831 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