CODEWITHSUNDEEP
htmlcss
Björn Tantau
Björn Tantau

Reputation: 1614

Float element right to max-width

In a responsive layout I want to show the logo in the header on the right side but only up to a certain width. But the background of the header should extend to the whole width of the page. If the viewport is smaller than the "maximum width" the logo should of course still be visible.

I can achieve this with a wrapper, but I would like to know if someone has a way of avoiding the wrapper. Maybe with some flexbox or grid magic.

Here's a working example with a wrapper, the JS is just there to simulate the user resizing the browser window:

// Simulate the user resizing the browser window:
const min = 300;
const max = 1000;
let width = min;
let add = 1;

setInterval(() => {
  document.querySelector('header').style.width = width + 'px';
  width += add;
  if (width > max) {
    add = -add;
  }
  if (width < min) {
    add = Math.abs(add);
  }
}, 1);
header {
  background: blue;
}
header::after {
  display: block;
  content: '';
  clear: both;
}
h1 {
  float: left;
}
.logo {
  float: right;
  background: white;
}
.wrapper {
  max-width: 500px;
}
<header>
  <div class="wrapper">
    <h1>Pagetitle</h1>
    <div class="logo">Logo</div>
  </div>
</header>

I would like something that works with this markup (the real code has some more elements in the header):

<header>
    <h1>Pagetitle</h1>
    <div class="logo">Logo</div>
</header>

Upvotes: 0

Views: 164

Answers (2)

acesmndr
acesmndr

Reputation: 8495

You could use the flex, flex-shrink flex-grow properties. Here are some useful links:

And here is the working example:

header {
  background: blue;
  width: 100%;
  display: flex;
 }
h1 {
 flex: 0 2 450px;
}
.logo {
  flex: 0 2 50px;
}
<header>
  <h1>Pagetitle</h1>
  <div class="logo">Logo</div>
</header>

Upvotes: 1

Gerard
Gerard

Reputation: 15786

Here a simple solution using flexbox

header {
  width: 100%;
  max-width: 500px;
  display: flex;
}

.logo {
  margin-left: auto; /* Pushes it as far to the right as possible. */
}
<header>
  <h1>Pagetitle</h1>
  <div class="logo">Logo</div>
</header>

Upvotes: 2

Related Questions