Position div below fixed div and to the right of another fixed div

1053 views html
9

I looked at some of the other answers for this, but none of them seem applicable because, although my fixed divs' dimensions are fixed, they're unknown until the page actually renders.

I have a fixed header div, followed by another div. The second div contains a sidebar div, and finally the content div:

<header>stuff</header>
<div id="wrapper">
    <nav>sidebar stuff</nav>
    <div id="content">Content</div>
</div>

The wrapper uses display: flex to put the sidebar and the content divs side by side.

My current goal is to fix the header and the sidebar when scrolling. The problem is that position: fixed takes the header and sidebar out of the regular flow, which makes it hard to position the content div relative to them. As a bonus, I don't know the dimensions of the header/sidebar until they render, so I can't just do position: absolute on the content div.

I am using React, and therefore would like to avoid manual DOM manipulation (e.g. jQuery).

answered question
Revti Shah

Please check code. If any changes let me know.

Ivan86

Please post the CSS for the elements and for body.

Bluefire

@Ivan86 I am open to changing anything about my CSS - as long as height for the header is not specified (its height is derived from the content + padding).

Add a Comment

1 Answer

2

Here is the code. Hope it will help you. If any changes let me know.

*{ 
    margin: 0px;
}

#sidebar {
	/*Strictly Necessary */
	position:fixed; 
	height: 100%;
	width:30%;
	margin: 0px;  

  /*Aesthetics*/
  background: lightblue; 
  border-radius: 7px;  
}


#rightSideWrapper {
	/*Strictly Necessary */
	width:70%; 
	float: right;

	/*Aesthetics*/
	background: black;	
}

header {
	/*Strictly Necessary */
	position: fixed;
	width: 70%;	
	height: 100px; /*Adjust the hight to your purposes*/
	
	/*Aesthetics*/
	background: lightSalmon;
	border-radius: 7px;
}

.ContentBox{
	margin-top: 100px; /*The height of the   header*/
	display:flex;
	flex-flow: row wrap;
} 

main, section, footer {
    /*Aesthetics*/
	 background: lightgray; 
	 border-radius: 7px; 
	 margin: 5px; 
	 padding: 20px;
}

main {
  /*Strictly Necessary */
  height: 400px;
  order: 1;
  flex: 0 1 100%; 
	
}

section {
  /*Strictly Necessary */
   height: 400px;
   order: 2;
   flex: 0 1 100%;
	
}

footer {
  /*Strictly Necessary */
  height: 100px;
  order: 3;
  flex: 0 1 100%;
	
}
<html>
<!--...-->
	<head>
		<meta charset="utf-8">
		<title> Ghost </title>
		<link rel="Stylesheet" href="css/style.css">
	</head>
  
	<body>
    
		<div id="sidebar">
			Side Content
		</div>
		<div id="rightSideWrapper">
			<header> 
				Header 
			</header>
			
			<div class="ContentBox"><!--. poner en minusculas.-->
				<main> 
					Main Content 
				</main>

				<section>
					Section Content
				</section>

				<footer> 
					Footer 
				</footer>

			</div>
			
		</div>

	</body>
	

	

</html>

Either you can use this code.

https://jsfiddle.net/gqsaedr7/2/

* {
  padding: 0;
  margin: 0;
}

header {
  background: black;
  padding: 15px;
  position: fixed;
  width: 100%;
}

#wrapper {
  display: flex;
  height: 100vh;
  padding-top: 50px;
}

#navbar {
  background: pink;
  width: 20%;
  position: fixed;
  height: 100vh;
}

#content {
  background: lightblue;
  width: 100%;
  padding-left: 20%;
}
<header>Header</header>
<div id="wrapper">
  <nav id="navbar">sidebar stuff</nav>
  <div id="content">
    <div class="class-1">
      ABC
    </div>
    <div class="class-2">
      XYZ
    </div>
  </div>
</div>

posted this

Please login first before posting an answer.