CODEWITHSUNDEEP
htmlcss
Krab
Krab

Reputation: 6756

css separator of two float divs

http://jsfiddle.net/dx6m9/

    <style>
    .floated {float: left;}
    .container {width: 100%;}
    .left, .right {
        width:60%; 
        box-sizing:border-box; 
        padding:10px;
}
    .left {width:40%; border-right: 1px dotted #dddddd;}
    .clearfix {clear:both;}
    </style>

    <div class="container">
      <div class="floated left">
          Ahoj
        </div>
        <div class="floated right">
            Nazdar
            <br />
            Ahoj
            <br />
             Nazdar
            <br />
            Ahoj

        </div>
     <div class="clearfix"></div>
    </div>

how to force the right border to be always long as longer of these two float divs? That border should acts just like a separator.

Upvotes: 0

Views: 1469

Answers (4)

Last1Here
Last1Here

Reputation: 1079

I would approach this by adding a 3rd seperator div Fiddle and set this to 40% left.

.sep {
    position: absolute;
    left:40%;
    top:0;
    bottom:0;
    border-left: 1px dotted #ddd;
}
.container {
    width: 100%; 
    position:relative
}

Upvotes: 2

Aditzu
Aditzu

Reputation: 706

here you find exactly what you want: http://jsfiddle.net/stryd3r/dx6m9/5/

Is made with a simple Jquery function:

$( document ).ready(function() {
   var maxHeight=$( '.left' ).height();
    if  ($( '.right' ).height()>maxHeight)
        maxHeight=$( '.right' ).height();
    $( '.dotted' ).css('height',maxHeight);
});

Upvotes: 0

Wex
Wex

Reputation: 15695

This is only achievable with either tables (either in markup as a <table> or using table-cell in CSS) or using a background-image, as described in Faux Columns.

This question, in one form or another, has been asked a lot on this site. Try searching 'equal height columns' in and you will find quite a few similar responses.

Upvotes: 2

codingrose
codingrose

Reputation: 15699

Try:

.floated {display:table-cell;}
.container {width: 100%;display:table}

Fiddle here.

Upvotes: 3

Related Questions