Forum Moderators: not2easy
I have used the following methods to limited success...
to set the divs to have either a left or right border only which if a left border is used and the div furtherst right is shorter then the border doesn't stretch to the end.
the other solution to that is to give the divs id and assign the longer div the border but if the site is dynamic you can't tell which div will have most content all the time.
by giving all the divs borders you end up with borders of double thickness in places - which looks poor.
has any got a solution to this that i've completely overlooked?
my code
/* holding div */
#left{
float: left;
width: 68%;
margin: 1em 0 0;
border: 1px solid #DDE;
border-width: 1px 1px 0 0;
}
/seperate divs lined up two by two */
#left div{
width: 49.5%;
float: left;
clear: none;
border: 1px solid #DDE;
border-width: 0 0 0 1px;
}
Of course, the layout would be hard to liquify, but otherwise it is a good solution.
{border-collapse:collapse;}
finished code
css
/* holding div */
#content{
width: 100%;
}
/* containing div within holding div */
#left{
float: left;
width: 68%;
margin: 1em 0 0;
border: 1px solid #DDE;
border-width: 1px 1px 0 0;
background: transparent url(../images/leftdiv-bg.gif) center top repeat-y;
}
/* all the divs inside #left container */
#left div{
width: 49.5%;
float: left;
clear: none;
}
.sub-section{
float: none;
width: 100%!important;
text-align: center;
border: 1px solid #DDE;
border-width: 1px 0!important;
background: #FFF;
}
<div id="content">
<a id="start"></a><div id="left">
<div>
<h2>header</h2>
<p>content</p>
</div>
<div>
<h2>header</h2>
<p>content</p>
</div>
<div class="sub-section">
<h2>header</h2>
<p>content</p>
</div>
</div>
</div>
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#left1 {
width:12em;
height:50em;
border-right:2px solid blue;
float:left;
background-color:red;
}
#left2 {
width:12em;
height:10em;
border-left:2px solid blue;
margin-left:-2px;
float:left;
background-color:green;
}
</style>
</head>
<body>
<div id="left1"></div>
<div id="left2"></div>
</body>
</html>
A background image is no hack, its a visual enhancement to the design, and thats what we are looking for here isnt it?
I'd have to disagree that using a centered image to create a border isn't a hack, that's how I used to create 1px borders for Netscape 4 in a table, that was a hack, so is this. There's nothing wrong with hacks, but they are hacks. One of the main advantages of using CSS is that you get control of visual presentation through a text document, your stylesheet. So if say you wanted a slightly different border, you'd type in the color and that would be it. With the centered image hack you'd have to generate a new image witht the color you were looking for.
With a few more tweaks to the above, you can also get rid of the width:49.5% hack, by the way, and have two truly 50% width divs filling their container.
With a few more tweaks to the above, you can also get rid of the width:49.5% hack, by the way, and have two truly 50% width divs filling their container.
tried that and firefox and opera lap it up but IE6 shows gives the divs a width greater than 50% and puts one below the other.
#left div{
background: transparent url(../images/leftdiv-bg.gif) 49.5% repeat-y;
}
while firefox and IE show it down the middle of the two divs opera displays it to the right and takes half the screen repeating both y and x!
this code
#left div{
background: transparent url(../images/leftdiv-bg.gif) center center repeat-y;
}
works well but because it is dead center, it has no padding to the left of the rightsided div (make sense?)
oh woe is me.
I'll fidle around til i find a solution and report back.
tried that and firefox and opera lap it up but IE6 shows gives the divs a width greater than 50% and puts one below the other.
Your tried the wrong tweaks. By the way, you also discovered what's wrong with the image border tweak, namely that it must occur precisely between the two equally sized divs, in the exact center to work cross browser, which gives you a pretty uselessly rigid method.
I got pretty stable results with the following code:
#left-half, #right-half {
float:left;
margin-right:-2px;
}
#left-half {
border-right: 2px solid #9B4920;
width:50%;
}
#right-half {
border-left: 2px solid #9B4920;
width:50%;
}
not nearly as stable as if I had used table cells of course, but that's a given with any column type layout.
Borders are visual enhancements and not necessary for the readability. A background image is the most reliable way when it comes to CSS-p techniques. Thats my experience and Ill stick to that.
lets say that you want three columns with borders in between and on the side of the articles
That's of course a different scenario, as are the other theoretical requirements, such as borders on both sides and so on, I was just posting for the original question, which was 2 columns with a border in between them.
Could you post the code for a three column layout using the image border technique, I'd like to see it.
Personally, I have no idea why tables cause such strong reaction, it's just a tag, layout remains linear, data presents in logical order irregardless of user agent as far as I know, and given that it solves problems like this completely without any hacks or tweaks, it's hard to understand why people insist on handicapping themselves deliberately just to follow a recommendation, but that question has been beaten to death here so no need to get into it again I guess.
