Esn024
Esn024

Reputation: 158

How can I get two divs of different heights always side-by-side, with text appearing directly below the 1st div and never overlapping the 2nd div?

This is a bit fiddly, but I'll try to explain it. What I'm trying to get working with CSS is:

  1. Two divs at the top of the page ("A" and "B"), side-by-side with a fixed width of combined 400px (if the window is too narrow to see both, then a scrollbar should appear, I do NOT want one div jumping beneath the other)
  2. Those two divs can be of different heights, though - sometimes div A will be higher, sometimes div B.
  3. I want some long text to appear directly beneath div A. If div B is higher than div A, then the text should flow around div B.
  4. The text should display no wider than 400px, but if the window is narrower, then it should display as narrowly as needed. The text should be no wider than the viewport.

So to summarize, I want the two side-by-side divs on top to display the same way regardless of how narrow the window width is, but the text below div A to be responsive to the window width (and also not to overlap div B, if div B drops down further than div A).

Here's some code that isn't the right approach, but shows partly what I'm going for:

.all {
  max-width:400px;
}
.header div{
    display:inline-block;
    vertical-align:top;
}
.header{
    white-space: nowrap;
    padding: 0px;
    height: 36px;
}
.A{
    background-color:red;
    width: 195px;
    margin-right: 5px;
}


.B{
    width: 195px;
    margin-left: 5px;
    background-color:blue;
}
<div class="all">
<div class="header"><div class="A">Text1</div><div class="B">Text2<br/>Text2<br/>Text2<br/>Text2<br/></div></div>
This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.</div>
Here's the same on JSFiddle: https://jsfiddle.net/ur60tdxy/1/

What doesn't work here is that the long text overlaps div B (the blue one), and also it doesn't allow for div A to be different heights (it just displays 36px below the top rather than immediately below div A, whatever its height).

Any help would be much appreciated.

EDIT: Here's a second version, which behaves as I want except I want the two divs to remain side-by-side when the window is too narrow:

.all {
  max-width:400px;
}
.A{
    background-color:red;
    width: 190px;
    margin: 5px;
  float: right;
}


.B{
    width: 190px;
    margin: 5px;
    background-color:blue;
  float: right;
}
<div class="all">
<div class="B" style="float: right;">Text2<br/>Text2<br/>Text2<br/>Text2<br/></div>
<div class="A">Text1</div>
This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</div>
https://jsfiddle.net/ur60tdxy/2/

Upvotes: 3

Views: 1265

Answers (2)

Temani Afif
Temani Afif

Reputation: 272937

Use width:max-content; to avoid the wrap.

Resize the screen to see the result:

.all {
  margin:5px;
}

.header {
  width:max-content;
}

.A {
  background-color: red;
  width: 195px;
  margin-right: 5px;
  float:left;
}

.B {
  width: 195px;
  margin-left: 5px;
  background-color: blue;
  float: right;
}

.content {
  clear:left;
  max-width: 400px;
}
<div class="all">

  <div class="header">

    <div class="A">Text1</div>

    <div class="B">Text2<br/>Text2<br/>Text2<br/>Text2<br/></div>
  </div>
 <div class="content">
  This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This
  is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
 </div>
</div>

<div class="all">

  <div class="header">

    <div class="A">Text1<br/>Text2<br/>Text2<br/>Text2<br/></div>

    <div class="B">Text2</div>
  </div>
<div class="content">
  This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This
  is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
</div>
</div>

Upvotes: 1

Esn024
Esn024

Reputation: 158

Simplifying Temani Afif's answer just a little (the extra wrapper isn't necessary, this seems to work as well):

.all {
  max-width: 400px;
  margin:5px;
}

.header {
  padding: 0px;
  width:max-content;
}
.A {
  background-color: red;
  width: 195px;
  margin-right: 5px;
  float:right;
}

.B {
  width: 195px;
  margin-left: 5px;
  background-color: blue;
  float: right;
}
<div class="all">

  <div class="header">

    <div class="B">Text2<br/>Text2<br/>Text2<br/>Text2<br/></div>
    <div class="A">Text1</div>

  </div>

  This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This
  is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.

</div>

<div class="all">

  <div class="header">

    <div class="B">Text2</div>
    <div class="A">Text1<br/>Text1<br/>Text1<br/>Text1<br/></div>

  </div>

  This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This
  is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.

</div>

Upvotes: 1

Related Questions