CODEWITHSUNDEEP
jqueryhtmlcss
Teamol
Teamol

Reputation: 819

Two dynamicly sized divs side by side - second div determines size of second

I have two divs side by side. First div has a random len text and second one has random number of divs inside.

I need these two divs to fill all space of their wrapper and I need first div starting to overflow text when the second one gets wider enough. The point of this is that when my first div narrows I can use jquery-textfill to a adapt font-size of text so it can be fit inside.

Here is full example which has buttons to refresh random text and append square in wrapper.

jsfiddle

here is my html

<div id="wrapper">
  <div id="left"></div>
  <div id="right"></div>
</div>

here is my css

#wrapper{
  width: 400px;
  height: 50px;
  background-color: lightgreen;
}

#left{
  float:left;
}

#right{
  float:right;
  overflow: hidden;
}

.square{
  margin-left: 2px;
  width: 50px;
  height: 50px;
  background-color: red;
  float:right;
}

regards teamol

Upvotes: 1

Views: 41

Answers (1)

Ivan Roub&#237;ček
Ivan Roub&#237;ček

Reputation: 369

html:

<div id="wrapper">
  <div id="right"></div>
  <div id="left"></div>
</div>

css:

#wrapper{
  width: 400px;
  height: 50px;
  background-color: lightgreen;
}

#left{
  background-color: yellow;
  overflow: hidden;
}

#right{
  float:right;
  background-color: blue;
}

updated jsfiddle

Upvotes: 1

Related Questions