How do I center a div in another div? - javascript

<div id="container">
<div id="div1">
<div id="div2"></div>
</div>
</div>
I want div 2 to be in the center of div1 no matter what, no matther how much the div2 width changes. Atm the div2 only get centered of the containers width.
How can I do this? Is JS the last way to go?

CSS flexbox does this with the justify-content and align-items attributes.
Style a class named something like bullseye as:
.bullseye {
display: flex;
justify-content: center;
align-items: center;
}
Then add the class to your div1 element:
<div id=container>
<div id=div1 class=bullseye>
<div id=div2>
This box is centered<br>
horizontally and vertically.
</div>
</div>
</div>
Fiddle with it:
https://jsfiddle.net/1rd6tcra/
Documentation:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

You give the outer div a width and the inner one you give margin 0 auto.
#container{
width: 100px;
}
#div1{
margin: 0 auto;
}

check this code below
<div id="container">
<div id="div1" style="width:100%;border:1px solid #F00;">
<div id="div2" style="width:60%;border:1px solid #F0F;">
here is my div2
</div>
</div>
</div>
make sure that your inner div has a certain width and it doesn't matter whatever the width of parent.
the css code is below
#div2{
margin:auto;
}
you can check this fiddle

The modern way to do this is:
#div1 {
position: relative:
}
#div2 {
position: relative;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}

Related

how to apply overflow:hidden for children of children with absolute positioning [duplicate]

We have two DIVs, one embedded in the other. If the outer DIV is not positioned absolute then the inner DIV, which is positioned absolute, does not obey the overflow hidden of the outer DIV.
#first {
width: 200px;
height: 200px;
background-color: green;
overflow: hidden;
}
#second {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
left: 250px;
top: 250px;
}
<div id="first">
<div id="second"></div>
<div id="third"></div>
</div>
Is there any chance to make the inner DIV obey the overflow hidden of the outer DIV without setting the outer DIV to position absolute (cause that will muck up our complete layout)?
Also position relative for our inner DIV isn't an option as we need to "grow out" of a table TD.
#first {
width: 200px;
height: 200px;
background-color: green;
}
#second {
width: 50px;
height: 400px;
background-color: red;
position: relative;
left: 0px;
top: 0px;
}
<table id="first">
<tr>
<td>
<div id="second"></div>
</td>
</tr>
</table>
Are there any other options?
Make outer <div> to position: relative and inner <div> to position: absolute. It should work for you.
What about position: relative for the outer div? In the example that hides the inner one. It also won't move it in its layout since you don't specify a top or left.
An absolutely positioned element is actually positioned regarding a relative parent, or the nearest found relative parent. So the element with overflow: hidden should be between relative and absolute positioned elements:
<div class="relative-parent">
<div class="hiding-parent">
<div class="child"></div>
</div>
</div>
.relative-parent {
position:relative;
}
.hiding-parent {
overflow:hidden;
}
.child {
position:absolute;
}
Make sure.
parent position relative.
parent have manually assigned width and height(important as child element having absolute position).
child position absolute;
.outer{
position:relative;
width:200px;
height:100px;
overflow:hidden;
}
.inner{
position:absolute;
width:100px;
height:100px;
font-size:3rem;
}
<div class="outer">
<div class=inner>
Inner DIV to apply overflw hidden
</div>
</div>
}
You just make divs like this:
<div style="width:100px; height: 100px; border:1px solid; overflow:hidden; ">
<br/>
<div style="position:inherit; width: 200px; height:200px; background:yellow;">
<br/>
<div style="position:absolute; width: 500px; height:50px; background:Pink; z-index: 99;">
<br/>
</div>
</div>
</div>
I hope this code will help you :)

Scrolled content ignoring CSS [duplicate]

This question already has answers here:
Why does the outer <div> here not completely surround the inner <div>?
(2 answers)
Closed 2 years ago.
How can I ensure, that in this example:
.wrapper{
width:300px;
overflow:auto;
}
.content{
background: red;
width:100%
}
<div class="wrapper">
<div class="content">
adsfkasdöfjkalsdjkaölsdfasödfjasdölfkajsdklöfajsdkflöasdfajsdfasdöadjf öklasdakdslfjasdölkfjasdlökfjasdkfajdsflköadsaklödsjaslköfjadslköjasdölfjasdklfj
</div>
</div>
when I scroll to the right, the text also still has a red background. It seems that CSS is taking the width of the displayed content to apply the background color, not the whole scrollable content.
In your code, .content takes 100% width of its parent .wrapper, which is 300px. Remove it.
Setting .content to display: inline-block does the trick:
.wrapper {
width: 300px;
overflow: auto;
}
.content {
display: inline-block;
background: red;
}
<div class="wrapper">
<div class="content"> adsfkasdöfjkalsdjkaölsdfasödfjasdölfkajsdklöfajsdkflöasdfajsdfasdöadjf öklasdakdslfjasdölkfjasdlökfjasdkfajdsflköadsaklödsjaslköfjadslköjasdölfjasdklfj
</div>
</div>
Just apply the background to the wrapper instead of the content:
.wrapper {
width: 300px;
overflow: auto;
background: red;
}
.content {
width: 100%
}
<div class="wrapper">
<div class="content">
adsfkasdöfjkalsdjkaölsdfasödfjasdölfkajsdklöfajsdkflöasdfajsdfasdöadjf öklasdakdslfjasdölkfjasdlökfjasdkfajdsflköadsaklödsjaslköfjadslköjasdölfjasdklfj
</div>
</div>

Outer DIV to wrap and expand upwards along with the inner DIV

Need a little bit help here. Thanks :)
I am struggling with how to make the outer div wrap the inner div and expand upwards along with the inner content editable div.
The inner div should expand from bottom to top and the outer div should wrap it (green color should wrap the red) and expand along with it.
Note: press SHIFT+ENTER in the red div to make it expand upwards.
I have an example in the following codepen
<div style="background-color:green;">
Test Test
<div id="example" contenteditable style="background-color:red; position: absolute; bottom: 0px">
Test Test
</div>
</div>
You can use flexbox:
.outer {
background: green;
display: flex;
flex-direction: column;
/* Some minimal width */
min-height: 50vh;
}
.inner {
background: red;
margin-top: auto;
}
<div class="outer">
Test Test
<div id="example" class="inner" contenteditable>
Test Test
</div>
</div>
Both of them must be absolute and wrappers height must be 100%.
<div style="background-color:green; height: 100%; position: absolute;">
wrapper
<div id="example" style="border: 1px solid red; position: absolute; bottom: 0;">
inner
</div>
</div>

Can Flexbox help me?

I have inherited somebody else's problem. The HTML is all DIVs with floats, displays and positioning tweaks. The one thing I cannot change is the structured of the HTML DIVs. Nor do I wish to add any new javascript libraries. But I can add all the CSS I need to the existing DIVs.
Currently 3 DIVs are embedded as:
<DIV id="firstrow"> 1 </DIV>
<DIV id="secondrow">
<DIV> 2 </DIV>
<DIV> 3 </DIV>
</DIV>
Take a look at the graphic below. The problem with this is that as DIV1 grows down, the DIV3 gets bumped down. I wish to keep DIV3 fully justified from the top to bottom (as if STRETCH).
Without getting into how the current code combines DISPLAYS, FLOATS, and POSITIONING -- I think I need to erase all the CSS and replace with some FLEXBOX. But I cannot seem to get the right combination of FLEX properties to make DIV3 behave to stretch (instead of getting bumped down).
Fortunately, this only has to work for Chrome on Desktop (no mobile nor other browsers).
There you go IF width of div 3 is known and fixed value:
https://codepen.io/AugustinF/pen/qYBpmR
.wrapper {
position: relative;
border: 2px solid black;
}
#firstrow {
height: 100px;
margin-right: 200px;
background: green;
}
#secondrow {
}
#div2 {
float:left;
background: blue;
}
#div3 {
width: 200px;
position: absolute;
top:0;
right:0;
height: 100%;
background: red;
}
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
HTML:
<div class="wrapper clearfix">
<DIV id="firstrow"> 1 </DIV>
<DIV id="secondrow clearfix">
<DIV id="div2"> 2 </DIV>
<DIV id="div3"> 3 </DIV>
</DIV>
</div>
Using #Pete solution you can modify the HTML structure using javascript by placing this code at the end of the body tag:
<script>
document.getElementById('firstrow').appendChild(
document.getElementById('div2')
);
</script>

How to divide the height of an element on 3 elements?

I have the following html code:
body, html {
height: 100%;
}
.parent {
width: 15%;
height: -webkit-fill-available
}
.child {
height: 33.33%
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
I tried the display:table for "parent" & display:table-row for "child" , but it didn't work.
Is it possible to do it?
I suggest to use flexbox, and don't forget to set .parent to height:100%.
The main advantages of using flexbox:
You don't have to deal with overflow problem, say there is more content in one row that couldn't fit 1/3 of the entire container height, it will simply expand the row automatically, and all the remaining free space will still be evenly distributed.
You can easily add or remove a row without changing the CSS, they will be evenly distributed based on the number or child divs.
If you need one or more rows to be shorter or taller, you can just use flex or flex-grow or flex-basis to adjust accordingly.
Plus, if you haven't heard of flexbox yet, you'll be amazed how powerful it is once you entered the flexbox world.
html,
body {
height: 100%;
margin: 0;
}
.parent {
height: 100%;
display: flex;
flex-direction: column;
}
.child {
flex: 1;
}
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
Apply height: 100%; and margin: 0; (to reset the default margin) to html and body, then 100% height for the parent and 33.33% for the children. No flex or table needed...
The main important thing is that the parent needs a defined height for the percentage values of the children to become effective. And if that parent height is a percentage value, also the parent of the parent needs a defined height. If you only use percentages, that goes up to body and html
body,
html {
height: 100%;
margin: 0;
}
.parent {
width: 15%;
height: 100%;
}
.child {
height: 33.33%;
background: #fa0;
}
.child:first-child {
background: #0fa;
}
.child:last-child {
background: #af0;
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
Your code is working, just put min-width to see it in action.
<html>
<head>
<style>
.parent{
height:100%;
}
.child{
height:32%;
border:1px solid black;
min-width: 100px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</body>
</html>

Categories