I was wondering if this is possible with ONLY css.
I have a logo container that is positioned absolute. Since this logo can be any width and height it's positioned this way. Next to the logo div I have a navigation div. This element is positioned relative. Is there any way to keep the navigation exactly next to the logo div when that can have any width?
<div class="logo">
<img src="logo.png" class="img-responsive">
</div>
<div class="navigation">
<ul>
<li>....</li>
// etc etc....
</ul>
</div>
CSS
.logo {
min-height: 80px;
padding: 10px 0;
position: absolute;
max-width: 330px;
}
.nav-wrap {
position:relative
background: #ffffff;
float:left;
width:100%;
}
So what I tried is to use calc() but that doesn't work since you can't do something like(???)
calc(100% - (.logo))
I guess display:table won't work because there's an absolute element.
I can use jQuery but that would create a jumpy effect on the navigation.
So the question:
When a div can have any width and is p[ositioned absolute, how can you position an other div right next to it?
Any help greatly appreciated.
Related
Say I have three divs like following:
<div class="wrapper">
<div class="container">
container1
<div class="element">
fixed
</div>
</div>
<div class="container2">
container2
</div>
</div>
I want div: element to be fixed when it is inside div: container, but its position should become absolute when div: container2 becomes visible, it should not overlap with div - container2, but scroll away at that time with div: container.
A pure CSS solution is preferable, but if not possible I may go for a JS or jquery solution. I have created a fiddle for this, and tried some solution suggested here, which are not working.
What I would suggest is to use javascript to recognize when the scrolling is at a certain point with window.pageYOffset
When it reaches your desired window Y Offset you can start an event that modifies the css value of the positioning from fixed to absolute (by setting the parent container to relative) and bottom at 0.
Check out this jsfiddle https://jsfiddle.net/zq0kkkcx/2/
Also, this is the code that I'm talking about:
document.addEventListener("scroll", function(event) {
if(window.pageYOffset >= 1200){
console.log("1200");
// this is where you want your element to become absolute
// positioned to his parent container
// write your css changes here and apply them to elements
// add relative to container and absolute with bottom 0 to element
} if (window.pageYOffset <= 1200){
console.log("<1200");
}
});
If you want a CSS solution, here is a trick that you can do using z-index. Other than this there is a JS solution.
.wrapper {
width:100%
}
.container {
width:300px;
margin:0 auto;
height:1200px;
background:#ccc;
position: relative;
z-index: -1;
}
.container2{
width:300px;
margin:0 auto;
height:1200px;
background:#fcf;
z-index: 1;
}
.element {
background:#f2f2f2;
position:fixed;
width:50px;
height:70px;
margin-left:250px;
border:0px solid #d6d6d6;
}
<div class="wrapper">
<div class="container">
container1
<div class="element">
fixed
</div>
</div>
<div class="container2">
container2
</div>
</div>
You're looking for a sticky header. There is currently no way to make a header sticky at an arbitrary scroll position using pure CSS - you'll have to look into a JavaScript solution to accomplish that.
Yes, it is 100% possible to do this without any JavaScript
I updated your fiddle
Markup should be like this
<div class="wrapper">
<div class="outer-scroller">
<div class="scroll-container">
container1
<div class="fixed-header">
fixed
</div>
</div>
</div>
<div class="last-container">
container2
</div>
</div>
and css
.wrapper {
width: 100%;
height: 300px;
}
.outer-scroller {
height: 140px;
overflow-y: scroll;
}
.scroll-container {
padding-top: 70px;
width: 300px;
height: 1200px;
background: #CCC;
}
.last-container {
width: 300px;
height: 600px;
background: #FCF;
}
.fixed-header {
background: #F2F2F2;
position: absolute;
width: 300px;
height: 70px;
top: 0;
pointer-events: none;
}
You'll see I've added an outer-scroller div.
The next bit is changing your CSS slightly
The new outer-scroller div is double the height of your fixed-header (for the purposes of this example) and it has an overflow-y: scroll on it.
The container inside there is still the same.
The next change is turning your position: fixed into a position: absolute and then adding padding to the top part of the div you want to scroll in order to push its content "below" the new "fixed" header.
Scrolling over the outer-scroller div then makes its content scroll, and because its height is set with an absolute element on top it then scrolls "under" the fixed header.
Once the bottom of its child content scroll-container is reached, the whole page then continues scrolling, and you get the illusion of the header disappearing.
The last bit is pointer-events: none on the header so that it doesn't scroll away when the cursor is over it (but the div below does)
I would like to do a responsive design for the popup notifications in my application.I'm using Angular Toaster for the notifications.
For instance I have located the toaster-container element in the center of the screen, but using an absolute position,so for smaller screens the notifications stay in the same position so they are not displayed. I would like to make the notifications relative to the parent element where they are contained, (in this case the container grid). How do I achieve that using CSS? This is my html code:
<body data-ng-controller="AppController">
<div id="container" class="container">
<toaster-container toaster-options="{'position-class': 'toast-container-custo','time-out': 3000, 'close-button':true}"></toaster-container>
<div id="header" data-ng-include="'partials/header/header.html'" ></div>
<div data-ng-view></div>
<div id="footer" data-ng-include="'partials/footer/footer.html'"></div>
<!-- This is the div with the overlay css class, so no matter where it is located this div inside the screen, it will cover the whole screen-->
<div id="loader" class="loading overlay" data-ng-if="loader.loading">
<p>We are loading the products. Please wait...</p>
<img alt="" src="images/ajax-loader.gif">
</div>
</div>
<div id="loginPanel" data-ng-include="'partials/content/panels/login.html'"></div>
</body>
And the custom css rule I use for the toaster-container element:
.toast-container-custo
{
position: absolute;
top:100px;
left: 780px;
}
Use percentages instead of pixels
You can make your div relate to it's container using percentages both for width/height and top/left values. The percentage you use here will be in relation to the parent container size. So if your parent container is set to width:300px and your child is set at width:50% then the child will be rendered at width:150px;
Use relative positioning for the element.
Relative positioning, is just what it says on the label - it positions the element relative to other elements. So you also need to set the element to position:relative;
Here is how I would go about this:
.toast-container-custo{
position: relative;
margin: 0 auto;
width: 30%;
height:30px;
}
margin:0 auto will center
the child elements within it's container, horizontally
the width now is 30% of the parent container
the height, well, I just prefer to set this at a fixed px value but
you can definetely use % here as well
You can change your container to:
.toast-container-custo{
position: absolute;
top: 100px;
margin-left: auto;
float: none;
margin-right: auto;
left: 0;
right: 0;
}
Generally, this is a good way to center horizontally absolute elements.
Before you attempt to solve this please carefully read the constraints I'm dealing with.
Constraints
.pictureContainer needs to remain position: relative (because I have a hover menu that positions absolutely relative to it.)
The image could be smaller than 80% of #slide in which case it still must align in the center. What this translates to? You can't simply do a margin: 0 10% because yes that would center this specific case, but it will not satisfy the case where the image is smaller than 80% of the width of #slide
Hello, I am inline-block element that is positioned beside another inline block element, isn't that wonderful? I think that is wonderful!
Why not simply add:
text-align: center;
to pictureContainer css declaration. It will center any image in it.
firts try to wrap your div class="pictureContainer" and give css to the wrapper
html
<div class="wrapper">
<div class="pictureContainer">
<img id="currentPic" class="slideShowPic" src="http://blog.gettyimages.com/wp-content/uploads/2013/01/Siberian-Tiger-Running-Through-Snow-Tom-Brakefield-Getty-Images-200353826-001.jpg" width="350" alt="IMAGE" />
<div class="hoverMenu">
<a class="nextSlide" href="#">
>
</a>
<a class="prevSlide" href="#">
<
</a>
</div>
</div>
</div>
css
.pictureContainer {
width: 350px;
position: relative;
background: red;
padding: 0;
margin: 0;
}
#currentPic {
vertical-align: top;
}
.wrapper {
margin:auto;
width: 350px;
}
working demohope this help
Like the answer from #jhunlio suggests:
create a wrapper around it with the follwong css
.wrapper {
margin:auto;
width: 600px;
}
The trick here is that the width is fixed and the margin is set to auto.
It means that the margin (outer space) will be equally distributed at the sides of the wrapper with the fixed width. Hence it is in the middle.
I have a website in which the layout looks something like this: (image below)
On the left panel, I have a div which displays a logo. I have another div which I want to put beneath the logo and so divs these have to be these stacked over each other. I tried fiddling with the z-indexes, but didn't quite get the rquired thing.
How can this be done?
If z-index is not working for you try nesting the logo <div> in a wrapper <div> something like this
<div> <!--div container to hold the logo div-->
<div><!--Logo div--></div>
</div>
Reference: jsFiddle Logo Demo
Status Update: jsFiddle Logo Demo Just Border Version
The above jsFiddle has extensive notes in the CSS Section so you can understand how to setup your specific Logo.
HTML:
<div id="logoHolder">
<div id="logoContent">
<div id="logoImage"></div>
</div>
</div>
CSS:
#logoHolder {
width: 296px;
height: 296px;
background-color: white;
border: 3px solid red;
}
#logoContent {
width: 256px;
height: 256px;
padding: 20px;
position: relative;
border: 1px solid black;
}
#logoImage {
background-image:url(http://img841.imageshack.us/img841/4718/securitysealred256x256.png);
background-repeat: no-repeat;
background-position: center center;
background-color: aqua;
height: 100%;
}
Try to use also position: absolute; instead of relative for both elements when using z-index. Then it can make some distortion in your layout, so you can put the logo divs inside another relative div or use some other technique to fix it, however it must work when using position absolute and z-index. If it is still not working, check if some of your javascript is not interfering or if some other elements in your code have z-index, so it is causing the problems.
If using position absolute, do not forget to define margin-left and margin-top.
I'm not sure what you want to achieve but try this, adapting the values to your layout
Try using the margin property, as shown in your image. If you put margin-left as a negative value for the right-side div, then the right-side div will move below/above the logo div.
Ok so basically I have:
<div style="overflow-x:scroll">
<div class="content">
<div class="text"></div>
<div class="seperator"></div>
</div>
</div>
I want to position the bottom div (its basically a sort of horizontal line) on the bottom of the content div
I've tried the position: absolute embedding a position: relative div tag, but because the top div is scrollable the seperators remain fixed when I scroll
How would I go abouts getting this done (I have to use the seperator in the class=content div so it doesnt ruin the background I have set for it
Edit: Ok so my seperator has some shadows and stuff so I need it to overlay with the content, so I need some kind of absolute positioning, but not to the page, to the 'top div'
Is there a way to relatively position it so it'll always be at the bottom of the parent div?
#top-div { position:relative; /* fixed height or width */ }
#bot-div { position:absolute; bottom:0 }
Change this:
.sep {
border-bottom: 4px solid rgba(0,0,0,0.5)
position: absolute;
bottom: 0;
}
To this:
.sep {
border-bottom: 4px solid rgba(0,0,0,0.5);
}
If I am not understanding your question please feel free to correct me.