Extend background or border to 100% height of parent element (Tutorials » XHTML and CSS)
As you have maybe noticed on user postings (comments, or forum posts) of PHPwned, the border between postbit (user info on the left) and the post is 100% height of the entire "row" (postbit + post) regardless of which one is greater in height.
Here is the situation: we have 2 divs, floating left to make 2 columns which we will call a row. The height of these columns might vary. We want to extend the border-right of the left column to the whole height of the row.
The solution: padding-bottom: 32768px; and margin-bottom: -32768px; (maximum and minimum values of each) (16 bits not including if its negative)
you MUST have a container with overflow: hidden; otherwise it will stretch your page to a really long length.
in this case we only have the padding-bottom / margin-bottom applied on the left column because the left column is the only one with style that needs to be extended. If you wanted this applied to the right column you would simply put the padding-bottom and margin-bottom on that as well, and apply a background or border to it.
Here is the situation: we have 2 divs, floating left to make 2 columns which we will call a row. The height of these columns might vary. We want to extend the border-right of the left column to the whole height of the row.
The solution: padding-bottom: 32768px; and margin-bottom: -32768px; (maximum and minimum values of each) (16 bits not including if its negative)
you MUST have a container with overflow: hidden; otherwise it will stretch your page to a really long length.
CSS Code:
.clear { clear: both; line-height: 0; } .container { overflow: hidden; /* we dont want the container to stretch because of the padding-bottom of the child elements */ } .col_left, .col_right { float: left; width: 150px; } .col_left { /* note: maximum value for padding and margin is 32768 extend the element with a very big number taking border-left or border-right with it, as well as background */ padding-bottom: 32768px; /* make so the element doesn't actually extend that far */ margin-bottom: -32768px; border-right: 1px solid #333333; }
HTML Code:
<div class="container"> <div class="col_left"> some content </div> <div class="col_right"> some content in the right column<br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /> </div> <div class="clear"></div> </div>
in this case we only have the padding-bottom / margin-bottom applied on the left column because the left column is the only one with style that needs to be extended. If you wanted this applied to the right column you would simply put the padding-bottom and margin-bottom on that as well, and apply a background or border to it.
Rate it
Leave a Comment
Login to leave comments.
User Comments