CODEWITHSUNDEEP
htmlcss
Shah Quadri
Shah Quadri

Reputation: 239

fixed div overlapping adjacent div on horizontal scroll

I am building a template which has a fixed header and a fixed side bar on the left. My issue is that when I shorten the window and scroll horizontally, the fixed div overlaps the adjacent '.content'.

I don't want the fixed '.sidebar1' to overlap '.content' div when I scroll horizontally. How do I fix this?

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

.header
{
	width:100%;
	height:46px;
	position:fixed;
	top:0;
	background:blue;
}

.page_wrap
{
	width:1040px;
	display:block;
	margin:70px auto 0;
	background:purple;
}

.content
{
	width:500px;
	height:1060px;
	display:inline-block;
	background:red;
	color:white;
	margin:5px;
	vertical-align:top;
	margin-left:270px;
}

.sidebar1
{
	display:inline-block;
	width:250px;
	height:500px;
	position:fixed;
	top:70px;
	background:pink;
	margin:5px;
	vertical-align:top;
}


.sidebar2
{
	display:inline-block;
	width:250px;
	background:pink;
	margin:5px;
	vertical-align:top;
}

.footer
{
	width:1040px;
	height:50px;
	margin: 20px auto 0;
	text-align:center;
	background:magenta;
}
<!DOCTYPE HTML>
<html>
	<head>
		<title>Temp</title>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="temp.css">
	</head>	
	
	<body>
		
		<div class="header">
			Header Content
		</div>
		
		<div class="page_wrap">
			
					<div class="sidebar1">
						sidebar 1
						<div class="test"></div>
					</div>
					
					<div class="content">
						Article Content
					</div>
					
					<div class="sidebar2">
						sidebar 2
					</div>
		</div>
		<div class="footer">Footer</div>
		
	</body>
</html>

Upvotes: 2

Views: 2208

Answers (2)

jensenmk89
jensenmk89

Reputation: 142

The reason for this is that fixed technically makes it take up no space on the page.

I noticed you have fixed width and height on your content, which is probably your first problem. Fixed width on large containers is typically a bad idea, as it breaks everything else on your page, or prevents it from displaying the way you want.

The end result should look something like:

.content{

width:500px; height:1060px;

margin-left:270px;
display:inline-block;
background:red;
color:white;
margin:5px;
vertical-align:top;

    }

If you need it to scroll horizontally for some reason, then I would say set position:fixed; on the div.content and add a property to your HTML wrap="off" and see if that does what you want it to.

Hopefully this helped. Cheers.

Upvotes: 1

Muhammad Hamada
Muhammad Hamada

Reputation: 725

I hope I understood your question

Check https://jsfiddle.net/LeoAref/47p6r6hq/

<header>Header</header>
<aside>Side</aside>
<section>

   <div class="wide">
      My Wide Content
   </div>

</section>

CSS

header {
   height: 30px;
   line-height: 30px;
   background: red;
   color: #fff;
   text-align: center;
   position: fixed;
   top: 0;
   width: 100%;
   left: 0;
}

aside {
   top: 30px;
   bottom: 0;
   width: 300px;
   background: blue;
   color: #fff;
   text-align: center;
   position: fixed;
   left: 0;
}

section {
   top: 30px;
   bottom: 0;
   left: 300px;
   right: 0;
   background: #000;
   color: #fff;
   text-align: center;
   position: fixed;
   overflow-x: scroll;
}

.wide {
   color: #000;
   width: 1500px;
   background: yellow;
   height: 50px;
}

Upvotes: 1

Related Questions