Solved

CSS issues with columns overlapping other columns

Posted on 2013-06-10
4
315 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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

747 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

17 Experts available now in Live!

Get 1:1 Help Now