I'd like to have a child div which top is only visible for 10 pixels at the bottom of a parent div (with the rest of it outside the parent div). How can I do that?
Edit: I had not considered the CSS calc function, as suggested by Temani Afif. So here is my CSS. However the child is at the top of its parent. I must be missing something.
.parent_div {
position:relative;
width: 200px;
height: 200px;
border: 1px solid #000000;
}
.child_div {
position:absolute;
top: calc(100%-10px);
left: 25%;
width:50px;
height:50px;
border: 1px solid #dbdde3;
background-color: #ff0000;
}
.parent{
border:1px solid red;
width:100px;
height:100px;
background-color:red;
position:relative;
}
.child{
position:absolute;
top:calc(100% - 10px);
border:1px solid green;
width:50px;
height:50px;
background-color:green;
}
<html>
<head>
</head>
<body>
<div class="parent">
<p>
parent div
</p>
<div class="child">
<p>
child div
</p>
</div>
</div>
</body>
</html>
Related
Is it somehow possible to ensure that inner div with class .b can be displayed over the outer div (class .a). For non lot of inner div is hidden. Simple z-index doesn't help and I not able to move inner div element outside the outer one.
I have html file :
<div class="a">
<span class="aa">AAAAA
<div class="b">
1.A
</div>
</span>
...
</div>
And css style like this :
.a {
position:absolute;
width:500px;
height:50px;
border:1px solid red;
overflow-y: auto;
overflow-x: hidden;
}
.b {
display: none;
background: #FFF;
position:absolute;
left: 10px;
top: 10px;
width:150px;
height:150px;
border:1px solid blue;
z-index:10;
}
.aa {
position: static;
}
.aa:hover .b {
display: block;
}
Here is js fiddle with my specification:
Jsfiddle
I have found solution by myself. Removing position: absolute from div with class a helped.
.a {
width:500px;
height:50px;
border:1px solid red;
overflow-y: auto;
overflow-x: hidden;
}
<div class="container">
<div class="logo">
<img src="C:\Users\Ragul\Desktop\my resume html\images.png">
</div>
</div>
.container {
width:100%;
}
.logo img {
float: left;
border: 1px solid black;
}
How does the float work in the above case?.
As next step, I want to fit the logo inside the div for navigation purpose. How should it be done?
When an element is floated it is taken out of the flow of a website. This means in your case the .container element will not use the .logo img element height to determine it's own height.
The solution to this is to clear the child elements float. This involves adding an element after the floated element and adding clear:both. A popular method of doing this these days it to use a pseudo element. In your example it would look like this.
<div class="container">
<div class="logo">
<img src="C:\Users\Ragul\Desktop\my resume html\images.png">
</div>
</div>
.container {
width:100%;
}
.logo img {
float: left;
border: 1px solid black;
}
/* clear float */
.container:after {
content:" ";
display:table;
clear:both;
}
when you use floated image,it takes out of the normal flow of the document.
So,
1) use : overflow:hidden
.container {
width:100%;
overflow:hidden;
}
2)use :after
.container:after {
contant:'';
display:block;
clear:both;
}
.container {
width:100%;
overflow:hidden;
background-color: #ccc;
}
.logo img {
float: left;
width: 50px;
border: 1px solid black;
}
<div class="container">
<div class="logo">
<img src="http://www.mrwallpaper.com/wallpapers/cute-bunny-1600x900.jpg">
</div>
</div>
Of course I realize that this question has been asked, and I'd thought I had the solution with this: https://stackoverflow.com/a/15971409/295133
But that answer only allows content overflow at the bottom, not at the top.
See this example (http://jsfiddle.net/7y2cb/251/):
.wrapper{
width: 400px;
height: 200px;
border: 2px solid red;
position:relative;
top:200px;
}
.inner{
max-width: 100%;
overflow-x: hidden;
border:1px blue solid;
}
.example{
width:600px;
height:500px;
background:green;
position:relative;
left:100px;
top:-200px;
}
<div class="wrapper">
<div class="inner">
<div class="example"></div>
</div>
</div>
I'm wondering there are any workarounds because it affects my site when viewed on an iPad and its scaling.
I have a div which scrolls horizontally hooked to some buttons with jQuery. That is working fine, the problem is i have a nested div in the scrollable content which becomes clipped as it overlaps the container. I need overflow on the x axis but not on the y.
overflow-x: hidden, overflow-y visible should solve this, but doesn't. I does work if i remove the overflow, but i need the overflow-x to scroll the div.
Simplified html / css below - without scrolling logic as that is not what is problematic here.. should be easy?
Thanks a million :) Andy
<!DOCTYPE html>
<html>
<head>
<title>TestDiv</title>
</head>
<body>
<div style="width:100%; height:150px; border:1px solid blue">
TOP DIV
</div>
<div class="slide" style="height:150px; width:800px; border: 1px solid blue; background-color: pink;">
<div style="border: 1px solid blue; width:1200px; height:150px;" class="inner" id="slider">
<table cellspacing="0" cellpadding="0" border="2" style="table-layout:fixed; width: 1200px; height:150px">
<tr><td>AAAAAAAAA</td><td>BBBBBBBBB</td><td><div class="container"><div class="testDiv">XXX</div></div>CCCCCCCCC</td><td>DDDDDDDDDD</td><td>EEEEEEEEEE</td><td>FFFFFFFFF</td><td>GGGGGGGGGG</td><td>GGGGGGGGGG</td><td>GGGGGGGGGG</td><td>GGGGGGGGGG</td><td>GGGGGGGGGG</td><td>GGGGGGGGGG</td><td>GGGGGGGGGG</td><td>GGGGGGGGGG</td></tr>
</table>
</div>
</div>
<div style="width:100%; height:150px; border:1px solid green;">
BOTTOM
</div>
</body>
</html>
<style scoped="scoped">
.slide
{
position:relative;
overflow-x: hidden;
overflow-y:visible;
}
.slide .inner
{
overflow-y:visible;
position:absolute;
left:0;
bottom:0;
padding:0px;
}
.container
{
width: 20px;
height: 20px;
background-color: black;
position: relative;
}
.testDiv
{
width: 235px;
position: absolute;
z-index: 999;
left:20px;
top: -180px;
height: 200px;
background-color: greenyellow;
}
</style>
The issue is that you are using "fixed" positioning. This will only work with "relative" positioning. To convert to relative positioning, you need to remember that the Top location is relative to the previous sibling element, whereas left is relative to the parent element.
I need to define a div which must stay with the top at the normal position, which differs from the top of the surrounding element:
position:relative
top:0
and which grows in the height up to the size of the surrounding element:
position:absolute
bottom:0
I have no idea how to combine the both. Whenever I use a relative box I loose the absolute bottom and whenever I use an absolute box I loose the relative top.
Can anybody help me how to do this in CSS?
Here is an example:
<html>
<head>
</head>
<style type="text/css">
#media screen {
body {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
padding: 0;
}
#head {
background-color: gray;
}
#rel {
background-color: green;
position: relative;
top: 0;
bottom: 0;
float: left;
}
#abs {
background-color: red;
position: absolute;
top: 0;
bottom: 0;
float: left;
}
}
</style>
<body>
<div id="head">
<h1>Head</h1>
</div>
<div id="abs">
<h2>absolute</h2>
</div>
<div id="rel">
<h2>relative</h2>
</div>
</body>
</html>
"relative" does not grow at all and "absolute" grows too much.
div {
top:0;
height:100%; /* height calculated based off the height of parent element */
margin:0;
}
height property CSS
Use display:table on the outer div and display table-row on the inner ones:
See this fiddle: http://jsfiddle.net/JKQ2y/15/
Html:
<div class="outer">
<div class="rel">
<div class="m b">text</div>
</div>
<div class="inner">
<div class="m r"></div>
</div>
</div>
Css:
.outer{
border:1px solid black;
height:100px; width: 100px
display:table;
}
.rel {
height:30px;
display:table-row;
}
.inner {
border: 1px solid red;
position:relative;
display:table-cell;
}
.m {height:100%;}
.m.b {border:1px solid blue;}
.m.r {border:1px solid red;}
HTML:
<div class="body">
<div class="head">
<div class="head-content">text</div>
</div>
<div class="growing-area">
</div>
</div>
CSS:
.body{
height:100px; width: 100px;
display:table;
}
.head {
height:0px;
display:table-row;
}
.growing-area {
position:relative;
display:table-cell;
}
defining a small height of the head is important but the real size is then controlled by the content or you can define the head-content height:
.head-content {
height:30px;
}
Fiddle: http://jsfiddle.net/JKQ2y/36/