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);
Related
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.
Could some one help me with one question:
I have 2 divs.
The first one is being used to rotate the second div.
the second one to rotate it self to the regular rotation.
I click on first div --> it rotates the second DIV.
I click on the second div, it's rotating it self to the previous/regular position.
#_4220w_86 {
height: 20px;
width: 20px;
background-color: #171717;
border-radius: 50%;
margin-top: -43px;
margin-left: 124px;
cursor: pointer;
}
#_4220w {
width: 0;
height: 0;
border-top: 3px solid transparent;
border-left: 6px solid #ec820f;
border-bottom: 3px solid transparent;
margin-left: 132px;
margin-top: -13px;
cursor: pointer;
}
#_4220w_2 {
position: absolute;
right: 20px;
height: 28px;
width: 28px;
background-color: #0f0f0f;
border-radius: 100%;
cursor: pointer;
top: 45px;
}
._4220w_2 {
width: 0;
height: 0;
border-style: solid;
border-width: 5.5px 0 5.5px 10px;
border-color: transparent transparent transparent #ec820f;
margin-left: 10px;
margin-top: 8px;
}
<!--Here is the first DIV:-->
<div id="_4220w_86">
</div>
<div id="_4220w">
</div>
<!--Here is the second DIV:-->
<a href="#" id="_4220w_2">
<div class="_4220w_2"></div>
</a>
try to use this code
http://jsfiddle.net/24yboknc/1/
html
<div id="rotate">rotate the other</div>
<div id="rotate2"> back to normal</div>
css
#rotate,#rotate2{
width: 100px;
height: 100px;
background: red;
margin: 50px;
text-align: center
}
#rotate2.rotated{
transform: rotate(90deg);
}
js
$('#rotate').click(function(){
if(!$('#rotate2').hasClass('rotated')){
$('#rotate2').toggleClass('rotated');
}
});
$('#rotate2').click(function(){
if($('#rotate2').hasClass('rotated')){
$('#rotate2').removeClass('rotated');
}
});
inspired to jQuery rotate div onclick +/-90
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'm trying to create a popup with 2 inner divs with responsive sizing.
I thought I could achieve this by setting their width and height as percentages of the parent div but it doesn't seem to work. If you resize your browser window, the leftArea div in my jsfiddle falls out of the popup div.
How can I fix this?
jsfiddle
Use box-sizing: border-box; property to set the padding and border inner the box width.
Check more docs here: box-sizing - CSS
body {
background-color: black;
}
.popup {
position: absolute;
margin: 0 auto;
width: 80vw;
height: 10vh;
left: 0%;
right: 0%;
top: 50%;
display: block;
background-color: orange;
border: 2px solid white;
border-radius: 15px;
}
.leftArea {
position: relative;
float: left;
width: 85%;
height: 98%;
margin: 0px;
background-color: red;
border-radius: 14px 0px 0px 14px;
border: 0px;
padding-left: 10px;
padding-right: 10px;
box-sizing: border-box; /* Use this property to set the padding inner */
display: inline-block;
text-align: left;
}
.rightArea {
position: relative;
float: right;
width: 12.25%;
height: 100%;
background-color: #123456;
margin: 0px;
display: inline-block;
border-radius: 0px 14px 14px 0px;
border: 0px;
}
<div class="popup">
<div class="leftArea"></div>
<div class="rightArea"></div>
</div>
I have to develop a webpage with three div elements with varying widths. I am using the below snippet to do so .
page1.html
<div id="wrapper">
<div id="left_pane>Left Pane</div>
<div id="main_pane">Main Pane</div>
<div id="right_pane>Right Pane</div>
</div>
page1.css
#wrapper{
font-size: 20px;
letter-spacing: 0px;
white-space: nowrap;
line-height: 12px;
/*overflow: hidden;*/
width: 100%;
}
#left_pane{
width: 10%;
height: 100%;
border: solid 1px #ccc;
display: inline-block;
vertical-align: top;
margin-right: -6px;
}
#main_pane{
width: 70%;
height: 100%;
border: solid 1px #ccc;
display: inline-block;
vertical-align: top;
margin-right: -6px;
}
#right_pane{
width: 20%;
height: 100%;
border: solid 1px #ccc;
display: inline-block;
vertical-align: top;
margin-right: -6px;
}
The problem is that while this works fine, in the main pane I have source of dynamic content and when it increases I want other divs to increase there size as well, but none of them are increasing with increase in content. Can anyone please help me with the same ?
( I also tried using display:table-cell but for that I cannot specify the separate width, as I want each div to be of a specified width )
Thanks and Regards
Just remove the white-space: nowrap; and add word-wrap: break-word;
#wrapper{
font-size: 20px;
letter-spacing: 0px;
line-height: 18px;
width: 100%;
word-wrap: break-word;
}
Check this Demo