How to make text inside div file when resizing browser?

Question

So, I have 3 main divs; The gray div, which is the wrapper, the blue div, which is on the left, and the orange div, which is on the right. The blue div has a fixed width and height.

My question is, how can I make a TEXT inside the fluid of an orange div when resizing the browser window? I don’t want the whole orange div to just jump down under the blue div, I want the text to be liquid. How to achieve this?

Thank you for your time:)

Here's the JSFiddle link https://jsfiddle.net/op4nnmb4/7/

.wrapper {
    position: absolute;
    max-width: 1200px;
    width: 100%;
    margin-left: 10px;
    background: #3c3c3c;
}

.leftimg{
    width:600px;
    height: 2900px;
    background: #8cceff;
    position: relative; 
    float: left;
}

.rightside {
    background: #F96;
    float: right;
    width: 50%;
    height: 100%;
}

.projectimg {
    width: 600px;
    position: relative; 
    float: left;
    margin-bottom: 50px;
}

.project-title {
    font-family: 'Abel';
    color: #FFF;
    float: left;
    margin-left: 40px;
    font-weight: 300;
    display: block;
}

.project-title .title1 {
    font-size: 2.5rem;
}
.project-title .title2 {
    font-size: 1.4em;
    clear: both;
    display:block;  
}

.context {
    float: left;
    color: rgba(255,255,255, 0.7);
    width: auto;
    margin: 20px 0 0 40px;
    display: block;
    position: relative;
}
.context p {
    font-size: 1.06rem;
    line-height: 1.6rem;
    font-family: 'Roboto Condensed';
    font-weight: 300;
}

Answer 1

how can I do ... an orange liquid div [width] when the size of the window [] changes?

display: flex; , ;

()

.wrapper {
    display: flex;
}

Flex . , , . , , - -. :

• (, , !)

• ( )

• () ()

• "" ,

• ,

http://www.w3.org/TR/css-flexbox-1/#overview

Answer 2

: https://jsfiddle.net/op4nnmb4/12/

.wrapper {
 display:table;
}
.leftimg, .rightside{
 display:table-cell;
}

Answer 3

, IE8 4.4, .

, font-size 1% ( ) , vw , vh. , .

Answer 4

Here is one way to do this using the floatblue / left image pane.

An orange / content panel can be stored in a stream (non-floating).

I removed a lot of extraneous properties that confused things, but overall, this may be close to what you need.

You should try to use semantic markup, for example, h1and h2instead of being more general spanwith the class, to make it behave like a block element.

.wrapper {
  /* position: absolute; <-- You probably do not need this... */
  max-width: 1200px;
  width: 100%;
  margin-left: 10px;
  background: #3c3c3c;
  overflow: auto;  /* If you want the background color to show under all the image */
}
.leftimg {
  width: 300px;
  height: 600px;
  background: #8cceff;
  float: left;
}
.rightside {
  background: #F96;
  overflow: auto;
}
.project-title {
  font-family: 'Abel';
  color: #FFF;
  margin-left: 40px;
  font-weight: 300;
}
.project-title h1 {
  font-size: 2.5rem;
}
.project-title h2 {
  font-size: 1.4em;
}
.context {
  color: rgba(255, 255, 255, 0.7);
  margin: 20px 0 0 40px;
}
.context p {
  font-size: 1.06rem;
  line-height: 1.6rem;
  font-family: 'Roboto Condensed';
  font-weight: 300;
}

<div class="wrapper">
  <div class="leftimg">
    <span>I am an image</span>
  </div>
  <div class="rightside">
    <div class="project-title">
      <h1>I Am Main Title</h1>
      <h2>Sub title<h2>
        </div>
        <div class="context">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
        </div>
    </div>
</div>

Run codeHide result