I have several divs which have absolute positioned sidebars that show at their right when hovered.
I want each sidebar to show at 100px from the top from it's parent top position when hovered.
HTML
<div class="guide-container">
THIS IS THE PARENT DIV
<aside class="guide-extras">
THIS IS THE SIDEBAR
</aside>
</div>
Jquery
$( ".guide-container" ).hover(function() {
var container = $( this ).find("aside").toggle();
var height = $( this ).find("aside").position().top
$( this ).find("aside").css("top", height);
});
Why JavaScript? You can do it with plain CSS:
.guide-container {
position: relative;
border: 1px solid #f00;
margin: 10px 0;
height: 70px;
width: 50%;
}
.guide-extras {
position: absolute;
top: 20px;
right: -210px;
width: 200px;
border: 1px dashed #00f;
display: none;
}
.guide-container:hover .guide-extras {
display: block;
}
<div class="guide-container">
THIS IS THE PARENT DIV
<aside class="guide-extras">
THIS IS THE SIDEBAR
</aside>
</div>
<div class="guide-container">
THIS IS THE PARENT DIV
<aside class="guide-extras">
THIS IS THE SIDEBAR
</aside>
</div>
You can do this using only CSS:
.guide-extras {
float: right;
display: none;
}
.guide-container:hover > .guide-extras {
display: block;
position: relative;
top: 100px;
}
<div class="guide-container">
THIS IS THE PARENT DIV
<aside class="guide-extras">
THIS IS THE SIDEBAR
</aside>
</div>
<br/><br/><br/><br/>
<div class="guide-container">
THIS IS THE PARENT DIV
<aside class="guide-extras">
THIS IS THE SIDEBAR
</aside>
</div>
JSFiddle
Try simply adding margin-top: 100px; to the .guide-extras CSS class.
Related
First of all an example:
https://jsfiddle.net/85uqehz5/
The code is just an example, an easier version of my real code. I figured out that I cant't have both: Setting the wrap-div to overflow: visible the menu that shows up isn't cut off but the box shadow doesn't embrace the box; With overflow:auto; the box-shadow is working but the menu cut off. How could I solve this? A fixed height would not be an option.
Example Code:
$('#menu').click(function() {
$('#menu-list').toggleClass('hidden');
});
#wrap {
width: 80%;
height: auto;
overflow: visible;
box-shadow: 0 0 .2rem rgba(0, 0, 0, .4);
}
#content {
width: 200px;
height: 20px;
margin: 0 auto;
}
#content2 {
float: left;
}
.hidden {
display: none;
}
#menu {
position: relative;
height: 20px;
width: 100px;
background-color: #ccc;
float: left;
}
#menu-list {
position: absolute;
top: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrap">
<div id="content">
Some Content
</div>
<div id="content2">
Some Content
</div>
<div id="menu">
Open Menu
<div id="menu-list" class="hidden">
<div> bla </div>
<div> bla </div>
<div> bla </div>
</div>
</div>
</div>
It's very simple, in your specific case:
1- Remove overflow: auto; from #wrap
2- Add this to your CSS:
#wrap:after {
display: table;
content: "";
clear: both;
}
This makes the height of #wrap's calculation include the floated element.
If you have multiple uses declare a class like clearfix and use it whenever needed.
Demo: https://jsfiddle.net/85uqehz5/1/
Floats must be cleared: https://jsfiddle.net/85uqehz5/3/
<div id="wrap" class="clearfix">
The reason the menu is cut off is because you haven't clear your float: left and that is done with such piece of code to the container
.clearfix:after {
content: "\0020";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
I have two Div's next to each other, wrapped in a container Div which has the display:flex-attribute. Now I have this kind of tricky issue where I need to be able to click on one element inside the div which then shows a previously hidden div, which also is placed inside the container. When the hidden div is visible, the container of course expands BUT I need the container NOT to expand and I cannot place the hidden div outside the container. I have the following example code:
HTML:
<div id="container">
<div class="content">
<div class="top">
This is the top
</div>
<div class="bottom">
This is the bottom - click me
</div>
<div class="expand">
This is hidden content
</div>
</div>
<div class="content right">
This is the right content
</div>
</div>
The CSS:
#container {
width: 100%;
display: flex;
}
.content {
float: left;
width: 49%;
border: 1px solid;
}
.top, .bottom {
height:100px;
}
.top {
background: #ddd;
}
.bottom {
background: #eee;
}
.right {
background: #e9e9e9
}
.expand {
display:none;
background: #999;
}
I have made JSFIDDLE - So the hidden div should be outside the container when its visible - can someone help me out?
adding position: absolute; to the .expand div pushes the div outside of the box
https://jsfiddle.net/4724m90k/
what I'm trying to do is simple to tell. There is fixed div on my page on bottom. It must be always shown on bottom, so position fixed is used.
In this div there are 2divs, one small must be always on top of this fixed div, another must be scrollable.
The problem is small div, if I give him position fixed, it is position to top of window, not on top of this fixed div, as you can see in this fiddle
If small div is position absolute, it is on top of fixed div, but if it is scrolled, as you can see in this fiddle
HTML
<div class="bottom">
<div class="top"></div>
<div class="content"></div>
</div>
CSS
.bottom
{
padding:20px;
height: 253px;
position: fixed;
bottom:0px;
width:100%;
background-color: red;
overflow-x: hidden;
overflow-y: scroll;
}
.top
{
height:50px;
width:100%;
background-color: yellow;
position: fixed;
top: 0px;
}
.content
{
height: 1500px;
background: linear-gradient(green, blue);
}
Is is possible to make this work without watching scrolling by jvascript? By pure CSS?
You can use a wrapper <div> for the content and let it scroll - so that the absolutely positioned sibling does not scroll along with it, as follows:
HTML
<div class="bottom">
<div class="top"></div>
<div class='contentWrap'>
<div class="content"></div>
</div>
</div>
CSS
.contentWrap{
height:100%;
overflow-y:auto;
}
* {
margin: 0;
padding: 0;
}
.bottom {
padding: 20px;
height: 253px;
position: fixed;
bottom: 0px;
width: 100%;
background-color: red;
overflow: hidden;
}
.top {
height: 50px;
width: 100%;
background-color: yellow;
position: absolute;
top: 0px;
}
.contentWrap {
height: 100%;
padding-top: 30px; /* .top height - .bottom padding*/
overflow-y: auto;
}
.content {
height: 1500px;
background: linear-gradient(green, blue);
}
<div class="bottom">
<div class="top"></div>
<div class='contentWrap'>
<div class="content"></div>
</div>
</div>
JSFiddle Demo
Your approach using fixed -> absolute is absolutely correct since you can position an element absolute but relative to its parent by doing so. The problem is that the absolute .top always appears on top of .bottom - so if .bottom is scrolled, .top will follow.
My solution would be using position:fixed; on .top, but using bottom instead of top:
.top {
....
position:fixed;
bottom:253px; /*note sure how it should look at the end, try it yourself*/
}
Add div with class top inside div with class content and remove top:0 from .top class:
html
<div class="bottom">
<div class="content" >
<div class="top"></div>
</div>
<div>
css
.top
{
height:50px;
width:100%;
background-color: yellow;
position: fixed;
}
fiddle
Try this, it basically just puts a frame container around your scrollable div to keep everything in place. JSFiddle
<div class="bottom">
<div class="top"></div>
<div class="scroll-container">
<div class="content" ></div>
</div>
<div>
.scroll-container
{
height: 203px;
overflow-y: scroll;
}
Also, remove overflow-y: scroll; from the .bottom class
If you already dealing with fixed heights & positions, why not just position the 'top' section as fixed as well? check the Fiddle Demo
like so:
.top
{
height:50px;
bottom:243px;
width:100%;
background-color: yellow;
position: fixed;
}
there is a tool bar in the left of my page, the width of the tool bar is 35px, the main content panel is in the right of my page and has CSS float:right I want to set the width of main content panel with 100%-35px, so that the tool bar can be displayed, how can I achieve this effect, many thanks.
You can use calc(). But i'm not sure about browser compatibility. So try jquery solution.
Layout should be like this.
<div style="width: 100%">
<div id="toolbar" style="display: inline-block; width: 35px"></div>
<div id="main-content" style="display: inline-block"></div>
<div>
in jquery:
$("#main-content").width($(window).width() - 35);
if there is padding or margin detect them also.
It's convenient to do this by using absolute position. It doesn't need to use javaScript and it handle screen size change event correctly.
the css like bellow:
.toolbar {
position: absolute;
width: 35px;
}
.content {
position: absolute;
left: 35px;
right: 0px;
}
see the demo in jsFiddle.
Pure CSS based approach:
css:
.container {
padding-left: 50px;
border: 1px solid red;
}
.toolbar {
width: 35px;
margin-left: -50px;
padding: 0 5px;
list-style-type: none;
}
.main {
width: 100%;
}
.col {
display: inline-block;
vertical-align: top;
}
html:
<div class="container">
<ul class="toolbar col">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>
<div class="main col">
<p>This is the place holder for Main Content</p>
</div>
</div>
http://cdpn.io/hlfFG
Sounds like this can easily be done with CSS.
#main-content {
width: 100%;
margin-right: 35px;
}
Parent absolute must be under child absolute
How to solve this problem with css?
Positions must be absolute.
<div class="parent">
<div class="child">child</div>
</div>
<div class="parent">
<div class="child">child</div>
</div>
My code is here
edit this class:
.child {
position: absolute;
right: -280px; /* add this and remove left:0; */
top: 0;
text-align: center;
width: 280px;
height: 300px;
background: #0f0;
display: none;
z-index: 1; /* add this to set child over the second parent */
jsfiddle