CSS Issues

sethworld · 08-10-2005, 10:56 PM

I am having an issue with layout here. I am trying to get a series of blocks of text to be in a 2 column format using only CSS, can't use tables due to CMS issues. The problem is that I can't get the boxes to touch. They are line up with the top of the box rather than the bottom of the box below. Any idea?

--Seth

CSS (HTML attached)
===================================
.sitemap-table {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 15px 0px 0px; PADDING-TOP: 0px; BORDER-COLLAPSE: collapse
}
.sitemap-table TD {
VERTICAL-ALIGN: top;
}
.sitemap-container {
PADDING-RIGHT: 0px; display:inline; BACKGROUND: url(bg-industry-table.gif) repeat-y 0px 0px; PADDING-BOTTOM: 0px; MARGIN: 0px 10px 10px; VERTICAL-ALIGN: top; WIDTH: 205px; PADDING-TOP: 0px; POSITION: relative;
}
.sitemap-container UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; LIST-STYLE-IMAGE: url(../images/accent-list-arrow.gif); PADDING-BOTTOM: 0px; MARGIN: 10px 0px 15px 25px; COLOR: #2a568f; PADDING-TOP: 0px
}
.sitemap-container UL LI {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; LIST-STYLE-IMAGE: url(../images/accent-list-arrow.gif); PADDING-BOTTOM: 0px; MARGIN: 0px 0px 8px; PADDING-TOP: 0px
}
.sitemap-container H3 {
FONT-WEIGHT: bold; FONT-SIZE: 13px; BACKGROUND: url(../images/aboutInternap/bg-industry.gif) #7c2230 no-repeat 0px 0px; MARGIN: 0px; COLOR: #fff; TEXT-ALIGN: center
}
.sitemap-container .sitemapBottom {
BORDER-RIGHT: #000 0px solid; PADDING-RIGHT: 0px; BORDER-TOP: #000 0px solid; PADDING-LEFT: 0px; RIGHT: 0px; BACKGROUND: url(bg-locationsTable-bottom.gif) repeat-x 0px 100%; PADDING-BOTTOM: 10px; BORDER-LEFT: #000 0px solid; WIDTH: 205px; BOTTOM: -5px; PADDING-TOP: 0px; BORDER-BOTTOM: #000 0px solid; POSITION: absolute; TEXT-ALIGN: center
}
.sitemap-container .sitemapBottom SPAN {
DISPLAY: none
}

sethworld · 08-16-2005, 05:03 PM

Anyone? I really need help on this... I am running out of things to try.

harbingerOTV · 08-17-2005, 12:36 AM

you have a lot of stuff going on on that page that I didn't want to weed through but try this out and see if you can work with it:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>2-column boxes</title>
<style type="text/css">
#list_container {
width: 500px;
border: 2px solid #000;
padding: 0;
margin: 0;
}
#list_container ul, li {
padding: 0;
margin: 0;
list-style: none;
}
#list_container ul {
width: 200px;
}
#list_container li {
width: 180px;
height: 180px;
border: 1px solid #66f;
display: block;
}
ul.left{
float: left;
}
ul.right {
float: right;
}
ul.left li {
float: left;
clear: left;
}
ul.right li {
float: right;
clear: right;
}
#list_container .foot {
clear: both;
width: 100%;
height: 0px;
}
* html #list_container .foot {
margin-top: -20px;
}
</style>
</head>
<body>
<div id="list_container">
<ul class="left">
<li></li>
<li></li>
<li></li>
</ul>
<ul class="right">
<li></li>
<li></li>
</ul>
<div class="foot">
</div>
</body>
</html>

Edit: fixed an IE bug