Hello All,
I am trying to accomplish having two columns of equal height that have borders.
I am trying the faux column method. I would prefer not to use Javascript at this time.
As you will see by the attached image snipped from the page, the border around the right column doesn’t fully wrap around the column, but appears to wrap around the content while the faux column image flows past.
I am looking for this to work in FF and IE 6+. I don’t care about the other browsers at this point.
Any help would be great. If you could even point me in the right direction that would be helpful as well.
I have read many of the different sites on how to accomplish the equal height columns, but none really discuss how to do so with the columns having borders.
Thanks in advance for your time and help!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
</head>
<body>
<div id="site_container">
<div id="content_wrap"><div id="logo"><img src="/images/logo.png" alt=""/></div>
<div id="nav">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
</ul>
</div>
<div id="header"></div>
<div id="col_container">
<div id="leftcol">
<p>Text Goes Here</p>
<p>Text Goes Here</p>
<p>Text Goes Here</p>
<p>Text Goes Here</p>
<p>Text Goes Here</p>
<p>Text Goes Here</p>
</div>
<div id="rightcol">
<p>Text Goes Here</p>
<p>Text Goes Here</p>
</div>
</div>
<div id="footer">
<p>Info here</p>
<p>Info here</p>
</div>
</div>
</div>
</body>
</html>
body
{
background: url(/images/pattern1.jpg) repeat;
}
a:link, a:visited, a:active
{
color: #fff;
text-decoration: none;
}
a:hover {
}
/******************************************************************************************/
#site_container
{
width: 760px;
border: 1px solid #000;
margin: 50px auto;
background: url(/images/pattern2.jpg) repeat;
}
#content_wrap
{
width: 720px;
margin: 0px auto;
}
/******************************************************************************************/
#nav
{
border: 1px solid #000;
margin: 20px 0px;
background-color: #92826B;
line-height: 16px;
}
#nav ul
{
padding: 10px 0px;
}
#nav ul li
{
display: inline;
padding: 0px 5px;
}
#nav ul li a
{
padding: 5px;
}
#nav ul li a:hover
{
background-color: #4a0011;
}
/******************************************************************************************/
#logo
{
position: absolute;
top: 15px;
margin-left: 500px;
}
/******************************************************************************************/
#header
{
height: 200px;
border: 1px solid #000;
background: url(/images/image.jpg) no-repeat center center;
}
/******************************************************************************************/
#col_container
{
height: 1%;
overflow: hidden;
margin: 20px 0px;
background: url(/images/col_bg.png) repeat-y;
}
#leftcol
{
float: left;
width: 500px;
background: #92826B;
border: 1px solid #000;
}
#rightcol
{
margin-left: 520px;
background: #92826B;
border: 1px solid #000;
}
/******************************************************************************************/
#footer
{
border: 1px solid #000;
margin: 20px 0px;
background-color: #92826B;
padding: 5px;
text-align: center;
line-height: 20px;
font-size: 12px;
}