This question already has answers here:
Is there a way to make a child DIV's width wider than the parent DIV using CSS?
(15 answers)
Closed last year.
is there any way how can I make div bigger then its parent? I know its bad practice.
Basically I have div that is small and I need to create div inside which will be through entire window. But cant find way how to do it.
Thanks for any help.
You need to "pop" that element from normal flow with position rule with specified dimensions. E.g. position: fixed;
.outer {
width: 10vw;
height: 10vh;
position: relative;
background: rgba(130, 130, 255, .3);
border: 1px solid red;
}
.inner {
width: 90vw;
height: 90vh;
position: absolute;
left: 5px;
top: 5px;
background: rgba(130, 255, 130, .3);
border: 1px solid green;
}
<div class="outer">
<div class="inner"></div>
</div>
Alternative
Have overflow: visible with specified dimensions
.outer {
width: 10vw;
height: 10vh;
position: relative;
background: rgba(130, 130, 255, .3);
border: 1px solid red;
overflow: visible;
display: inline-block;
vertical-align: top;
}
.inner {
width: 90vw;
height: 90vh;
margin: 5px;
margin: 5px;
background: rgba(130, 255, 130, .3);
border: 1px solid green;
}
<div class="outer">
<div class="inner"></div>
</div>
You can do it easily. As long as the parent doesn't have overflow: hidden, you can even define its dimensions with pixels and see it working!
.parent {
height: 40px;
width: 40px;
background: red;
}
.child {
height: 100px;
width: 100px;
background: transparent;
border: 1px solid green;
}
<div class="parent">
<div class="child"></div>
</div>
If you want it over the entire screen, you can use vh and vw:
.child {
height: 100vh;
width: 100vw;
background: transparent;
border: 1px solid green;
}
Give a certain height & width to your parent.
Use % for the your .child element.
.parent {
height: 40px;
width: 40px;
background: gray;
}
.child {
height: 125%;
width: 125%;
background: transparent;
border: 1px solid green;
}
<div class="parent">
<div class="child"></div>
</div>
You can use absolute sizing in CSS to have a child div be larger than the parent. You will also need to add in the top and left attributes and set them to 0. This will frame the div to begin in the top left corner.
If you want a div to be the full width and height of the viewport, use the following CSS:
.parent {
position: relative;
width: 120px;
height: 120px;
border: 1px solid red;
}
.child {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
border: 1px solid blue;
}
<div class='parent'>
<div class='child'>
</div>
</div>
This will allow the div to resize based on the user's screen dimensions.
More on CSS sizing can be found here.
Related
i need to position 2nd element is next to the first element.So i set top value as 100%. the starting point of 2nd element is varies when device pixel ratio as 1.5.
Machine : Lenovo YOGA 500,
Scale : 150%,
Resolution: 1920 * 1080,
Browser: Except Firefox
.wrap {
background-color: #fff;
border: 1px solid #ef36d8;
position: absolute;
top: 70px;
}
.content {
width: 100px;
height: 100%;
padding: 5px;
}
div {
box-sizing: border-box;
}
.arrow {
position: absolute;
width: 16px;
height: 8px;
left: 50px;
top: 100%;
background-color: #fff;
border: 1px solid #ef36d8;
border-top: 1px solid #fff;
}
<div class="wrap">
<div class="content">Content area</div>
<div class="arrow"></div>
</div>
this issue occurs only when device pixel ratio as 1.5.
the arrow class element start position varies based on device pixel ratio.i need to remove border top of red highlighted element
Kindly guide me any solution on this?
Thanks is advance
Definitely an interesting problem. The only way I was able to remove that extra line was to have another, slightly smaller div box within the arrow:
HTML
<div class="wrap">
<div class="content">Content area</div>
<div class="arrow"></div>
<div class="secondary-arrow"></div>
</div>
CSS
.wrap {
background-color: #fff;
border: 1px solid #ef36d8;
position: absolute;
top: 70px;
}
.content {
width: 100px;
height: 100%;
padding: 5px;
}
div {
box-sizing: border-box;
}
.arrow {
position: absolute;
width: 16px;
height: 8px;
left: 50px;
top: 100%;
background-color: #fff;
border: 1px solid #ef36d8;
border-top: 1px solid #fff;
}
.secondary-arrow {
position: absolute;
width: 14px;
height: 7px;
left: 51px;
top: 100%;
background-color: #fff;
}
I have a div2 inside another div1. The div1 has a fixed height and an overflow. Here is the scenario:
Where the outer dark yellow div is the div1 (having a scroll which you can see on the right side), and the div.box1-large(light yellow border) is the div2. As you can see, the div2's extra content is hidden inside the div1 which I can see only when I scroll the div1. How can I bring the div2 out of div1? Please note that div1 has many other divs too inside it.
Here are the corresponding css:
.div1 {
background: #2a2a2a;
border-style: solid;
border-width: 0 1px 1px 1px;
padding: 10px;
min-height: 350px;
height: 350px;
overflow: auto;
}
.div2 {
border: solid 10px;
font-size: 13px;
text-align: left;
width: 420px;
height: 270px;
background: green;
position: absolute;
left: 0px;
z-index: 9;
top: 62px;
}
EDIT
Here is the initial div:
I tried to change div1 css to
.div1 {
background: #2a2a2a;
border-style: solid;
border-width: 0 1px 1px 1px;
padding: 10px;
min-height: 350px;
height: 350px;
overflow: visible;
}
But this removes the scroll in div1 and shows:
What I want is the above secenario but with scroll in div1.
ok. The way i understand it.
You want the .div2 to be detached from the div1 . But div1 should remain scroll-able because of others div..ns inside it.
i guess position:absolute should do it.
Made a small fiddle, have a look see. Better view in full screen
body {
font-family: Arial, sans-serif;
font-size: 14px;
}
.div1 {
background: #2a2a2a;
border-style: solid;
border-width: 0 1px 1px 1px;
padding: 10px;
min-height: 350px;
height: 350px;
overflow: auto;
}
.inter {
border: solid 10px;
background-color: blue;
height: 100px;
width: 100px;
}
.div2 {
border: solid 10px;
font-size: 13px;
text-align: center;
width: 420px;
height: 270px;
background: green;
z-index: 9;
}
.abs {
position: absolute;
background-color: red;
}
<div class="div1">
<div class="inter">Something</div>
<div class="div2 abs">Stuff Man</div>
<div class="div2">What??</div>
<div class="div2">What??</div>
</div>
Let me know if this helps, or if it missed the mark completely !
maybe you are looking for this?
$(".div2").appendTo($(".div1").parent);
I'm trying to align a div in the center, but neither text-align: center, nor margin: 0 auto, seems to work on the absolute positioned element. I'm assuming neither works on absolute positioned elements. In this case, what should I do instead?
#wrap {
border: 1px solid black;
position: relative;
width: 500px;
height: 250px;
margin: 0 auto;
text-align: center;
}
#absolute {
border: 1px solid red;
position: absolute;
display: block;
bottom: 0;
margin: 0 auto;
cursor: pointer;
}
<div id='wrap'>
<div id='absolute'>Click Me</div>
</div>
Without changing the HTML, the easiest approach to center the element horizontally would be to combine left: 50% and transform: translateX(-50%). This will essentially position the element 50% to the right and then displace half of the element's width by transforming it -50% to the left. In doing so, the element will be centered horizontally regardless of the width which means that you don't need to hardcode any values.
position: absolute;
left: 50%;
transform: translateX(-50%);
Updated Snippet:
#wrap {
border: 1px solid black;
position: relative;
width: 500px;
margin: 0 auto;
height: 80px;
}
#absolute {
border: 1px solid red;
position: absolute;
transform: translateX(-50%);
left: 50%;
bottom: 0;
cursor: pointer;
}
<div id="wrap">
<div id="absolute">Click Me</div>
</div>
Alternatively, if you can change the HTML, simply add left: 0 and right: 0 to the absolutely positioned element element in order for it to take the width of the parent container. Then you can add text-align: center in order to center the child element:
Updated Snippet:
#wrap {
border: 1px solid black;
position: relative;
width: 500px;
margin: 0 auto;
height: 80px;
}
#absolute {
position: absolute;
left: 0; right: 0;
bottom: 0;
text-align: center;
}
#absolute > span {
border: 1px solid red;
cursor: pointer;
}
<div id="wrap">
<div id="absolute">
<span>Click Me</span>
</div>
</div>
Since you know the size of the wrapper, you can just add left: 250px (half the wrapper size) to the css of your absolutely positioned element.
I would like my inner div to be on the bottom-right corner of the outer div, by using float: right, but for some reason, it'll staying on the bottom-left corner. What am I doing wrong?
#outer {
width:100%;
height:20%;
border: 1px solid black;
position: absolute;
}
#inner {
width: 50px
height: 50px;
border: 1px solid red;
position: absolute;
float: right;
bottom: 0;
}
<div id = 'outer'>
<div id = 'inner'>
bottom-right corner;
</div>
</div>
Add right: 0 instead.
Floating the element won't have any effect on it if it's absolutely positioned.
#outer {
width: 100%;
height: 20%;
border: 1px solid black;
position: absolute;
}
#inner {
width: 50px height: 50px;
border: 1px solid red;
position: absolute;
bottom: 0;
right: 0;
}
<div id='outer'>
<div id='inner'>
bottom-right corner;
</div>
</div>
change css property for outer div as below:
#inner {
width: 50px
height: 50px;
border: 1px solid red;
position: absolute;
bottom: 0;
right:0
}
I want to create a css class for loading operations. I have div panels that contains ajax request operations. I will overlay loading blur on panel. but not working. This is my working code
Text and buttons not appearing under the loading incon. my transparent is 0.4
.main{
height: 250px;
width: 300px;
border: solid 1px red;
overflow: hidden;
float:left;
margin-right:10px;
}
.medium{
height: 250px;
width: 100px;
border: solid 1px blue;
overflow: hidden;
}
.loading {
position:relative;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba( 205, 205, 205, 0.4 )
url('http://www.easyshopindia.com/images/loading.gif')
50% 50%
no-repeat;
}
body .loading{
display:block;
overflow:hidden;
}
<div class="main">
<div class="loading">
</div>
<button>show images</button>
<p>This is my paragraph.</p>
</div>
<div class="medium">
<div class="loading">
</div>
<button>show info</button>
<p>hello this is small box</p>
</div>
i think you want to set loading as overlay, for that you have to give the parent element as position: relative and give child loading element position: absolute to fill the parent element.
.main{
height: 250px;
width: 300px;
border: solid 1px red;
overflow: hidden;
float:left;
margin-right:10px;
position: relative;
}
.medium{
height: 250px;
width: 100px;
border: solid 1px blue;
overflow: hidden;
position: relative;
}
.loading {
position: absolute;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba( 205, 205, 205, 0.4 )
url('http://www.easyshopindia.com/images/loading.gif')
50% 50%
no-repeat;
}
See this updated jsfiddle :- http://jsfiddle.net/pvvo7kre/7/