How to position to bottom right corner without overlapping

Question

How do I stop the white 'menu' div from overlapping the 'logo' div when the page is too narrow?

<style>
.container {
  height: 60px;
  background: yellow;
  position: relative;
}
.menu {
  position: absolute;
  right:0;
  bottom:0;
  background: white;
}
.logo {
  width: 300px;
  height: 60px;
  background: #99cc99;
}
</style>

<div class="container">
  <div class="menu">
    menu menu menu menu menu
  </div>
  <div class="logo">
    logo
  </div>
</div>

See this fiddle:
https://jsfiddle.net/932tL785/1/

I'd like the 'menu' to wrap when there's not enough room, but to unwrap when the window is wide enough not to overlap.

The bottom edge of the menu needs to be aligned with the bottom edge of the logo. The right edge of the menu needs to be aligned with the right edge of the container.

The logo has a fixed width & height, but I cannot rely on a specific height for the menu as it's dependent on font size.

score 1 · Accepted Answer · edited May 23 '17 at 12:30

1

You can achieve the layout simply and efficiently with CSS flexbox.

HTML (no changes)

CSS

.container {
  height: 60px;
  background: yellow;
  display: flex;
  justify-content: space-between;
}

.menu {
  background: white;
  order: 1;
  align-self: flex-end;
}

.logo {
  width: 300px;
  height: 60px;
  background: #99cc99;
}

DEMO

Since it looks like you want to responsively align a group of nav items to the right and a logo to the left, this other flexbox answer may help you, as well:

Methods for Aligning Flex Items along the Main Axis

Note that flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, post your CSS in the left panel here: Autoprefixer.

edited May 23 '17 at 12:30

Community

1
1

answered Dec 05 '15 at 20:12

Michael Benjamin

346,931
104
581
701

wow that's magic, I haven't touched any CSS for a few years... this flex box stuff is what it always should have been – Anentropic Dec 05 '15 at 21:13
is it the `align-self: flex-end` which achieves the 'align to bottom right corner' effect? – Anentropic Dec 05 '15 at 21:16
1

Partially correct on the [**`align-self`**](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self). It aligns to bottom. Try out the other values: `flex-start`, `center`, `stretch` and `baseline`. – Michael Benjamin Dec 05 '15 at 21:19
1

Getting the menu to the right edge is done with [**`justify-content: space-between`**](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content). Illustrations and explanations here: http://stackoverflow.com/a/33856609/3597276 – Michael Benjamin Dec 05 '15 at 21:24

score 0 · Answer 2 · answered Dec 05 '15 at 20:09

I am not sure what you are asking, but tell me if i am anywhere near. I updated the fiddle.. putting .menu as position:relative; and the menu div in the end of the html code.

<div class="container">
<div class="logo">
  logo
</div>
</div>
<div class="menu">
  menu menu menu menu menu
</div>

and the css

.container {
  height: 60px;
  background: yellow;
  position: relative;
}
.menu {
  position: relative;
  bottom:0;
  background: white;
}
.logo {
  width: 300px;
  height: 60px;
  background: #99cc99;
}

How to position to bottom right corner without overlapping

2 Answers2