I am working on a project in react using the MUI library. I have a main page layout which essentially looks like

<Container>
  Page content
</Container>

I want the content to be aligned in the header. If I use the same format, that will work perfectly fine. However, I want to add an additional element outside the container. After adding this element, the container will no longer center the content because it takes into consideration the space taken up by the additional content.

How am I able to centre the content in the same way while adding this additional component?

In reality, the project is much more complicated with tons of components and several nested boxes, containers, stacks and grids. But I have attempted to capture here the essential problem that I am unable to solve.

To clarify, in the main body I have the structure shown above. In an additional element (a header), I want

{/* This element is off to the side */}
<SideElement />

{/* This should be centered with respect to the entire page */} 
<Container>
  <MainContent />
<Container />

I am working on a project in react using the MUI library. I have a main page layout which essentially looks like

<Container>
  Page content
</Container>

I want the content to be aligned in the header. If I use the same format, that will work perfectly fine. However, I want to add an additional element outside the container. After adding this element, the container will no longer center the content because it takes into consideration the space taken up by the additional content.

How am I able to centre the content in the same way while adding this additional component?

In reality, the project is much more complicated with tons of components and several nested boxes, containers, stacks and grids. But I have attempted to capture here the essential problem that I am unable to solve.

To clarify, in the main body I have the structure shown above. In an additional element (a header), I want

{/* This element is off to the side */}
<SideElement />

{/* This should be centered with respect to the entire page */} 
<Container>
  <MainContent />
<Container />

• reactjs
• material-ui

• 1 Try using position: absolute or grid layout where you need overlapping or non-intrusive side elements. – shruti Commented Mar 24 at 8:12

1 Answer 1

It is difficult to answer without the code but as you saying and considering you are using MUI try using box and positioning

<Box sx={{ position: 'relative' , width: '100%' , height: 'auto' }}>
        {/* Side element is absolutely positioned */}
        <Box sx={{ position: 'absolute' , left: 0, top: '50%' , transform: 'translateY(-50%)' }}>
            <SideElement />
        </Box>
        {/* Main container is centered */}
        <Container sx={{ textAlign: 'center' }}>
            <MainContent />
        </Container>
</Box>

Instead of container you can add a box too