I have a bit complicated problem,
I want IMAGE to set full size to DIV, but to be hidden to another DIV inside..
I'll give it my best to explain:
#grandParent {
width: 100%;
height: 500px;
border: 2px solid black;
position: relative;
}
#parent {
width: 50%;
height: 100%;
overflow: hidden;
border: 1px solid red;
}
#child {
width: 100%;
height: auto;
position: absolute;
}
<div id="grandParent">
<div id="parent">
<img id="child" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Liliumbulbiferumflowertop.jpg/220px-Liliumbulbiferumflowertop.jpg">
</div>
</div>
Made changes ^^
Thanks in adv :)
Something like this may work:
.grandParent {
border: 1px solid;
width: 500px;
height: 500px;
display: flex;
justify-content: center;
align-items: center;
}
img {
width: 500px;
height: 500px;
}
.parent {
width: 250px;
height: 250px;
overflow: hidden;
}
EDIT: Maybe I have a better idea.
Code Pen
Try this
#grandParent {
width: 50vw;
height: 50vw;
}
#parent {
width: 25vw;
height: 25vw;
}
#parent::after {
content: '';
display: block;
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: white;
}
#child {
position: absolute;
width: 50vw;
height: 50vw;
}
<div id="grandParent">
<div id="parent">
<img id="child" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Liliumbulbiferumflowertop.jpg/220px-Liliumbulbiferumflowertop.jpg"/>
</div>
</div>
Edit
I removed the opacity: 0 on the image and put overflow: hidden on the parent element. I used the vw to get the percent of the screen. Try expanding the snippet to full screen and resizing the window.
Edit
I used a pseudo element and I think is working right now.
Related
In Chrome 60.0.3112.90(64-bit).
My system is macOS 10.12.4
As you can see, the blue box is overflow. How can I solve this problem? And why does it overflow?
Please check this JSFiddle
or this is my code.
.outer {
width: 200px;
height: 200px;
border-radius: 10px;
border: 1px solid black;
position: absolute;
overflow: hidden;
}
.inner {
width: 200px;
height: 200px;
position: relative;
overflow: scroll;
background-color: lightblue;
}
.inner2 {
width: 200px;
height: 400px;
background-color: lightgray;
}
.inner3 {
width: 200px;
height: 100px;
position: absolute;
background-color: blue;
}
<div class="outer">
<div class="inner">
<div class="inner2">
<div class="inner3"></div>
</div>
</div>
</div>
You can apply z-index: 1 to .outer CSS class.
You can also try this solution, it's used a lot by other guys.
You have here a working demo
I have 2 div inside a wrapper div. I wanted to stack div2 below div1 but it keep overlay div 1 instead. Can anyone help ?
Here my code
CSS:
#import url('http://fonts.googleapis.com/css?family=Wallpoet');
body {
margin: 0;
}
.wrapper {
position: relative;
width: 100%;
height: 100%;
background-color: blue;
}
.div1 {
position: absolute;
background-color: #bdc3c7;
width: 100%;
height: 75%;
margin: 0;
display: block;
float: left;
left: 0;
top: 0;
}
.div2 {
position: absolute;
width: 100%;
height: 25%;
top: 0;
left: 0;
background-color: red;
}
.compass {
position: relative;
width: 180px;
height: 190px;
float: right;
margin-top: -1%;
overflow: hidden;
}
**HTML:**
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="div1">
</div>
<div class="div2"></div>
</div>
</body>
</html>
Have try solution like using absolute position but it doesn't work.
Change the css on div2 to position relative to the bottom
.div2 {
position: absolute;
width: 100%;
height: 25%;
bottom: 0;
left: 0;
background-color: red;
}
You have used absolute positioning to specifically place the div elements at the same position. Remove the absolute positioning (and float also), and the div elements line up one below the other:
#import url('http://fonts.googleapis.com/css?family=Wallpoet');
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
}
.wrapper {
height: 100%;
background-color: blue;
}
.div1 {
height: 75%;
background-color: #bdc3c7;
}
.div2 {
height: 25%;
background-color: red;
}
<div class="wrapper">
<div class="div1">
</div>
<div class="div2"></div>
</div>
Try this instead https://jsfiddle.net/2Lzo9vfc/143/
CSS
.wrapper {
position: relative;
width: 100%;
height: 100%;
background-color: blue;
}
.div1 {
background: #bdc3c7;
width: 100%;
display: block;
height: 75vh;
}
.div2 {
background: red;
width: 100%;
height: 25vh;
display: block;
}
Your're mixing several layouyt modes. If you use floats for this then you cant't mix it with absolute positioning...
Anyway div is a block tag, what means that your two divs should stack even if you don't set any css property to them, just give the a concrete height, for example 200px.
If you want to cover the full browser viewport, that is what I think you want then is enough with this:
.wrapper {
width: 100%;
height: 100vh;
background-color: blue;
}
.div1 {
background-color: #bdc3c7;
width: 100%;
height: 75vh;
}
.div2 {
width: 100%;
height: 25vh;
background-color: red;
}
Goal: In the content area of a site, I need to make a decorative-only column that spans the height of two divs (containing images) beside it.
Problem: the column either has no height, regardless which attributes I give it, or only has the height of the first sibling div and no fill. I have tried height: 100%, min-height: 100%. Also tried making parent position: absolute and setting top: 0 and bottom: 0.
the code:
.row {
position: relative;
overflow: hidden;
border: #000 3px dashed;
}
#colLeft {
float: left;
width: 15%;
height: 100%;
background-color: red;
}
#B1 {
float: left;
width: 84%;
height: 100px; /* this will actually be the height of the img */
background-color: green;
}
#B2 {
width: 84%;
height: 100px; /* this will actually be the height of the img */
float: left;
background-color: #ff0;
}
<div class="row">
<div id="colLeft"></div>
<div id="B1">
<img src="foo">
</div>
<div id="B2">
<img src="bar">
</div>
</div>
Thanks in advance for your help.
what I want: http://i.stack.imgur.com/sgr5g.png
What I get: http://i.stack.imgur.com/lS63m.png
You should change the left column to position: absolute.
.row {
position: relative;
overflow: hidden;
border: #000 3px dashed;
}
#colLeft {
float: left;
width: 20%;
position: absolute;
height: 100%;
background-color: red;
}
#B1 {
float: right;
width: 80%;
height: 100px;
background-color: green;
}
#B2 {
width: 80%;
height: 100px;
float: right;
background-color: #ff0;
}
<div class="row">
<div id="colLeft"></div>
<div id="B1">
<img src="foo">
</div>
<div id="B2">
<img src="bar">
</div>
</div>
In your code you have height: 100px; /* this will actually be the height of the img */ for both img in your .row
You can do it like this also, fiddle http://jsfiddle.net/DIRTY_SMITH/QwZuf/260/
in this example I set the height of 200px to the row and height of 100% to the column
.row {
position: relative;
overflow: hidden;
border: #000 3px dashed;
height: 200px;
}
#colLeft {
float: left;
width: 15%;
height: 100%;
background-color: red;
}
Here's an alternate solution I found that works very well, too.
.row {
display: table-row;
}
#colLeft {
display: table-cell;
width: 15%;
background-color: red;
}
#B1 {
display: table-cell;
width: 84%;
height: auto;
background-color: green;
}
#B2 {
display: table-cell;
width: 84%;
height: auto;
background-color: #ff0;
}
I want the blue div (as shown in the fiddle below) to be to the right of the red div. Instead it's below. If I set parent to overflow: hidden, it's still below and just hides it.
EDIT: In simplifying my code, I left out the display: table on my text div. I have added that in here: http://jsfiddle.net/z1385n05/3/
http://jsfiddle.net/z1385n05/
http://jsfiddle.net/z1385n05/1/ (with overflow: hidden)
HTML:
<div class="outer">
<div class="parent">
<div class="child1">1</div>
<div class="child2"><span>Child 2 is longer than the edge, I don't want it to wrap</span></div>
</div>
</div>
CSS:
.outer
{
position: relative;
width: 320px;
height: 480px;
border: solid 1px #cccccc;
}
.parent
{
position: absolute;
top: 100px;
left: 150px;
height: 20px;
overflow: visible;
}
.child1
{
position: relative;
width: 30px;
height: 100%;
float: left;
background-color: red;
}
.child2
{
position: relative;
height: 100%;
float: left;
background-color: blue;
white-space: nowrap;
overflow: hidden;
display: table;
}
.child span
{
position: relative;
width: 100%;
vertical-align: bottom;
display: table-cell;
}
After your updated question you can achieve this if you set parent display:table and .child2 display:table-cell
.parent
{
position: absolute;
top: 100px;
left: 150px;
height: 20px;
overflow: hidden;
display:table;/*Add this*/
}
.child2
{
position: relative;
height: 100%;
background-color: blue;
white-space: nowrap;
display: table-cell;/*Add this*/
overflow: hidden;
}
fiddle
The reason why the blue box is floating below the red box is because there is not enough horizontal space for them to be side by side.
To solve this there are 2 solutions:
1) increase the width of .outer until the boxes are side by side
For example:
.outer
{
position: relative;
width: 620px;
height: 480px;
border: solid 1px #cccccc;
}
Or
2) increase the width of .parent until the boxes are side by side
For example:
.parent
{
position: absolute;
top: 100px;
left: 150px;
height: 20px;
overflow: visible;
width: 620px;
}
Your outer div is too small to accomodate text without wrapping.
Try this, increase width, tested on jsfiddle you posted:
.outer
{
position: relative;
width: 620px;
height: 480px;
border: solid 1px #cccccc;
}
Cheers !!
I looked through many posts and still can't get this one to work...
My goal is to style css only (no javascript) so that the height of DIV class "two" always fit into the DIV class "container".
The container DIV's height could change like window resize that is why I would like my "two" DIV to be able to change the size accordingly. So I set the container DIV height to 300px here but it could be any px like 500px etc
Please let me know if you need more clarification. Thanks in advance!
http://jsfiddle.net/pn9Qa/
HTML
<div class='container'>
<div class='top'>some text</div>
<div class='bottom'>
<div class='one'>header</div>
<div class='two'>items here</div>
</div>
</div>
CSS
.container
{
height: 300px;
width: 100%;
border: 3px solid red;
}
.top
{
height: 60px;
width: 100%;
background-color:pink;
float:left;
}
.bottom
{
width: 100%;
height: 100%;
background-color: green;
float: left;
}
.one
{
width: 100%;
height: 30px;
background-color: orange;
}
.two
{
width: 100%;
height: 100%;
background-color: yellow;
overflow: auto;
}
Here's one using calc():
width: -webkit-calc(100% - 60px); /* note, the space is necessary */
Here's one using display: flex
display: -webkit-flex;
-webkit-flex-direction: column;
Here's one using padding/margins and z-index:
box-sizing: border-box;
padding: 60px;
position: relative;
top: -60px;
Then, the old, do some math yourself version.
Brevity on prefixes used. Use http://caniuse.com/ if you need to see which ones are necessary.
Add "overflow: hidden;" to the .container rule, like this: http://jsfiddle.net/pn9Qa/2/
.container
{
height: 300px;
width: 100%;
border: 3px solid red;
overflow: hidden;
}
Do you need this: http://jsfiddle.net/pn9Qa/1/
html, body { height: 100%; }
.container
{
height: 100%;
width: 100%;
border: 3px solid red;
}
.top
{
height: 100%;
width: 100%;
background-color:pink;
float:left;
}
.bottom
{
width: 100%;
height: 100%;
background-color: green;
float: left;
}
.one
{
width: 100%;
height: 30px;
background-color: orange;
}
.two
{
width: 100%;
height: 100%;
background-color: yellow;
overflow: auto;
}