Guren Guren - 1 month ago 5
CSS Question

My sidebar and mainContent divs are separating when the window is resized; how to fix?

when I resize my window for larger screens, the sidebar div seems to move along with the window, creating a space between the mainContent div and the sidebar Div.

Goal: I would like for both divs to stay in the middle of the website, next to each other, regardless of window size (think Facebook).

Can someone help me? Thank you.



* {
background-color: black;
}
.wrapper {
display:flex;
z-index: 0;
}
.topDiv{
background-color: rgb(255,255,255);
width:100%;
height: 100px;
position:fixed;
top:0;
left:0;
z-index: 1;
}
.Nav{
background-color: rgb(60,60,60);
width:100%;
height:50px;
position:fixed;
top:100px;
left:0;
z-index: 2;
}
.content{
background-color: rgb(255,255,255);
width:100%;
height:100%;
position:fixed;
top:150px;
left:0;
z-index:3;
}
.mainContent{
background-color: rgb(125,125,125);
position:fixed;
width:65%;
max-width: 720px;
height:100%;
left:10%;
z-index: 4;
}
.sidebar{
background-color: rgb(160,160,160);
position:fixed;
width:15%;
max-width: 240px;
height:100%;
right:10%;
z-index: 5;
}
.footer{
background-color: rgb(51, 56, 60);
position: fixed;
width: 100%;
height:75px;
bottom:0;
left:0;
z-index: 6;
}

<!DOCTYPE html>
<html>
<!-- DRAFT HOUSE INC. -->
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="wrapper">
<div class="topDiv">

</div>
<div class="Nav">

</div>
<div class="content">
<div class="mainContent">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque malesuada turpis ex, ut egestas nisi tincidunt non. Nulla auctor ullamcorper lectus, nec aliquet nulla pulvinar et. Etiam sit amet tortor metus. Morbi ut molestie quam, non vestibulum lorem. Sed lectus diam, malesuada sit amet maximus non, fermentum a justo. Proin leo neque, egestas at enim at, consequat ultricies lorem. Curabitur in nisi velit. Quisque quam tortor, blandit sed tellus ut, sollicitudin suscipit risus. Ut sit amet pretium est. Cras lobortis diam vitae varius auctor. Ut interdum felis et quam lacinia gravida.

Nulla varius fermentum leo ut porttitor. Aenean viverra commodo ante ut rutrum. Morbi sed pellentesque felis. Curabitur fringilla justo massa, porta accumsan sem mollis et. Aenean eu massa id justo semper facilisis in ac ligula. Aenean laoreet, arcu eget condimentum consequat, turpis eros dignissim erat, in vehicula dui arcu ac elit. Donec sit amet massa accumsan, viverra tellus quis, tincidunt nibh. Donec in justo at sem rhoncus blandit id sit amet ipsum.
</div>
<div class="sidebar">

</div>
</div>
<div class="footer">

</div>
</div>
</body>
</html>




Answer

what you could do is remove the max-width and set the width of mainContent 66% check it here.

https://jsfiddle.net/estvwpvz/

.mainContent{
  background-color: rgb(125,125,125);
  position:fixed;
  width:66%;
  height:100%;
  left:10%;
  z-index: 4;
}