CSS border Issue : failing to render left border

0
votes

I am trying to show a border on the left side, but it doesn't show after the first div(breadCrumb). The HTML code is following :-

<div class="contentHolder">
    <div class="breadCrumb">
        <a href="http://www.pricetag.com">Store </a>>>&nbsp;Electronics 
    </div>
    <div class="contentMainDiv">
        <div class="leftDiv"><p>orem ipsume Lorem ipsume Lorem ipsume Lorem ipsume</p>
        </div>
        <div class="rightDiv">
        </div>
    </div>
</div>

The CSS code is following :

.contentHolder { padding: 10px 0 0 10px; border-left: 1px solid #CCC; }

.contentHolder div.breadCrumb { font-size:12px; }

.contentHolder div.breadCrumb a {color:#408080; text-decoration:none; }

.contentHolder div.breadCrumb a:hover {text-decoration:underline; }

.contentHolder div.leftDiv{ float:left; width: 150px; }

.contentHolder div.rightDiv { float:left;}

Below is Image for the Error Page : -

enter image description here

3
htmlcss

3 Answers

1
votes

You need to clear/contain the floated elements in .contentMainDiv.

One way to do that is to add overflow: hidden.

1
votes
.contentHolder div.leftDiv{ float:left; width: 150px; }

remove float: left or use clearfix http://perishablepress.com/press/2009/12/06/new-clearfix-hack/ for contentHolder class

preview http://jsfiddle.net/TrePF/

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    }
.clearfix { display: inline-table; }
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */
.contentHolder { padding: 10px 0 0 10px; border-left: 1px solid #CCC; }

.contentHolder div.breadCrumb { font-size:12px; }

.contentHolder div.breadCrumb a {color:#408080; text-decoration:none; }

.contentHolder div.breadCrumb a:hover {text-decoration:underline; }

.contentHolder div.leftDiv{ float:left; width: 150px; }

.contentHolder div.rightDiv { float:left;}
<div class="contentHolder clearfix">
    <div class="breadCrumb">
        <a href="http://www.pricetag.com">Store </a>>>&nbsp;Electronics 
    </div>
    <div class="contentMainDiv">
        <div class="leftDiv"><p>orem ipsume Lorem ipsume Lorem ipsume Lorem ipsume</p>
        </div>
        <div class="rightDiv">
        </div>
    </div>
</div>
-1
votes

You can add float: left; or display: inline-block; to .contentHolder

.contentHolder {
  padding: 10px 0 0 10px;
  border-left: 1px solid #CCC;
  float: left;
}

Either should work.