How do I make a fixed element push other elements to the side when they overlap?
I don't want this:
Or this:
I want this:
I want to know how to make the elements collide or push so that I can easily align the elements without having to position them pixel by pixel.
Edit: I tried positioning a div to be fixed and displaying it as a block, but other elements were still overlapping it. Is it even possible to push elements away from a fixed element?
Is it even possible to push elements away from a fixed element?
I would say no. Not with this concept.
I can think of two solutions that I would not recommend.
Implement it with an iframe. But I would not recommend that.
Using JS to read out the width and assign it to the neighbouring element.
I updated my question after i got a good hint. For this example i added body height 200vh; that you can scroll down to see like it works.
body {
height: 200vh;
}
.verti {
background: red;
width: 200px;
height: 500px;
z-index: 10;
position: fixed;
top: 8px;
}
.hori {
background: green;
width: 500px;
height: 200px;
z-index: 1;
position: relative;
left: 200px;
}
<div class="w">
<div class="hori"></div>
<div class="verti"></div>
</div>
Tried using float? I'm pretty new to all this but this is what I got:
<body>
<div id="container">
<div id="fixed">
<p class="center-text white">Fixed <br>Element</p>
</div>
<div id="not-fixed">
<p class="center-text white">Not Fixed Element</p>
</div>
</div>
<style>
* {
padding: 0;
margin: 0;
font-family:arial;
}
.center-text {
text-align:center;
position:relative;
top:45%;
}
.white {
color:white;
}
#container {
margin:10px;
width:700px;
height:700px;
}
#fixed {
background-color:red;
position:fixed;
width:200px;
height:500px;
}
#not-fixed {
position:relative;
background-color:green;
width:500px;
height:200px;
float:right;
}
</style>
</body>
Related
Quick and easy question. I'd like to have a floating box that stays in the bottom right of a div (in HTML). How would I do this with css?
Thanks! (attached is what I want it to look like)
Hope this will be what you are looking for.
.navBar {
height: 100px;
background-color: blue;
}
.div1 {
position: relative;
height: 200px;
}
.div1 .box {
position: absolute;
bottom: 40px;;
right: 40px;;
width: 200px;
height: 40px;
background-color: red;
}
.div2 {
height: 100px;
background: green;
}
<div class="main-container">
<div class="navBar"></div>
<div class="div1"><div class="box"></div></div>
<div class="div2"></div>
</div>
what you're looking for is:
position:absolute;
bottom:0;
right:0; which will position things relative to the positioned parent.Note that the parent element (div) needs to have its position set as well. Most people do position:relative;
The values bottom:0 and right:0 means to move it 0px away from the bottom of the parent and 0 px away from the right side of the parent.
See the following w3schools for further information:
https://www.w3schools.com/css/css_positioning.asp
https://www.w3schools.com/css/tryit.asp?filename=trycss_position_absolute
Let's see if I can explain this correctly. I want a header, always visible AND content AND a footer that is hidden behind the content, that becomes visible when scrolled to the footer. Here's what I have so far...
#container {
height:100%;
width:100%;
position:relative;
}
#top {
height:25vh;
width:100%;
background-color:red;
position:fixed;
top:0;
}
#content {
height:120vh;
width:100%;
background-color:green;
position:relative;
}
#bottom {
height:35vh;
width:100%;
background-color:blue;
position:fixed;
bottom:0;
}
<div id="container">
<div id="top">
</div>
<div id="content">
</div>
<div id="bottom">
</div>
</div>
What this code currently does: Header is hidden behind content and footer is always visible overlapping content.
Here is the current test page... http://next-factor.com/test-layout.php
Much help is greatly appreciated. Thank You!
give a z-index in #top
#top {
background-color: red;
height: 25vh;
position: fixed;
top: 0;
width: 100%;
z-index: 999;
}
it will make header visible.
and remove position:fixed from #bottom
#bottom {
background-color: blue;
bottom: 0;
height: 35vh;
width: 100%;
}
hope this will solve your problem
here is the working example http://jsfiddle.net/a3ru9d4d/
in this example I have added padding top in the container so that content inside the container will not hide behind the header.
I think you want something like this:-
*{margin:0;padding:0}
#container {
height:100%;
width:100%;
position:relative;
}
#top {
height:25vh;
width:100%;
background-color:red;
position:fixed;
top:0;
z-index: 1;
}
#content {
height:120vh;
width:100%;
background-color:green;
position:relative;
}
#bottom {
height:35vh;
width:100%;
position:relative;
z-index:-2;
background-color:#31353a;
}
<div id="top">
</div>
<div id="content">
</div>
<div id="bottom">
Footer
</div>
</div>
I hope it will helps you.
Take a look at this. I've introduced two new CSS definitions that achieve what I think you want.
https://jsfiddle.net/b8my8h5j/
I added z-index definitions. The higher the index, the higher it is in a non-static positioning stack. the content header has 30, so it appears above 20 for the content, but the footer has 10, so t's always at the back.
I added a margin-bottom to the content so that there's space for you to scroll down and have the footer be completely visible.
Update:
https://jsfiddle.net/b8my8h5j/1/
Also cleared padding/margin on the body and html tags so that the blocks fit together snugly.
Added a margin-top to the content so that the top of the green box is visible.
I think this produces what you want: z-indexes on all three, and making room at the bottom of content for the footer to show completely when you scroll to the end of the page
#container {
height:100%;
width:100%;
position:relative;
}
#top {
height: 25vh;
width: 100%;
background-color: red;
position: fixed;
top: 0;
z-index: 3;
}
#content {
height: 120vh;
width: 100%;
background-color: green;
position: relative;
margin-bottom: 33vh;
z-index: 2;
}
#bottom {
height: 35vh;
width: 100%;
background-color: blue;
position: fixed;
bottom: 0;
z-index: 1;
}
<div id="container">
<div id="top">
</div>
<div id="content">
</div>
<div id="bottom">
</div>
</div>
members,
I'm having troubles with my HTML code. I am trying to make somekind of youtube. But when I try to create this:
How it should look1
But this is how it looks when I try to make it in HTML:
http://jsfiddle.net/4u64jb5w/3/
<div class="Video">
<div class="BlackRect"></div>
<div class="Video-content">
<h2 class="Titel">This is a video title..</h2>
<div class="Video-footer">
Gebruikersnaam
</div>
</div>
</div>
.Video {
display:block;
position:relative;
margin-top: 100px;
}
.BlackRect{
Width:250px;
height:150px;
background-color:#000;
float:left;
}
.Titel {
color: #34495e;
display:block;
font-size: 25px;
float:left;
position:absolute;
top:0;
margin-left: 270px;
padding: 0;
}
.Video-content{
/*nothing to see here yet*/
}
.Video-footer {
position: absolute;
bottom: 0px;
left:0px;
}
I've noticed while inspecting the code in google chrome that the divs all have a width but no height. I think it has something to do with my positioning in CSS but I don't know exactly what I did do wrong.
How can I get this to like the picture I posted?
Any help is appreciated!
Thank you in advance
UPDATE!:
When I give the divs a static height I get the belonged result but how is it possible that I have to do so?
You've given position: absolute; for child elements like title1 and footer. But the immediate parent is position: static; so they were misaligned.
Other than that, instead of having margin-left for video-content, it's preferable to make it float left. it will be very generic and also can make it responsive easily.
.Video {
display:block;
position:relative;
margin-top: 100px;
}
.BlackRect{
Width:250px;
height:150px;
background-color:#000;
float:left;
}
.Video-content {
float: left;
position: relative;
margin-left: 10px;
height: 100%;
min-height: 150px;
}
.Titel {
color: #34495e;
display:block;
font-size: 25px;
margin-top: 0px;
}
.Video-footer {
position: absolute;
bottom: 0px;
}
DEMO
You've got compounded problems here. The first one is that elements that are position:absolute; do not create space inside their parent container. So first your a tag collapses because .Tite1 doesn't take up space, and then the .video-content container collapses because neither does .Video-footer. This equals zero height for that entire block.
Your second problem is that elements that are floated aren't by default considered in their parent's stacking context. So if all the elements in a parent are 'floated', the parent element has no height. This is the case for your .BlackRect element.
To break down:
<!-- no height because all children/grandchildren produce 0 height -->
<div class="Video">
<!-- doesn't create height because floated -->
<div class="BlackRect"></div>
<!-- doesn't create height because all children/grandchildren pos absolute -->
<div class="Video-content">
<!-- collapses because .Tite1 doesn't create height -->
<a href="#">
<!-- doesn't create height because position absolute -->
<h2 class="Titel">This is a video title..</h2>
</a>
<!-- doesn't create height because position absolute -->
<div class="Video-footer">
Gebruikersnaam
</div>
</div>
</div>
There isn't much to be done if all the elements in .Video-content are positioned absolute, but you can force .BlackRect to create space through a few different methods, the easiest is by applying overflow:hidden to the .Video wrapper.
.Video {
display:block;
position:relative;
margin-top: 100px;
overflow:hidden;
}
You do not need floats and the only absolutely positioned element should be the one you want at the bottom
.Video {
display: block;
position: relative;
margin-top: 100px;
}
.Video a {
text-decoration: none;
}
.BlackRect {
width: 250px;
height: 150px;
background-color: #000;
}
.Titel {
color: #34495e;
font-size: 25px;
font-style: italic;
}
.Video-content {
position: absolute;
left: 270px;
right: 0;
top: 0;
bottom: 0;
}
<div class="Video">
<div class="BlackRect"></div>
<div class="Video-content">
<h2 class="Titel">This is a video title..</h2>
<div class="Video-footer">
Gebruikersnaam
</div>
</div>
</div>
You're halfway there. Instead of floating .Titel you need to float the .Video-content, since it's a sibling of .BlackRect:
.Video-content{
float:left;
margin-left:20px;
height: 150px;
position:relative;
}
Notice I've given it a margin so the text stands off from the video, given it the same height as .BlackRect, and positioned it relative. I positioned it relative to do a little trick with the footer:
.Video-footer {
position:absolute;
bottom:10px;
}
This may have been where you were going with the absolute and relative positioning, but let me explain what I did anyway: When a parent div has a position of relative, any child div of the parent with a position of absolute and will be positioned absolutely within that parent container only (in other words, absolute relative to the parent, not to the page). It looks like that's what you were after, the code just needed to be simplified.
Everything else just needed to be simplified by removing unnecessary selectors:
.Video {
margin-top: 100px;
}
.BlackRect{
width:250px;
height:150px;
background-color:#000;
float:left;
}
.Titel {
color: #34495e;
font-size: 25px;
margin-top:10px;
}
/*to remove the underline*/
.Video-content a{
text-decoration:none;
}
Here's an updated jsFiddle
Did Few twerks and came up with this
Check Fiddle Fiddle
The CSS:
.Video {
position:absolute;
display:block;
background-color:gray;
width:100%;
height:60%;
}
.BlackRect{
Width:250px;
height:150px;
background-color:#000;
float:left;
}
.Titel {
color: #34495e;
display:block;
font-size: 25px;
float:left;
position:absolute;
top:0;
margin-left: 270px;
padding: 0;
}
.Video-content{
/*nothing to see here yet*/
}
.Video-footer {
margin-top:30%;
float:right;
}
I've been trying to get the the left and write columns to stick to the bottom of the green box like this http://i.imgur.com/zxChJx5.png but after an hour I'm still having trouble, if anyone could help that would be most appreciated, thank you very much http://jsfiddle.net/jybu6j47/
<!DOCTYPE html>
<html>
<head>
<style>
.well {
height: 300px;
width: 50%;
background-color:green;
}
.something {
background-color: yellow;
}
.left123 {
width: 50%;
float: left;
background-color: pink;
}
.right123 {
width: 50%;
float: right;
text-align:right;
background-color:red;
</style>
</head>
<body>
<div class="well">
Filler
<div class="something">
<div class="left123">Left</div>
<div class="right123">Right</div>
</div>
</div>
</body>
</html>
You need to position:relative; the container, and position:absolute; the contents, then set bottom: 0 on the contents like this:
http://jsfiddle.net/jybu6j47/1/
So it should look like this:
.well {
height: 200px;
width: 50%;
background-color:green;
position:relative;
}
.something {
position:absolute;
bottom:0;
width:100%;
background-color: yellow;
}
Position absolute tells an element exactly where to be, relative to it's closest position:relative (or absolute – or a couple of other properties come to think of it) container. In this case, giving it bottom:0 is effectively saying "Put me zero pixels from the bottom of the container".
So, I just discovered this today and I couldn't find it this solution anywhere on Stackoverflow, so I thought I'd share it. Let me know if it's been posted somewhere else and I'll mark it as duplicate.
As far as I know centering an element wider than it's parent is a fairly common problem, the only solutions I've come across make use of Javascript, which turns out as a lengthy, messy bit of code that's annoying to maintain across lots of elements using this functionality.
The problem HTML:
<div class="container-fluid" >
<div class="center-me-fixed">
<span> Center </span>
</div>
</div>
CSS:
.container-fluid {
max-width: 400px;
width: 100%;
height: 100%;
display:block;
margin:auto;
}
.center-me-fixed {
width: 500px;
height:50px;
text-align: center;
}
The solution:
Use absolute positioning on the child you need to center, mess with the left/right values and set margin to auto like so:
CSS:
.center-me-fixed {
position:absolute;
left: -1000%;
right: -1000%;
margin: auto;
display: block;
width: 500px;
height: 50px;
}
Make sure the parent's container position is relative:
.container-fluid {
position: relative;
width: 100%;
height: 100%;
display:block;
margin:auto;
}
And that's it! I'm not sure how this works, if someone could explain that would be cool.
jsFiddle
I searched on the web and the best solutions i've found is this
Fiddle
css:
html, body {
height: 100%;
}
div.container-fluid {
border:1px solid blue;
max-width:400px;
margin:0px auto;
min-height: 100%;
}
div.container-fluid .center-me-fixed {
position:relative;
right:50%;
text-align:center;
}
div.container-fluid .center-me-fixed span {
border:1px solid green;
width: 500px;
height:50px;
display:inline-block;
margin-right:-100%;
}
html:
<div class="container-fluid">
<div class="center-me-fixed">
<span>
this should be centered
</span>
</div>
</div>
If this solution does not suit your needs, i apologize for making you lose time.