CODEWITHSUNDEEP
htmlcss
kev
kev

Reputation: 145

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

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>

Upvotes: 1

Views: 241

Answers (2)

Maciej Bledkowski
Maciej Bledkowski

Reputation: 693

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 ;)

Upvotes: 2

Smollet777
Smollet777

Reputation: 1646

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>

Upvotes: 3

Related Questions