How to center a DIV in the remaining space on RHS of another DIV

Question

I'd like a left hand div for navigation, which can be fixed width. I'd like another div to be centered in the remaining space on the right hand side.

I thought I had it with the code here, but the centering is taking place across the full width, rather than just being centered within the right hand side.

I tried this but the centering ignores the floating LHS block. I tried making the divs have style="display:inline-block", but this didn't work either.

Any ideas how can I fix this please?

#left {
  float: left;
  width: 200px;
  height: 200px;
  background-color: cyan;
}

#right {
  width: 100%;
  height: 200px;
  background-color: green;
  border: 1px solid red;
}

#centrethis {
  width: 400px;
  height: 100px;
  background-color: yellow;
  margin-left: auto;
  margin-right: auto;
}

<div id="left">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
</div>
<div id="right">
  right
  <div id="centrethis">
    centre this
  </div>
</div>

Smollet777 · Answer 1 · 2018-12-10T16:39:51.357

I removed float and add display:flex to the body.

You can also center element pretty easily with flexbox

body {
  display: flex
}

#left {
  width: 200px;
  height: 200px;
  background-color: cyan;
}

#right {
  display: flex;
  width: 100%;
  height: 200px;
  background-color: green;
  border: 1px solid red;
}

#centrethis {
  align-self: center;
  width: 400px;
  height: 100px;
  background-color: yellow;
  margin-left: auto;
  margin-right: auto;
}

<div id="left">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
</div>
<div id="right">
  <div id="centrethis">
    centre this
  </div>
</div>

This works perfectly on FF and Chrome and IE11, but I'm afraid for my purposes I cant use flex as it doesnt work on IE9 and I'm going to have to support that. Thanks anyway. — kev, Dec 10 '18 at 17:51

Maciej Bledkowski · Accepted Answer · 2018-12-10T16:54:06.450

2

Maybe this will help you.

#left {
  z-index: 10; /*to put this above #right element*/
  position: sticky; /*to put this element out of regular DOM order*/
}
#right {
  position: relative; /*makes element relative to his parent*/
  left: 200px; /*moves element to the right site*/
  width: calc(100% - 200px); /*shrinks div*/
}

Test this code on JSFiddle.

I hope that I helped you ;)

edited Dec 10 '18 at 16:54

answered Dec 10 '18 at 16:42

Maciej Bledkowski

604
9
26

1

Thanks very much Maciej, it seems to work well enough. One feature which is not too good is that when the window in made narrower, it reaches a point where the #centrediv jumps out of and below the #left and #right divs. I'm not sure why it does this, but I think I have enough to get by on. – kev Dec 10 '18 at 17:58
Hi kev, I was trying to repair this, but I'm also don't know what went wrong :( If you want to make auto resizing thing, you can use a percentage value or @media, but this also does not solve the problem. I think that the easiest way(at least for me) to make things working well, is to rebuild site using flex-box. I'm sorry :/ – Maciej Bledkowski Dec 10 '18 at 18:22

How to center a DIV in the remaining space on RHS of another DIV

2 Answers2