CODEWITHSUNDEEP
htmlcss-floatcss
borazslo
borazslo

Reputation: 103

Overflow DIV content without fix height

I have two divs: left and right. In the left there is a long text. In the right there are some annotations about the text (more divs). If the text of the left is longer than the annotations I'm like it. But when the annotations are bigger/longer then the left div, I want to make the right div's content overflow.

With other words: two divs without fix height, make overflow the right one.

The code is above or JSFiddle

<div id="container">
    <div id="left">Some long-long text, allways to show</div>
    <div id="right">Some divs not necessarily show all</div>
</div>

css:

#container {
    background-color:white;
    float:left;
}

#left {
  width: 79%;
  float:left;
}

#right {
  width: 19%; 
  float:right;
  overflow: hidden;
}

But it's not working. :(

Upvotes: 0

Views: 2650

Answers (2)

Abernasty
Abernasty

Reputation: 670

As Jan suggested in his last comment, I think you need to use javascript or jQuery to accomplish this.

This question outlines an approach using javascript that was accepted by the OP, though the OP made no comments on his process of execution.

I've modified a js fiddle from this answer to a similar question.

It uses the following:

CSS

#main{
    width:auto;    

}

#one{
height:auto;
width:200px;
display:inline-block;
float:left;

}
#two{
height:100%;
width:200px;
float:left;
display:inline-block;
overflow: auto;

}

div{
border:1px solid black;
}

Javascript

$(document).ready(function() {

        $("#main").css("height",$("#one").height());


 });

And I believe addresses your desired outcome.

Upvotes: 1

veelen
veelen

Reputation: 1924

You have to use overflow: hidden on #left, and not on #right.

Upvotes: 0

Related Questions