I have a div. Inside this div are 2 smaller divs. I want one of the smaller divs to have overflow:visible, and the other to have overflow:hidden. Can't figure out what selectors allow me to do this, I think I'm missing something super simple.
edit Sorry, let me rephrase that: I want the main div to have the style overflow:visible only applied to one of the child divs, while the main div also has the style overflow:hidden apply to the other.
Example:
http://jsfiddle.net/3fQBt/
<div id="body">
<div id="visible">This div should be visible.</div>
<div id="hidden">This div should be hidden.</div>
</div>
#body{
width:300px;
height:300px;
margin:20px;
position:relative;
float:left;
overflow:visible;
}
#visible{
width:100%;
height:100px;
margin-left:-20px; //this should overflow visibly
position:relative;
float:left;
}
#hidden{
width:100%;
height:100px;
margin-left:-20px; //this should be hidden
position:relative;
float:left;
}
something like this should get you going in the right direction.
<div id="body">
<div id="visible">This div should overflow.</div>
<div id="hidden-box">
<div id="hidden">This div shouldn't.</div>
</div>
</div>
#hidden-box {position:relative;overflow:hidden;height:100%;width:100%;}
Here's a couple of solutions:
HTML:
<div id="body">
<div id="visible">This div should overflow.</div>
<div id="hidden1">This div shouldn't.</div>
<div id="clip">
<div id="hidden2">This div shouldn't.</div>
</div>
</div>
CSS:
/* solution 1 uses text-indent to create the clipping and a red block to cover the excess background blue on the right */
#hidden1 {
width:100%;
height:100px;
background-color:#00f;
color:#fff;
text-indent: -20px;
position:relative;
float:left;
}
#hidden1:after {
content: "";
display: block;
position: absolute;
right: 0;
top: 0;
width: 20px;
height: 100%;
background-color: red;
}
/* solution 2 uses a second div with overflow: hidden to clip the text to get around the parent div's overflow: visible */
#clip {
overflow: hidden;
position:relative;
float:left;
width: 100%;
}
#hidden2{
width:100%;
height:100px;
background-color:#00f;
color:#fff;
margin-left:-20px;
position:relative;
float:left;
}
Fiddle here
Can't you reduce de width of the second div and remove the negative margin-left like this:
#hidden{
width: calc(100% - 20px);
height:100px;
position:relative;
float:left;
}
Demo
EDIT: Added calc() on CSS
You could do something like this, although it's pretty brittle, so not much use in the real world:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
*, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
body {margin: 0;}
#body{
width:300px;
height:300px;
background-color:#f00;
margin:20px;
position:relative;
overflow:hidden;
border:solid 1px #000;
}
#visible{
width:300px;
height:100px;
background-color:#0f0;
position:fixed;
left: 0;
}
#hidden{
width:300px;
height:100px;
background-color:#00f;
color:#fff;
position:absolute;
top: 100px;
left: -20px;
}
</style>
</head>
<body>
<div id="body">
<div id="visible">This div should overflow.</div>
<div id="hidden">This div shouldn't.</div>
</div>
</body>
</html>
TRY this,
#hidden {
width: 100%;
height: 100px;
background-color: #00F;
color: #FFF;
/*margin-left: -20px; <--- remove this*/
position: relative;
float: left;
overflow: hidden !important;/*add this*/
}
Related
This question already has answers here:
div under another div
(6 answers)
Closed 7 years ago.
I am making a page and I need one div block to go under the other. I have a lot of different color divs, and when I use margin-top:100px(for example) for one div, and margin-top:200px for other div it looks ok on my computer but on the lap top completely different
--- 1st and 2nd divs are in the right place, but I have to put the 3rd one below the 2nd div. How can I do that?
Here is the pic:
Try setting your divs to "position:relative", then set z-index properties. The lower it's set the farther it's displayed...
Example :
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
Then your css :
.div1 {
position:relative;
z-index:1;
width: 100%;
height: 300px;
background-color: #eee;
}
.div2 {
position:relative;
z-index:2;
margin-top: -100px;
width: 100%;
height: 300px;
background-color: #f90;
}
.div3 {
position:relative;
z-index:3;
margin-top: -100px;
width: 100%;
height: 300px;
background-color: #ccc;
}
#container{
width:500px;
}
.innerdivs
{
width:100%;
float:left;
}
<div id="container">
<div class="innerdivs" style="background-color:#4C4C4C;"><h1>first div</h1></div>
<div class="innerdivs" style="background-color:#0087DE;"><h1>2nd div</h1></div>
<div class="innerdivs" style="background-color:#FFFF00;"><h1>3rd div</h1></div>
</div>
that is working perfectly in here
CSS
#wrapper{
width:100%;
max-width:460px;
}
.inline-divs
{
width:100%;
display:inline-block;
}
#div1{
height:50px;
background-color:#ff0000;
}
#div2{
height:150px;
background-color:#00ff00;
}
#div3{
height:300px;
background-color:#0000ff;
}
HTML
<div id="wrapper">
<div class="inline-divs" id="div1"></div>
<div class="inline-divs" id="div2"></div>
<div class="inline-divs" id="div3"></div>
</div>
JSfiddle Demo
https://jsfiddle.net/1tuj0c9a/2/
Hope you find this helpful!
I have added 3 different Div's with different colors one after another with 100% width. So it works without overlapping div's in mobile screens as well.
#container {
width:100%;
display:block;
}
.content1 {
width: 100%;
height: 100px;
background:pink;
display:flex;
}
.content2 {
width: 100%;
height: 100px;
background: blue;
display:flex;
}
.content3 {
width: 100%;
height: 100px;
background: yellow;
display:flex;
}
http://jsbin.com/nonufehuja/4/edit
If you want to add margin to entire page container
#container {
width:100%;
display:block;
margin-top:100px
}
http://jsbin.com/nonufehuja/5/edit
Margin for second div
.content2 {
width: 100%;
height: 100px;
background: blue;
display:flex;
margin-top:100px;
}
http://jsbin.com/nonufehuja/6/edit
Try to use CSS z-index property
For example, in styles, for div1 you should add
position:relative;
z-index:1;
For div2
position:relative;
z-index:2;
For div3
position:relative;
z-index:3;
Hi everyone my tutorial has a tree div for now. Header,container and footer. header is fixed. but if you check it in JSFiddle you see container div has a problem lags behind the header div i can not solv the problem. what can i do in my css code?
This is HTML code:
<div class="globalHeader">
<div class="globalheader-in"></div>
</div>
<div class="global_container">
<div class="container">
1 <br>2 <br>3 <br>4 <br>5 <br>
</div>
</div>
And CSS code:
.global_container {
clear:both;
width:981px;
height: auto;
margin-left:auto;
margin-right:auto;
border-right:1px solid #d8dbdf;
overflow:hidden;
background-color:#f8f8f8;
}
.container {
float:left;
width:981px;
height:100px;
background-color:red;
}
.globalHeader {
width:100%;
height:40px;
position:fixed;
background-color:#2a3542;
z-index:99999;
}
.globalheader-in {
width:981px;
height:40px;
margin-left:auto;
margin-right:auto;
border-right:1px solid #fff;
border-left:1px solid #fff;
}
Using a spacer
You can push the content of container down by adding a spacer element as the first child of the container.
.container:before {
content: ' ';
display: block;
height: 40px; /* equal to the height of the header */
}
WORKING DEMO.
Using top padding
You can also use padding-top for the container to achieve that:
.container {
width:981px;
height:100px;
/* other styles... */
padding-top: 40px;
}
WORKING DEMO.
However If you want to keep the height of the container as 100px, you should use box-sizing: border-box to calculate the height of the container including paddings and borders, as follows:
.container {
width:981px;
height:100px;
padding-top: 40px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
WORKING DEMO
I would do it like this:
http://jsfiddle.net/8eSAU/5/
.global_container{
clear:both;
position: relative;
top: 40px;
}
It was not working, because you simply hid the text beneath the fixed element.
Kolay gelsin :)
Why not add:
position:relative;
top:40px;
To .global_container {
Demo Fiddle
This assumes you wish the header to scroll with the content, in which case all you need to do per the demo is offset the top of the content by the height of the header, so it initially displays below it.
A simple padding-top will take care of that.
JSFiddle
.global_container{
clear:both;
width:981px;
height: auto;
margin-left:auto;
margin-right:auto;
border-right:1px solid #d8dbdf;
overflow:hidden;
background-color:#f8f8f8;
padding-top:40px; /* heigt of fixed header */
}
you can add padding-top to the .global_container or body
padding-top should be same as height of header.
Please find the link below for the Fiddle
Add the following to global_container class
position:absolute;
top:47px;
FIND FIDDLE HERE
I have a DIV that contains several other divs. I need divs to be able to peek out of the parent vertically, but not horizontally.
I thought using overflow-x and overflow-y would solve this little problem, but I can only get either x and y to show, or get them both to hide.
My CSS and HTML:
.game {
position:absolute;
width:400px; height:300px;
top:100px; left:100px;
background-color:#cccccc;
overflow-x:hidden;
overflow-y:visible;
}
.block1 {
position:absolute;
width:100px; height:100px;
top:-50px; left:150px;
background-color:#ffcccc;
}
.block2 {
position:absolute;
width:100px; height:100px;
top:150px; left:-50px;
background-color:#ccffcc;
}
<div class="game">
<div class="block1"></div>
<div class="block2"></div>
</div>
See this JSFiddle: both child divs are cut off, even though overflow-y is set to visible.
Structural Change Needed
This gets what you want if it works otherwise (I don't know if the html/css changes affect other aspects of your game). It solves it by layering the "game" so that its vertical direction fills the entire screen, and then your "window" (grey area) is set by a child div. This allows the overflow: hidden horizontally, but not have it vertically.
See fiddle.
HTML
<div class="game">
<div>
<div class="block1"></div>
<div class="block2"></div>
</div>
</div>
CSS
html, body { height: 100%; margin: 0;}
.game {
position:absolute;
width:400px;
height:100%;
top: 0;
left:100px;
overflow:hidden;
}
.game > div {
position: absolute;
top: 100px;
height: 300px;
width: 100%;
background-color:#cccccc;
}
.block1 {
position:absolute;
width:100px; height:100px;
top:-50px; left:150px;
background-color:#ffcccc;
}
.block2 {
position:absolute;
width:100px; height:100px;
top:150px; left:-50px;
background-color:#ccffcc;
}
try Changing your game class to
.game {
width:400px; height:300px;
top:100px; left:100px;
background-color:#cccccc;
overflow-x:hidden;
overflow-y:auto;
}
Thanks,
Dhiraj
On our website, we have a container, with a DIV box inside which leaves a space along the right hand side so we can add some more boxes with images / text.
I got as close as the boxes to the right hand side but underneath the "main" div.
http://jsfiddle.net/Ug5pz/2/
Thanks!
CSS:
#container {
position: relative;
width: 600px;
height: 400px;
margin: 0 auto 0;
background: #FFF;
border-style:solid;
border-width:2px;
}
#main {
position:relative;
width: 450px;
height: 300px;
border-style:solid;
border-width:2px;
}
#sidebox {
position:relative;
width:120px;
height:50px;
float:right;
border-style:solid;
border-width:2px;
}
HTML:
<div id="container">
<div id="main">Welcome to our website!</div>
<div id="sidebox">Sidebox</div>
</div>
Try adding float:Left to the #main CSS
Alternatively you could modify the #sidebox CSS as follows:
position:absolute;
right:0px;
top:0px;
I have two divs inside a container div. One need to float left the other float right. They also both need to be vertically centered inside their parent. How can I achieve this?
<div id='parent'>
<div id='left-box' class='child'>Some text</div>
<div id='right-box' class='child'>Details</div>
</div>
If no float is applied to either they vertically align to the middle with this css
.child{ display:inline-block; vertical-align:middle; }
However adding #right-box{ float: right; } causes the children to lose their vertical alignment. What am I doing wrong?
Thanks guys
here is the online demo of the solution you needed
it was made with this html:
<div id='parent'>
<div id='left-box' class='child'>Some text</div>
<div id='right-box' class='child'>Details</div>
</div>
and this css:
#parent {
position: relative;
/* decoration */
width: 500px;
height: 200px;
background-color: #ddd;
}
.child {
position: absolute;
top: 50%;
height: 70px;
/* if text is one-line, line-height equal to height set text to the middle */
line-height: 70px;
/* margin-top is negative 1/2 of height */
margin-top: -35px;
/* decoration */
width: 200px;
text-align: center;
background-color: #dfd;
}
#left-box { left: 0; }
#right-box { right: 0; }
You can try the display:table and display:table-cell styles.
Check this site out for more details http://www.quirksmode.org/css/display.html
NB: if you want the parent div height to be a percent (like 100%), then it will be relative to the height of it's container. If the container is the body, then you will have to set the body and html's height as well, like to 100%.
Here's an example of what the code might look like:
<div id='parent'>
<div id='left-box'>Some text</div>
<div id='right-box'>Details</div>
</div>
<style>
body,html{
height:100%;
}
#parent{
border:1px solid red;
display:table;
height:100%;
width:100%;
}
#left-box{
background-color:#eee;
display: table-cell;
vertical-align:middle;
padding:3px;
width:50%;
}
#right-box{
background-color:#dddddd;
display: table-cell;
vertical-align:middle;
padding:3px;
width:50%;
}
</style>