...

View Full Version : Getting borders to go full length of content



cyphix
07-31-2010, 07:25 PM
Hey guys.... I'm trying to make up a css table looking type thing with three different columns.... it's easy enough to get a border to go the full length of the content when you only have to columns as then you just use a border for the column with the longest content... but I have 3 columns & don't know which will be the longest.

The borders only seem to stretch the length of the content.

Here is an example row..



<div class="submission">
<div class="submissionTitle">
blah blah blah
</div>
<div class="submissionURL">
blah blah blah
</div>
<div class="submissionAction">
<input type="checkbox" name="blah" value="yes" />
</div>
<div class="contentClear"></div>
</div>


Here is the CSS:



.submission {
margin: 0px auto;
width: 860px;
border: 1px solid #000;
background-color: #B7916F;
font-weight: bold;
color: #fff;
}

.submissionTitle {
float: left;
width: 400px;
margin-top: 3px;
padding: 3px 0px;
}

.submissionURL {
float: left;
width: 399px;
margin-top: 3px;
padding: 3px 0px;
border-left: 1px solid #000;
}

.submissionAction {
float: left;
width: 59px;
padding: 3px 0px;
border-left: 1px solid #000;
}


Thank You!

met
07-31-2010, 07:46 PM
can't be achieved easily

generally the best solution is Faux Columns (http://www.alistapart.com/articles/fauxcolumns/)

edit~ to elaborate - make an image that can be repeated suitably and apply it to the background of the container. the "border" will always be 100% of the containers height, giving the impression you want.
this is dependant on having columns of a fixed width however.

cyphix
07-31-2010, 08:49 PM
Thanks...... I'll check it out! :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum