I have a relative parent div and a fixed child div. i would like the relative parent to get the width from the child div.
<div id="parent">
<div id="child">
</div>
</div>
Css Code;
#parent {
position: relative;
top: 40px;
left: 20px;
background-color: #F1A323;
padding: 20px;
box-shadow: 10px 10px 5px #0F0F0F;
border:2px solid;
border-radius:25px;
-webkit-border-radius: 25px;
behavior: url(pie/PIE.htc);
}
#child{
position: fixed;
background-color: #FDF0DA;
height: 100px;
}
#parent{width:500px;}
#child{width:100%}
It may help.
Use the following:
#child{
width:100%;
}
If that doesnot work, use:
#child{
min-width:100%;
max-width:100%;
}
Give the width to parent div(which you want to give to the child div)
#parent {
width: 650px;
}
#child {
width: 100%;
}
the parent and child div are always equal.
Related
Convert the boxes into cocentric circles (circles within each other that share the same center). The outer circle should be black with a size of 300px and the inner circle should be white with a size of 200px.
html:
<div id="p10">
<div id="outer">
<div class="rectangle" id="inner"></div>
</div>
css:
#p10 #outer {
border-radius: 100%;
background-color: #000;
width: 300px;
height: 300px;
border-color: #000;
position: absolute;
}
#p10 #inner {
background-color: #fff;
border-color: #fff;
border-radius: 100%;
width: 200px;
height: 200px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
The css works only if #p10 #outer position's absolute. I'm kind of confused on why this is so. Does this mean that any time I want a subelement position's to be absolute, all of the parent's positions must be absolute?
The position of a position:absolute element is relative to the closest container with which the position is set to either absolute, relative, or fixed, otherwise it is relative to the viewport.
It can also be relative to the initial containing block if none of the top, right, bottom, or left offset value was specified.
There could be more possibilities, you can learn more on W3C, and MDN.
just change the position relative of parent div
#p10 #outer {
border-radius: 100%;
background-color: #000;
width: 300px;
height: 300px;
border-color: #000;
position: relative;
}
I would suggest to use position:absolute for the outer and position:relative for the inner. Then, set the border-radius property at half the width in pixels. Percentage in border-radius could cause some problems. Naturally you need to center the inner, so give it these properties.
#inner {
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
position:relative;
width:200px;
border-radius:100px;
}
Absolute/relative might not be neede here , at least relative for inner content.
you can also relay on padding and mind box-sizing:
#p10 #outer {
border-radius: 100%;
background-color: #000;
width: 200px;
height: 200px;
padding:50px;
border-color: #000;
/*position: absolute;*//* did you need it ? it will work the same for the child; */
box-sizing:content-box; /*make sure padding is not included in size calculation*/
}
#p10 #inner {
background-color: #fff;
border-color: #fff;
border-radius: 100%;
width: 200px;
height: 200px;
}
<div id="p10">
<div id="outer">
<div class="rectangle" id="inner"></div>
</div>
you can also relay on marging and mind collapsing margins:
#p10 #outer {
border-radius: 100%;
background-color: #000;
width: 300px;
height: 300px;
border-color: #000;
/*position: absolute;*//* did you need it ? it will work the same for the child; */
padding:1px; /* mind [collapsing margins][1] */
}
#p10 #inner {
background-color: #fff;
border-color: #fff;
border-radius: 100%;
width: 200px;
height: 200px;
margin:50px;
}
<div id="p10">
<div id="outer">
<div class="rectangle" id="inner"></div>
</div>
You may also use flex :
#p10 #outer {
border-radius: 100%;
background-color: #000;
width: 300px;
height: 300px;
display:flex;
align-items:center;
justify-content:center;
border-color: #000;
/*position: absolute;*//* did you need it ? it will work the same for the child; */
}
#p10 #inner {
background-color: #fff;
border-color: #fff;
border-radius: 100%;
width: 200px;
height: 200px;
}
<div id="p10">
<div id="outer">
<div class="rectangle" id="inner"></div>
</div>
You can also use a single box
.circle {
/* diplay, float, position, .. whatever is needed to be inserted mong the rest of your document styles*/
margin:55px;
height:200px;
width:200px;
border:solid;
box-shadow:0 0 0 50px gray, 0 0 0 53px;
border-radius:50%;
<div class="circle"></div>
There is a simple example where a div element contains h3.
But the h3 element drops down its parent div when h3 has position relative.
Changing h3 position to absolute solves this problem.
What is the reason?
.personal-details{
background-color: green;
}
.personal-image{
display: inline-block;
width: 150px;
height: 150px;
background-color: white;
}
.personal-description {
display: inline-block;
width: 150px;
height: 150px;
background: black;
}
.personal-description h3 {
position: relative; /*absolute solves the problem*/
}
<div class="personal-details">
<div class="personal-image"></div>
<div class="personal-description"><h3 class="name">My Name</h3></div>
</div>
This is caused by the default vertical-align: baseline; property of inline-block elements.
Overriding the default with vertical-align: top for your element will get you somewhere like correct:
.personal-details {
background-color: green;
vertical-align: middle
}
.personal-image {
display: inline-block;
width: 150px;
height: 150px;
background-color: green;
}
.personal-description {
display: inline-block;
width: 150px;
height: 150px;
background: black;
vertical-align: top;
}
.personal-description h3 {
position: relative;
background: yellow;
}
<div class="personal-details">
<div class="personal-image"></div>
<div class="personal-description"><h3 class="name">My Name</h3></div>
</div>
Notice I say "somewhere like correct" as you will still have issues with space around the elements (notice the gap below the black square and space between the two child divs). But that is out of the scope of your question and has been dealt with many times before.
.personal-details{
background-color: red;
}
.personal-image{
display: inline-block;
width: 150px;
height: 150px;
background-color: green;
margin:0;
}
.personal-description {
float:left;
display: inline-block;
width: 150px;
height: 150px;
background: black;
margin:0;
padding:0;
}
.personal-description h3 {
margin:0;
background-color:blue;
padding:0;
position: relative; /*absolute solves the problem*/
}
<div class="personal-details">
<div class="personal-image"></div>
<div class="personal-description"><h3 class="name">My Name</h3></div>
</div>
May be your are familiar with all the positioning.Firstly, you need to understand about it.There are four possible useful positioning in css which are given below.
Static
Relative
Absolute.
Fixed
-Static positioning:
It is basically a default position of every element or tag, use of this position will never effect on your element’s state or position.In static we can not use top,left, bottom & right properties.
position:static;
-Relative:
Relative positioning,makes element or tag movable.Yes, we can move it any where on container.By default it works like an static but we can use left,top,bottom & right in it.
position: relative;
top:50px;
left:50px;
-Absolute:
Absolute positioning, get the space according to browser window or container(that may be parent or ancestor) window.If container window’s position set to relative than absolute will get the position according to container.
position:absolute;
left:0px;
right:0px;
Task: Now, make a parent div and it’s two child's and check both relative and absolute.
/* Example */
</div>
<div class='box2'>
<h3>Here my name</h3>
</div>
</div>
.parent_box{
background-color:grey;
margin-top: 20px;
}
.box1{
height:200px;
width: 200px;
background-color:red;
display: inline-block;
}
.box2{
height: 200px;
width: 200px;
background-color:yellow;
display: inline-block;
position: relative;
}
.box2 h3{
position: absolute;
/* Working according to it's parent because it's parent div contains relative position now check it by given it left top and remove the position relative of box2*/
}
I'm having an issue using display: table and display: table-cell.
Fiddley: http://jsfiddle.net/5q51sbqb/1/
I have a div with a display:table; and within that two divs with display:table-cell;
The left div (.t1) is a fixed width and the right div(.t2) should take up the rest of the space to the edge of the container.
My issues lies with adding a long div (2000px) to the right div(.t2). I basically need the content-window to stay the same width as its parent without pushing out further than the confines of the container, as to allow the content within to be scrolled.
Keep in mind this needs to be without using a fixed width, as the container and t2 are both responsive. And I also have to use table and table-cell display properties :(
So basically the children of the .t2 div are flowing beyond the container when I need them to fit within the container width ( without setting a fixed width on the content-window ... and on the .t2 div)
I'm stumped.
HTML
</div>
</div>
<div class="table-cell t2">
<div id="content-window">
<div id="content"></div>
</div>
</div>
</div>
</div>
CSS
#container{
width: 600px;
height: 600px;
margin: 0px auto;
background-color:green;
padding: 2px;
}
#table{
display:table;
width:100%;
}
.table-cell{
display:table-cell;
height: 300px;
padding:2px;
}
.t1{
width: 100px;
background-color: red;
}
.t2{
width:auto;
background-color: blue;
}
#content-window{
width:100%;
overflow:scroll;
}
#content{
width: 2000px;
height: 50px;
background-color:yellow;
}
Since you smartly created a #content-window, set it to be a position: absolute; so it won't mess up the cell's auto width. Just remember to set the .t2 to be a position: relative, so the #content-window might fill it in width and height, using the contained space of the right table cell.
tip: Use overflow-x if you want it to scroll only horizontally.
#container{
width: 600px;
height: 600px;
margin: 0px auto;
background-color:green;
padding: 2px;
}
#table {
display:table;
width:100%;
}
.table-cell{
display:table-cell;
height: 300px;
padding:2px;
}
.t1 {
width: 100px;
background-color: red;
}
.t2 {
position: relative;
background-color: blue;
}
#content-window{
position: absolute;
width:100%;
height: 100%;
overflow: hidden;
overflow-x: scroll;
height:50px;
}
#content{
width: 2000px;
height: 50px;
background-color:yellow;
}
Check it here: http://jsfiddle.net/5q51sbqb/4/
I have a problem with my CSS regarding div positions.
I have a parent div which is set to position:relative and a child div set to position:absolute
But for some reason the child div is displaying below and outside the borders of the parent div...
This is my CSS:
.big{
position:relative;
width:40%;
border:1px solid black;
display:inline-block;
}
.small{
position:absolute;
width:75px;
height:75px;
border:1px solid green;
}
The HTML:
<div class="big">
<p align="center">Test</p>
<div class="small"></div>
</div>
<div class="big">
<p align="center">Test</p>
<div class="small"></div>
</div>
I have provided a JSFiddle to show you it in action:
http://jsfiddle.net/j6VLc/1/
How do i fix it to make the child div be inside the parent div whilst using position:absolute for it?
You can't do this using position: absolute as it removes the element from the normal document flow. position: relative on the parent will change where the position: absolute is positioned relative to, but it will not expand to contain the position: absolute. You will need to set a fixed height or using position: relative instead.
Note, if using position: relative in your example, you will need to add a margin-bottom equal to the value of top to make it expand to contain the position: relative.
.big {
position: relative;
width: 40%;
border: 1px solid black;
display: inline-block;
}
.small {
position: relative;
width: 75px;
height: 75px;
border: 1px solid green;
top: 50px;
left: 40px;
margin-bottom: 50px;
margin-right: 40px;
}
<div class="big">
<p align="center">Test</p>
<div class="small"></div>
</div>
<div class="big">
<p align="center">Test</p>
<div class="small"></div>
</div>
As you have given a height of 75px to the child div and inside the parent div you have also given <p> which is a block element so the <p> tag is making its space and after that your child div is appearing....Make the div height of parent element larger than child and style the <p> tag to display: inline;
.big {
position: relative;
width: 40%;
height: 100px;
border: 1px solid black;
display: inline-block;
}
.small {
position: absolute;
width: 75px;
height: 75px;
border: 1px solid green;
}
p {
display: inline;
}
Hope this will get you to what you want.
Given 2 elements positioned relatively inside a relatively positioned parent, how do I get the elements to respect their z-index?
HTML:
<div class="content">
<img src="http://placekitten.com/100/100" alt="" class="preview">
<img src="http://placekitten.com/200/200" alt="" class="full">
</div>
CSS:
.content {
position:relative;
z-index:1;
outline:1px solid blue;
}
.preview {
z-index:1;
position:relative;
outline:1px solid yellow;
}
.full {
z-index:2;
position:relative;
outline:1px solid green;
}
JSFiddle: http://jsfiddle.net/2Nz2g/1/
I'm trying to get the .full element to be placed overtop the .preview element, so that basically .full elements position isn't affected by the .preview element at all.
I've tried floating the elements to no avail. Positioning absolutely is not an option as it totally throws off the position. Setting top:0;left:0 also has no effect.
I've had some cases where if an element is rendered after another, some browsers may ignore the z-index and draw them as they would do normally. In this cases you should set the z-index to a negative (<0) value to force them to be under the next elements:
Take a look at this fiddle, where all z-indexes are positive:
HTML:
<div id="first"></div>
<div id="second"></div>
CSS:
#first {
width: 200px;
height: 100px;
background: red;
z-index: 10;
}
#second {
width: 200px;
height: 100px;
background: blue;
position: relative;
top: -30px;
left: 40px;
z-index: 1;
}
Here the second div is rendered on top of the first one no matter what z-index I specify.
But take a look at this one:
HTML:
<div id="first"></div>
<div id="second"></div>
CSS:
#first {
width: 200px;
height: 100px;
background: red;
z-index: 10;
}
#second {
width: 200px;
height: 100px;
background: blue;
position: relative;
top: -30px;
left: 40px;
z-index: -1;
}
As you can see I only set the second element's z-index to -1 and now it's rendered properly.
This was tested on Google Chrome 35. You may want to check this bug on other browsers.
Is possible for you set a top / left /rigth positions to move the div
Css:
.content {
position:relative;
z-index:1;
outline:1px solid blue;
}
.preview {
z-index:1;
position:relative;
outline:1px solid yellow;
}
.full {
top:20px;
right:20px;
z-index:2;
position:relative;
outline:1px solid green;
}
http://jsfiddle.net/2Nz2g/4/
This can be fixed by using position: relative on the parent div and position: absolute on the images. This forces the images to be aligned on top of each other
JSFiddle: http://jsfiddle.net/yL5Sf/