Position a div in the center and add a right menu to it

Question

Position a div in the center and add a right menu to it

Looking to centralize a main div and add a fixed menu to the right side of it. The goal is for the main div to remain centered while the right menu "sticks" to the center div.

At the moment, I've used flex to center the div, but it has resulted in both items being centered (meaning the main div isn't truly at the center).

This is the layout I want:

https://i.sstatic.net/7Bqy5.png

Current layout:

https://i.sstatic.net/PrZze.png

The code I currently have (using React with styled components) looks like this:

Container:

const DivContainer = styled.div`
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 60;
  width: 100%;
`;

Main Div:

const MainDiv = styled.div`
  width: 300px;
  padding: 35px 15px;
`;

Menu div:

const MenuDiv = styled.div`
  display: flex;
  cursor: pointer;
  flex-shrink: 0;
  flex-direction: column;
  margin-top: 85px;
  order: 10;
`;

This is how it renders:

<DivContainer>
  <MainDiv />
  <MenuDiv />
</DivContainer>

javascript html css reactjs

Answer 1

Answer №1

One option is to nest the sidebar within the container and use a negative margin to push it out

body,
html {
  height: 100%;
  margin: 0;
}

.container {
  height: 100%;
  width: 100%;
  border: 2px solid yellow;
  border-radius: 5px;
  box-sizing: border-box;
  margin: 5px;
  display: grid;
  place-items: center;
}

.center {
  width: 200px;
  height: 200px;
  border: 2px solid yellow;
  border-radius: 5px;
}

.sidebar {
  width: 50px;
  height: 200px;
  outline: 2px solid magenta;
  border-radius: 5px;
  /* important */
  float: right;
  margin-right: -50px;
}

<div class="container">
  <div class="center">
    content
    <div class="sidebar">
      sidebar
    </div>
  </div>
</div>

ps: for the snippet click full page

Answer 2

One option is to nest the sidebar within the container and use a negative margin to push it out

body,
html {
  height: 100%;
  margin: 0;
}

.container {
  height: 100%;
  width: 100%;
  border: 2px solid yellow;
  border-radius: 5px;
  box-sizing: border-box;
  margin: 5px;
  display: grid;
  place-items: center;
}

.center {
  width: 200px;
  height: 200px;
  border: 2px solid yellow;
  border-radius: 5px;
}

.sidebar {
  width: 50px;
  height: 200px;
  outline: 2px solid magenta;
  border-radius: 5px;
  /* important */
  float: right;
  margin-right: -50px;
}

<div class="container">
  <div class="center">
    content
    <div class="sidebar">
      sidebar
    </div>
  </div>
</div>

ps: for the snippet click full page

Answer 3

Answer №2

If you want to achieve centering without affecting the layout, one way to do it is by using a zero-width div with overflow visible:

#container {
    display: flex;
    justify-content: center;
}

#content {
    width: 50%;
}

#spacer {
    width: 0;
    overflow: visible;
}

#sidebar {
    width: 100px;
}

<body>
  <div id="container">
    <div id="content">
        Centered content
    </div>
    <div id="spacer">
        <div id="sidebar">
            Sidebar content
        </div>
    </div>
  </div>
</body>

Answer 4

If you want to achieve centering without affecting the layout, one way to do it is by using a zero-width div with overflow visible:

#container {
    display: flex;
    justify-content: center;
}

#content {
    width: 50%;
}

#spacer {
    width: 0;
    overflow: visible;
}

#sidebar {
    width: 100px;
}

<body>
  <div id="container">
    <div id="content">
        Centered content
    </div>
    <div id="spacer">
        <div id="sidebar">
            Sidebar content
        </div>
    </div>
  </div>
</body>

Answer 5

Answer №3

Enclose it in a separate div with the same width as the main div and establish a minimum width for its child.

.wrapper {
      display: flex;
      width: 300px;
    }
    .container {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
    }
    .main {
      width: 300px;
      min-width: 300px;
      min-height: 200px;
      background-color: aquamarine;
    }

    .menu {
      width: 80px;
      min-width: 80px;
      min-height: 200px;
      background-color: cadetblue;
      position: relative;
    }

<div class="container">

  <div class="wrapper">
    <div class="main"></div>
    <div class="menu"></div>
  </div>

</div>

Answer 6

Enclose it in a separate div with the same width as the main div and establish a minimum width for its child.

.wrapper {
      display: flex;
      width: 300px;
    }
    .container {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
    }
    .main {
      width: 300px;
      min-width: 300px;
      min-height: 200px;
      background-color: aquamarine;
    }

    .menu {
      width: 80px;
      min-width: 80px;
      min-height: 200px;
      background-color: cadetblue;
      position: relative;
    }

<div class="container">

  <div class="wrapper">
    <div class="main"></div>
    <div class="menu"></div>
  </div>

</div>

Position a div in the center and add a right menu to it

Answer №1

Answer №2

Answer №3

Similar questions

Trouble connecting: MongoDB Node.js client hangs during connection attempt

Arranging blocks within blocks? Placing additional text underneath a block

The AJAX functionality is not triggering the necessary C# controller method

Scripting method to transfer multiple subdirectories using a cpanel.yml file (excluding the use of the wildcard)

How do I limit search bar queries to only display results from my website and provide suggestions?

JavaScript's regular expression does not fully match until the end of the given string

Integration issues in RetinaJs and jChartFX collaboration

Storing data retrieved from a GraphQL response into the sessionStorage: A step-by-step guide

Manipulating arrays in JavaScript through HTML processing

Issue with alignment of Bootstrap inline form field on top and bottom levels

There seems to be an issue with d3js bar charts as they are not displaying on the screen and there

What is the most effective way to halt all AJAX processes on a webpage with jQuery?

Invoking an HTML popup within a JavaScript function

React server initialization in progress

Utilizing AJAX in jQuery Mobile for Collapsible Content

There is an irritating 5px gap between the divs in the Avada WordPress theme. While using margin-top: -5px helps to reduce this spacing, padding-top: -5

BeautifulSoup: Leveraging find_all() to locate particular strings within HTML documents

Dynamic burger menu navigation

Tips for utilizing temporary variables in JavaScript

Ways to retrieve JSON data using getRequest