[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

CSS issues with columns overlapping other columns

Posted on 2013-06-10
4
Medium Priority
?
345 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 2000 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

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Question has a verified solution.

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

Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
Strategic internal linking is often considered an SEO power technique, especially for content marketing. Do you need to hire an SEO agency to optimize you internal linking? No, this article will help you understand the basics of internal linking and…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
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…
Suggested Courses

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