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.
Related
How to set flexible height for parent div. In my code popup is there inside div. If I open the popup i want to increase the height of the parent div. I have used height:100% but it is not working. So, How to resolve this issue.
HTML:
<div class="main">
<a href="#" open-popup>Popup</a>
<maincontent class="content">
shadow-root(open)
<popup class="popup"> ..content..</popup>
</maincontent >
</div>
CSS:
.main{
height:100%;
width:100%;
display:table;
border:2px solid #ccc;
}
.content{
display:flex;
justify-content:center;
}
Getting like this:
Expected like this:
You can use auto height
height: auto;
instead of
height:100%;
to not disturb height of parent div
To main class you can use display "block" property instead of "table" and heigth will be "auto" or just don't define it will take automatically take.
<div class="main">
<a href="#" open-popup>Popup</a>
<main class="content">
shadow-root(open)
<div class="popup"> ..content..</div>
</main>
.main{
height:auto;
width:100%;
display:block;
border:2px solid #ccc;
}
.content {
display:flex;
justify-content:center;
}
When I use a div block with float:left and another with relative position, the second block behaves unexpectedly - the text goes beyond the box and its background color. What is happening here?
https://jsbin.com/merehowoxa/1/edit?html,output
#first-section{
color:black;
background-color:pink;
width:100px;
float:left;
}
#second-section{
color:purple;
background-color:yellow;
width:100px;
height:100px;
position:relative;
left:500px;
top:200px;
}
Whenever you use Float: left, It needs to be cleared.
Add this between both your div's
<div id="first-section">
<p>Text1</p>
<p>Text2</p>
</div>
<div style="clear:both">
<div id="second-section">
how do i make divs display at the bottom of the screen inline (following each other horizontally like facebook chat) and also overlapping their parent div. i have tried the following but does not work.
<div id="container">
<div id="box">
</div>
<div id="box">
</div>
<div id="box">
</div>
</div>
#container{
height:10px;
position:fixed;
bottom:0;
width:1000px;
margin:0 auto;
}
#box{
border:1px solid blue;
width:250px;
height:300px;
display:inline-table;
position:fixed;
bottom:0;
}
Wrap the elements in another container div, which is positioned absolutely.
Firstly, you can't use duplicate id's. Use classes instead.
Your HTML will be something like:
<div id="container">
<div class="box-container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
</div>
You can't use display:inline-table and fixed together. Use position:absolute or position:fixed (if you want to make the items stick) for the container div, and for instance display:inline-block for the .box elements to get them inline.
#container {
height:10px;
position:fixed;
bottom:0;
width:1000px;
margin:0 auto;
}
.box-container {
position:absolute;
bottom:0;
height:40px;
width:100%;
}
.box{
border:1px solid blue;
width:250px;
height:40px;
display:inline-block;
}
See http://jsfiddle.net/B228U/1/ for an example.
Cheers,
Jeroen
You can´t give same id to different elements. Use class. Also give main div position:relative and float:left to rhe class box. Like this:
<div id="container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
#container{
height:10px;
position:absolute;
bottom:0;
width:1000px;
margin:0 auto;
}
.box{
border:1px solid blue;
width:250px;
height:300px;
float:left;
display:inline-table;
position:relative;
bottom:0;
}
http://jsfiddle.net/7kwLc/
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>