CODEWITHSUNDEEP
htmlcsscss-position
Lord Goderick
Lord Goderick

Reputation: 985

Cannot align elements when using 'position:fixed'

I can't seem to find a way to display elements inline when the position is fixed. Every other position works except for fixed positioning. Any suggestions?

I currently have five equal rectangles that are supposed to line up next to each and fill an entire view port. However, when I use fixed positioning, they all converge into one single spot.

My code is below:

HTML

<span class="reveal"></span><span class="reveal1"></span><span class="reveal2"></span><span class="reveal3"></span><span class="reveal4"></span>

CSS

.reveal {
    	width: 20%;
    	height: 100vh;
    	position: fixed;
    	display: inline-block;
    }
    
    .reveal1 {
    	width: 20%;
    	height: 100vh;
    	position: fixed;
    	display: inline-block;
    }
    
    .reveal2 {
    	width: 20%;
    	height: 100vh;
    	position: fixed;
    	display: inline-block;
    }
    
    .reveal3 {
    	width: 20%;
    	height: 100vh;
    	position: fixed;
    	display: inline-block;
    }
    
    .reveal4 {
    	width: 20%;
    	height: 100vh;
    	position: fixed;
    	display: inline-block;
    }
<html>
<header></header>
  <body>
    <span class ="reveal" > a</span > 
    <span class ="reveal1" > b</span > 
    <span class ="reveal2" > c</span > 
    <span class ="reveal3" > d</span > 
    <span class ="reveal4" > e</span >
  </body>
</html>

Upvotes: 1

Views: 64

Answers (4)

frnt
frnt

Reputation: 8795

That's because you have added position:fixed to all elements and when an element has a position of fixed it by default takes left and top as 0 i.e. aligning of element, so you could try somethings as below or wrap your code by a parent div and set it's position as fixed instead of all elements.

position:fixed - Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and don't move it when scrolled.

.reveal {
    width: 20%;
    height: 100vh;
    position: fixed;
    display: inline-block;
    background:#33f;
}

.reveal1 {
    width: 20%;
    height: 100vh;
    position: fixed;
    display: inline-block;
    background:#f2f;
    left:20%;
}

.reveal2 {
    width: 20%;
    height: 100vh;
    position: fixed;
    display: inline-block;
    background:#22f;
    left:40%;
}

.reveal3 {
    width: 20%;
    height: 100vh;
    position: fixed;
    display: inline-block;
    background:#f22;
    left:60%;
}

.reveal4 {
    width: 20%;
    height: 100vh;
    position: fixed;
    display: inline-block;
    background:#f2f;
    left:80%;
    }
<span class="reveal"></span><span class="reveal1"></span><span class="reveal2"></span><span class="reveal3"></span><span class="reveal4"></span>

Or by wrapping it into parent div as below,

#box{
  width:100vw;
  height:100vh;
  overflow:hidden;
  position:fixed;
  top:0;
  left:0;
}
.reveal {
    width: 20%;
    height: 100vh;
    display: inline-block;
    background:#33f;
}

.reveal1 {
    width: 20%;
    height: 100vh;
    display: inline-block;
    background:#f2f;
}

.reveal2 {
    width: 20%;
    height: 100vh;
    display: inline-block;
    background:#22f;
}

.reveal3 {
    width: 20%;
    height: 100vh;
    display: inline-block;
    background:#f22;
}

.reveal4 {
    width: 20%;
    height: 100vh;
    display: inline-block;
    background:#f2f;
    }
<div id="box">
<span class="reveal"></span><span class="reveal1"></span><span class="reveal2"></span><span class="reveal3"></span><span class="reveal4"></span>
</div>

Upvotes: 1

G.Ashok Kumar
G.Ashok Kumar

Reputation: 1633

It's not display: block, it's position: fixed makes div stretch relatively to browser window,

Just add another class. and split the contradiction in CSS between them

<div class="one"><span class="reveal"></span></div>
<style>
.reveal {
    width: 20%;
    height: 100vh;
    display: inline-block;
}

.one
{
position: fixed;
}
</style>

Try the above code

Upvotes: 0

Nelson Yeung
Nelson Yeung

Reputation: 3392

Just wrap everything in a new div and make that position fixed.

.fixed {
  position: fixed;
  width: 100%;
}

span {
  background: red;
}

.reveal {
  width: 20%;
  height: 100vh;
  display: inline-block;
}

.reveal1 {
  width: 20%;
  height: 100vh;
  display: inline-block;
}

.reveal2 {
  width: 20%;
  height: 100vh;
  display: inline-block;
}

.reveal3 {
  width: 20%;
  height: 100vh;
  display: inline-block;
}

.reveal4 {
  width: 20%;
  height: 100vh;
  display: inline-block;
}
<div class="fixed">
  <span class="reveal"></span><span class="reveal1"></span><span class="reveal2"></span><span class="reveal3"></span><span class="reveal4"></span>
</div>

Upvotes: 1

Gurtej Singh
Gurtej Singh

Reputation: 3234

Since you are using fixed positions, you have to provide left positions to each of the blocks. Please find updated code below, I added some background colors to help distinguish. CSS below : 

.reveal {
    width: 20%;
    height: 100vh;
    position: fixed;
    display: inline-block;
    background: red;
    left: 0;
}

.reveal1 {
    width: 20%;
    height: 100vh;
    position: fixed;
    display: inline-block;
    background: blue;
    left: 20%;
}

.reveal2 {
    width: 20%;
    height: 100vh;
    position: fixed;
    display: inline-block;
    background: green;
    left: 40%;

}

.reveal3 {
    width: 20%;
    height: 100vh;
    position: fixed;
    display: inline-block;
    background: orange;
    left: 60%;

}

.reveal4 {
    width: 20%;
    height: 100vh;
    position: fixed;
    display: inline-block;
    background: yellow;
    left: 80%;
}

Please let me know if this works. On a side, why are you fixed positioning in the first place?

Hope this helps.

Upvotes: 1

Related Questions