Solved

CSS issues with columns overlapping other columns

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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Suggested Solutions

Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
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 …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

910 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

22 Experts available now in Live!

Get 1:1 Help Now