keep two div side by side regardless of screen size

Question

I have to put two div side by side by side regardless of screen size. Lets say i have a main-div. Inside it two div. In the left-div i have an image. In the right-div i have some <p> elements.

Now image will be in left and these <p>'s will be on right. I can do this by

.left-div {
    float: left;
    margin-right: 10px;

}

.right-div {
    float: left;
}

Lets say one <p> on the right side has a long sentence. When i shrink the browser to see what happens in smaller display the right-div gets underneath of left-div. And then long sentence in the <p> starts to get wrapped as i shrink the browser more.

I want two div to be side by side and the texts in the right to get wrapped as i start shrinking the browser.

Answer 1

UPDATE

Use flexbox. This design is unbreakable.

.left {
  flex: 1 1 1%;
  padding-right: 1em;
  outline: 1px solid red;
}
.right {
  flex: 1 1 1%;
  padding-left: 1em;
  outline: 1px solid blue;
}
.flexBox {
  display: flex;
  justify-content: space-around;
  flex-flow: row wrap;
}
img {
  display: block;
  width: 100%;
  height: 100%;
}

<div class="flexBox">
  <div class="left">
    <img src="http://placehold.it/300x300/000/fff.png&text=IMG" />
  </div>
  <div class="right">
    <p>xxxxxxxxxxx
xxxxxxx
xxX
XXXXXXXXXXXXXXXXX
XXXXXXXX
XXXXXXX
XXXX XXXXXXXXXXXXXX
XXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXX XXXXX
XXXXXX</p>
    <p>XXXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXX
XXXXXXXXXXXXXXXX
XXXXXXXXXXXX
XXXXXXXXX XXXXXXXXXXXXX
XXXXXXXXXXXXXX
XXXX XXXXXXXXXXXXXXXX
XXXXXXXXXX
XXXXXXXX
XXXXXXXXXXXXXXXXX
XXXXXXXXXX
XXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXX</p>
    <p>XXXXXXXXXXXXX
XXXXXXXXXXXX</p>
  </div>
</div>

Answer 2

you can use width:100%, but its not 100% OK solution. Explanation why is in this question: How to make a div to fill a remaining horizontal space?

.left{
  border:2px solid black;
  width:120px;
  height:80px;
  float:left;
  margin-right:10px;
}
.right{
  width:100%;
}

<div class="left">
 some img
</div>
<p class="right">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

another solution is to use margin:

.left{
  float:left;
  border:2px  solid black;
  width:120px;
  height:80px;
}
.right{
  margin-left:130px; /* width of your img + margin */
  width:auto; /*must be auto */
}

<div class="left">
  some img
</div>
<p class="right">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

Answer 3

Just add few more lines in Your css :

.left-div {
    float: left;
    margin-right: 10px;
    width:calc(50% - 5px); /*half of margin-right*/
    display:block;
}

.right-div {
    float: left;
    display:block;
    width:calc(50% - 5px); /*half of margin-right from .left-div*/
}

Of course, You'll maybe need some overflow (because image) etc.

There is fiddle example a little bit different.

Answer 4

    .left-div {
        float: left;
        margin-right: 10px;
        width: 50%;

    }

   .right-div {
        max-width:45%;
   }

Answer 5

I woulod just float the image, so your text can wrap around it. This will look much cleaner.

#container{
    width: 100%;
    background: yellow;
}
#floated{
    float: left;
}

<div id="container">
    <div id="floated"><img src="http://www.dryeye.com.au/img/hero-eye.jpg"></div>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's 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. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's 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. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

Answer 6

Have created a demo fiddle for your result. Please check hope it helps you.

.left { float: left; width: 48%; margin-right: 2%; } .right { float: left; width: 50%; }

Answer 7

I like to use CSS table for that:

#parent {
  display: table;
  width: 100%;
}
#parent>div {
  display: table-cell;
  background: lightblue;
}
#parent>div:first-child {
  background: lightgreen;
}

<div id="parent">
  <div>Left div</div>
  <div>Right div</div>
</div>