Reputation: 158
This is a bit fiddly, but I'll try to explain it. What I'm trying to get working with CSS is:
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>
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>
Upvotes: 3
Views: 1265
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
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