How can I prevent div elements with variables widths from wrapping when browser is re-sized?

Question

I've found similar answers here that solve the issue using fixed widths such as "How can I prevent floated div elements from wrapping when the browser is re-sized?".

In my case I have the first div that is a 72px fixed width square for a logo. The 2nd div is variable width which contains a h1 and h2 element on top of each other inside the div. Regardless of whether the 2nd div is a block or inline-block when the browser is resized the 2nd div wraps down under the logo.

What I want is for the 2nd div to remain next to the right of the first div, but as the browser resizes to a smaller width, the h1, and h2 inside wrap instead.

For example when the browser is fully maximized the divs look like this:

|div 1| |div 2                |
|logo | |h1                /h1|
|fixed| |h2                /h2|

But when the browser re-sizes this happens:

|div 1| 
|logo | 
|fixed| 
|div 2                |
|h1                /h1|
|h2                /h2|

How can I make div 2 remain next to div 1 on the right but make the h1 and h2 wrap like this:

|div 1| |div 2        |
|logo | |h1           |
|fixed| |          /h1|
        |h2           |  
        |          /h2|

Div 2 does not have a fixed width, nor can I assign a width percentage because both div 1 and div 2 need to be as wide as the browser and div 1 is fixed width. Here's my current set up:

.title-area {
  float: left;
  overflow: hidden;
  padding: 0;
  width: 100%;
}

.wrap-logo {
  float: left;
  padding: 0;
  width: 72px;
  display: block;
}

.wrap-title {
  float: left;
  padding: 0;
  width: 100%;
  display: block;
}

.site-logo {
  float: left;
  max-width: 72px;
  display: block;
  vertical-align: top;
}

.title-wrap {
  display: block;
}

.subtitle-wrap {
  display: block;
}

h1.site-description,
h2.site-title {
  text-align: left;
  font-weight: bold;
  float: left;
  display: inline-block;
}

h1.site-title {
  font-size: 1.8em;
  padding: 0;
  text-transform: uppercase;
}

h2.site-description {
  font-size: 1.2em;
  padding: 0;
}

<div class="title-area">
  <div class="wrap-logo">
    <img class="site-logo" src="/seal.svg" alt="Logo">
  </div>
  <div class="wrap-title">
    <div class="title-wrap">
      <h1 class="site-title">Reasonably Long Title Label Description Within Div 2</h1>
    </div>
    <div class="subtitle-wrap">
      <h2 class="site-description">Even longer subtitle label description that should wrap on resize</h2>
    </div>
  </div>
</div>

score 0 · Accepted Answer · answered Apr 15 '18 at 16:11

STOP using float.

They are there but don't abuse them. they break the flow of the page and crazy happens.

the reason that happens is because the flow of the page is broken, so the browser does not know what to do with the width of the second div, he simple applies that it is 100% width.

from what I understood you are looking for display: inline-block but if you want your life made easier go flex.

I think I know what you want to do. this is what I would do:

.main-container {
  width: 100%;
  display: flex
}

.main-container .right-container {
  width: 12%;
}

.main-container .left-container {
  display:flex;
  flex-direction: column;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div class="main-container">
    <div class="right-container">
      <div>something here</div>
      <div>logo here</div>
      <div>fixed</div>
    </div>
    <div class="left-container">
      <h1>Some huge string just appeared in the galaxy and this will be the key</h1>
      <h2>Some huge string just appeared in the galaxy and this will be the key</h2>
    </div>
  </div>
</body>
</html>

Is this it?

Hope it helps :)

That is it exactly. I tried flex before but left the floats, so once those were pulled it worked. Thank you, — Budmaniak, Apr 15 '18 at 20:56

How can I prevent div elements with variables widths from wrapping when browser is re-sized?

1 Answers1