I've a peculiar situation where I have a menu that displays an position:absolute; div that should render over other content, but the text in the scrollable div below it renders over the menu.
I cannot seem to find the combination of tags which would fix this. adjusting the z-index property does along with adjusting the position property of the divs
This below code snippit demonstrates what is going on. What works and what doesn't, I require that the parent div be relative to position the menu icon within its parent div and I'm somewhat at a loss on how to have this render correctly.
.scrollable-r {
padding-top:12px;
overflow: auto;
width:100px;
height:50px;
position:relative;
}
.scrollable {
padding-top:12px;
overflow: auto;
width:100px;
height:50px;
}
.menu {
position:absolute;
background:white;
}
<div class="menu">
<div>
Text1
</div>
<div>
text2
</div>
</div>
<div class="scrollable-r">aasdfafqfgqgqgqgqgqre</div>
<div>
<div class="menu">
<div>
Text1
</div>
<div>
text2
</div>
</div>
<div class="scrollable">aasdfafqfgqgqgqgqgqre</div>
</div>
Related
Im trying to overlap an element with a absolute position .tools outside of its uppermost parent element #canvas_area which has an overflow:scroll, however this doesn't seem to work, but it does work if you remove the overflow:scroll attribute.
HTML:
<div id="canvas_area">
<div class="container">
<div class="blocks">
<div class="tools">
x
</div>
</div>
<div class="blocks">
<div class="tools">
x
</div>
</div>
</div>
</div>
CSS:
#canvas_area{
overflow:scroll; // remove this and it works
height:400px;
width:400px;
background-color:black;
margin: 0 auto
}
.container{
position:relative;
}
.blocks{
overflow:hidden;
width:200px;
height:100px;
background-color:white;
margin-bottom:10px;
}
.tools{
position:absolute;
color:green;
left:-40px;
}
I need #canvas_area to have a scroll, is their a way around this?
here is the jsfiddle: https://jsfiddle.net/2exn6oq5/
remove overflow:scroll from #canvas_area and you will see the green x outside the body, which is what I want it to do.
I have some child divs placed in a parent div. It looks like that:
Now I need to place an image with a relative size into the red(brown) div.
But every time when I place the image into the div the layouts expands.
And that is a problem for me.
So how can I put an image with a relative size into my div without expanding the div layout?
HTML:
<div class="textContentContainer">
<div class="FirstSectionContentHeader">
<table class="layoutTable"><tr><td class="centerDiv">
<div class="FirstSectionHeaderintroText uppercase">
SOME TEXT
</div>
</td></tr></table>
</div>
<div class="FirstSectionLogoArea">
<img src="../img/Headerlogo.png" alt="Description" class="FirstSectionTitleLogo">
</div>
<div class="FirstSectionIntroText usualText">
ddd
</div>
<div class="FirstSectionBottomLayout">
<img src="../img/basics/Pfeil.png" alt="Pfeil" class="FirstSectionBottomArrow">
</div>
</div>
CSS
.FirstSectionContentHeader{
height:10%;
width: 100%;
font-weight:200;
text-align:center;
background-color: aqua;
}
.FirstSectionLogoArea{
height:10%;
width:100%;
background-color: chartreuse;
}
.FirstSectionTitleLogo{
height:80%;
width:100%;
object-fit:contain;
}
.FirstSectionIntroText {
height:70%;
width:100%;
background-color:white;
}
.FirstSectionBottomLayout{
height:10%;
width:100%;
background-color: brown;
}
.FirstSectionBottomArrow {
height:10%;
width:10%;
object-fit:scale-down;
}
the image has position: staticby default, which is "inserted" in the parent element and "takes some space" there, causing the parent element to become larger. You can give it position: absolute(which requires that the parent element has position: relative) and still use percentage values.
I am trying to set a fixed div div(menu) directly under another fixed div (header) and the positioning should also work with different screen sizes.
I call the "menu" div through JQuery with toggle and it appears under the "header" div. I can do this setting a fixed top value greater than the height of the "header" div but if I do not want the header to have a fixed PX value how do I do this?
Any suggestions?
html:
<div id="header">
<div id="menu">
</div>
</div>
css:
#header{
position:fixed
height:15%;
width:100%;
background-color:blue;
}
#dropdown{
display:none;
position:fixed;
top:?
}
Have a wrapper that is fixed, and just have the other 2 divs flow traditionally.
#header-container {
position:fixed
height:15%;
width:100%;
background-color:blue;
}
#header, #dropdown {
width:100%;
}
<div id="header-container">
<div id="header">
</div>
<div id="dropdown">
</div>
</div>
I'm trying to place two divs one above the other. The top div should stay always visible (not scrolling). The div below contains a list, and if the list is too long, and overflows the window/containing div, the div should be scrollable. When defining the height of the top div, it's good, but the content of the top div may change, so the height should not be fixed (like in this question).
My attempt on Plunker.
Is it possible with pure CSS, without JavaScript calculation?
Edit:
The list should strech to the bottom of the screen/container div.
You need to use some not too obvious CSS trickery to get the behaviour you're after, importantly any scrollable content needs to be within a separate container in a CSS table's cell, with overflow-y set, and a height of 100%. The top cell then needs a height of 1% to auto expand as appropriate.
Then all you need to do is set the tables height and max-height as appropriate.
By using CSS tables, you get a lot more flexibility when it comes to layout calculation/manipulation in terms of relating the sizes of elements
Demo Fiddle
CSS
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
.table {
display:table;
table-layout:fixed;
height:100%;
width:100%;
max-height:100%;
}
.row {
display:table-row;
}
.cell {
display:table-cell;
}
.row:first-of-type >.cell {
background:lightgreen;
height:1%;
}
.row:last-of-type >.cell {
background:pink;
}
#list {
height:100%;
overflow-y:auto;
}
HTML
<div class='table'>
<div class='row'>
<div class='cell'>This is text in the <strong>list-head</strong>, it's content may change, so the height of the div shouldn't be fixed, but should stay always visible (not scrolling).</div>
</div>
<div class='row'>
<div class='cell'>
<div id="list">
<div class="list-element">These are list elements.</div>
<div class="list-element">If the list is too long</div>
<div class="list-element">and reaches the bottom</div>
<div class="list-element">the list should be scrollable.</div>
<div class="list-element">(And only the list</div>
<div class="list-element">not together with the <strong>list-head</strong>.)</div>
</div>
</div>
</div>
</div>
Will this work for you ?
<div id="top" >
</div>
<div id="bottom">
</div>
<style>
#top{
display:block;
width:100%;
}
#bottom{
overflow:scroll;
display:block;
height:500px;
width:100%;
}
</style>
use this structure
<div class="main">
<div class="header">
</div>
<div class="content">
</div>
</div>
.main{
height:100%;
}
.header{
height:50px;
position:fixed;
top:0;
background:#454546;
width:100%;
}
.content{
margin-top:53px;
background:#ffffff;
}
Demo
I'm trying to set up a site that has a "carousel" of divs that are all side-by-side (floated left) each with a full-screen width. Using javascript i plan to move different divs into view by moving the "carousel."
My problem is that for some reason when I set overflow:hidden on the div that contains the carousel all the content is hidden. When I inspect with firebug the divs show up in the correct places but none of the content is visible.
Here is the HTML:
<div id="content_window">
<div id="carousel">
<div id="p_home" class="pane">
Home!
</div>
<div id="p_about" class="pane">
About!
</div>
<div id="p_services" class="pane">
Services!
</div>
<div id="p_contact" class="pane">
Contact!
</div>
</div>
</div>
And the CSS:
#content_window
{
position:relative;
width:100%;
overflow:hidden;
}
#carousel
{
position:absolute;
width:400%;
top:50px;
left:0;
overflow:hidden;
}
.pane
{
float:left;
width:25%;
color:White;
text-align:left;
margin-top:50px;
}
If I take the overflow:hidden off of #content_window then the content in the panes becomes visible but horizontal scrollbars are added and you can scroll across and see all the panes. Does anyone know what I'm doing wrong?
When a div contains nothing except floated or positioned elements, its height becomes 0. That is the problem with div#content_window. Try adding a height to that div:
#content_window
{
height: 120px;
}
There's no need to use absolute positioning at all. Just have the content_window clip the viewport for the carousel. See http://jsbin.com/uhubij/edit#html.
The CSS is much simpler:
#content_window {
width:100%;
overflow:hidden;
}
#carousel {
width:400%;
}
.pane {
float:left;
width:25%;
text-align:left;
margin-top:50px;
}
To switch between the panes, add a margin-left to #carousel. The first pane is at margin-left: 0% (default). The second pane is at margin-left: -100%;. The third pane is at margin-left: -200%;, etc... For example, here is pane 2: http://jsbin.com/uhubij/2/edit#html
The HTML is basically the same (except I added a clearing div for you):
<div id="content_window">
<div id="carousel">
<div id="p_home" class="pane">
Home!
</div>
<div id="p_about" class="pane">
About!
</div>
<div id="p_services" class="pane">
Services!
</div>
<div id="p_contact" class="pane">
Contact!
</div>
<div style="clear: both;"></div>
</div>
</div>