In Bootstrap 4, I created a div named circle inside col-md-2. this is the width of this I made 100%. I want the shape to be square when it is four. In this case, when I give the height 100%, it extends to the bottom of the page. but I want it to be four times equal. what can I do?
.circle{
position: absolute;
width: 100%;
height: 100%;
background: tomato;
}
In CSS both margin and padding are relative to width, not height. You can use it to make a square by setting for example padding-bottom: 100%, which will pad the bottom by 100% of width.
Example would be
CSS
.square {
width: 200px;
padding-bottom: 100%;
background-color: red;
}
HTML
<div class="square"></div>
If you want to put elements inside that square you can add another element with position: absolute inside it that can contain your elements.
Example would be
CSS
.square {
width: 200px;
padding-bottom: 100%;
background-color: red;
position: relative;
}
.square-content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
HTML
<div class="square">
<div class="square-content">your stuff goes here</div>
</div>
Related
In the example below, I would like word wrap only to happen if the left side of position-me hits the left side of the screen like this.
I think that currently #position-me inherits the width of the parent element and even if I set width: auto !important; in #position-me it still wraps at the parent width.
If I set white-space: nowrap; on #position-me then it overrides the 100px width, but the text overruns the div (and the page potentially!)
#wrapper {
position: absolute;
bottom:0;
right:0;
width: auto;
height: 100px;
background-color: red;
}
#position-me {
position: absolute;
top: 0;
left: 0;
transform: translate(-100%, -100%);
width: auto;
height: auto;
background: green;
}
<div id='wrapper'>
This is the wrapper div
<div id='position-me'>
Text is here and it is great, I wonder when it will decide to wrap itself?
</div>
</div>
https://jsfiddle.net/pfa89bu1/2/
Use a big negative margin left, limit the width to the width of the screen minus the red box width and use bottom/right for the position:
#wrapper {
position: absolute;
bottom: 0;
right: 0;
height: 100px;
background-color: red;
}
#position-me {
position: absolute;
bottom: 100%;
right: 100%;
margin-left: -200vmax;
max-width: calc(100vw - 100%);
background: green;
}
<div id='wrapper'>
This is the wrapper div
<div id='position-me'>
Text is here and it is great, I wonder when it will decide to wrap itself?
</div>
</div>
I have this simple HTML code, but make me frustrated because it can't center vertically :
<div class="outer">
<div class="inner">
Hello World
</div>
</div>
and here's my CSS :
.outer {
position: relative;
height: 350px;
}
.inner {
position: absolute;
height: 100px;
top: 50%
}
the .inner div is really center vertically, but based on top side of it. because of top: 50%, what I want is this .inner div really centered vertically on top of .outer. how to do that?
You can center your element using css3 even if you don't know the dimensions.
.inner {
position: absolute;
height: 100px;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
Since you know the height of both elements you can set your top to top: 125px;
(350 - 100) / 2.
UPDATED WITH JQUERY
http://jsfiddle.net/yf0ncd7f/
Actually an easy way to center a absolute div is to use margin: auto;
section {
width: 100%;
height: 800px;
position: relative;
background: #eee;
}
div {
width: 500px;
height: 300px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
background: orange;
}
<section>
<div></div>
</section>
I added borders to differentiate clearly
Is this you want?
http://plnkr.co/edit/JRct1x95gnIUl8jITzG0?p=preview
.outer {
position: relative;
height: 150px;
border : 1px solid #f00;
}
.inner {
position: absolute;
height: 80px;
top:0;
bottom:0;
margin:auto;
border : 1px solid #0f0;
}
You could use this CSS trick to make the div vertically centered (and optionally horizontally as well). This works for a parent div of any height and width, as long as they are specified.
.inner {
position:absolute;
// The height and width of the element have to be set for this to work
height:100px;
width:100px;
// Setting the top and bottom to 0px as well as the margins to auto
// causes the div to be centered vertically.
top: 0px;
bottom: 0px;
margin-top: auto;
margin-bottom: auto;
// To also center the div horizontally, do the same for
// left, right and the margins.
left: 0px;
right: 0px;
margin-left:auto;
margin-right:auto;
}
Note that this solution only works when the height of the parent div is known beforehand and is specified. So the parent element needs to have height:100px or whatever amount of pixels you need it to be. Also the height can't be percentual, meaning that if the height of the parent div is declared as height:50%, this will NOT work.
The inner div can actually have a
You can set it by line-height property set it to the height of the div as in your code it should be line-height: 100px;
.outer {
position: relative;
height: 350px;
background: gray;
}
.inner {
position: absolute;
height: 100px;
line-height: 100px;
background: blue;
}
<div class="outer">
<div class="inner">
Hello World
</div>
</div>
How is it so that height: 100% actually works on the .rel div?
I know for sure that relative divs never taken percentage heights in account in the past...
.box{
width: 200px;
height: 200px;
}
.rel{
position: relative;
width: 100%;
height: 100%;
border: 1px solid red;
}
a{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 60px;
}
b{
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
<div class="box">
<div class="rel">
<a> aa </a>
<b> bb </b>
</div>
</div>
Relative divs can use percentage heights if their parents (box, in this case) are also given a height. Since you've given box a height of 200px, giving rel a percentage height actually means something. If its parent does not have a height defined, rel's height will be meaningless since its parent has no height. If you remove box's height, changing rel's height will do nothing, as seen here: http://jsfiddle.net/sxv9jLdz/
I have a div that inside another div whose background is that of a phone. I am trying to make the inner div to resize as the viewport gets smaller.
You can see a demo here
HTML
<div class="phone-container">
<div class="screen">
</div>
</div>
CSS
.phone-container {
position: relative;
background: url(http://imgur.com/eyIzwSW.jpg) no-repeat;
background-size: contain;
width: 25.188em;
height: 50em;
max-width: 90%;
}
.screen {
position: absolute;
left: 8.1%;
top: 15.1%;
width: 82.5%;
height: 65.1%;
background-color: green;
overflow: hidden;
}
When the viewport is a normal size, it works out fine and if one were to incrementally decrease the size of the viewport, the inner div's width adjusts properly but the height stays the same. Any suggestions on how I can make the inner div's height respond properly without the use of JavaScript?
Percentage top is based on the height of the element's parent. In your case, the parent's height doesn't change when you resize the window, so the child's top won't change either. See the documentation for top.
I had success using a different structure, letting the image define the height of .phone-container:
<div class="phone-container">
<img src="http://imgur.com/eyIzwSW.jpg" />
<div class="screen"></div>
</div>
.phone-container {
position: relative;
width: 90%;
max-width:552px;
}
.phone-container img {
position:relative;
width:100%;
}
.screen {
position: absolute;
left: 8.1%;
top: 15.1%;
width: 82.5%;
height: 65.1%;
background-color: green;
}
The screen's position relative to the image is not pixel perfect, but you can probably tweak the values to get it more accurate.
Working Example (jsFiddle)
You've specified the inner div's height as a percentage, which means it's set as a percentage of the height of the window. If you're "resizing the viewport" by changing the browser window width, that won't change the height.
If you still want to use a <div> instead of an <img>, there is a trick to keep the aspect-ratio of the <div>:
LIVE DEMO
HTML:
<div class="phone-container">
<div class="aspect-ratio-container">
<div class="dummy"></div>
<div class="screen"></div>
</div>
</div>
CSS:
.phone-container {
position: relative;
background: url(http://imgur.com/eyIzwSW.jpg) no-repeat;
background-size: contain;
width: 25.188em;
height: 50em;
max-width: 90%;
}
.aspect-ratio-container {
display: inline-block;
position: relative;
width: 90.5%;
}
.dummy {
padding-top: 176%;
}
.screen {
position: absolute;
top: 18.5%;
bottom: 0;
left: 9%;
right: 0;
background-color: green;
}
I have a single column layout where the column is a centered div with a fixed width. I want to place a wider div within the column which overflows it's parents, but center it within the parent. Conceptually something like the following:
<div style="width: 100px; margin: 0 auto; overflow:visible;" id="parent">
<div style="width: 400px; margin 0 auto;" id="child"></div>
</div>
The centering works as long as the child div is thinner than its parent, but once it gets larger, it always aligns left with the parent for some reason.
#wrapper {
margin: 0 auto;
width: 200px;
background-color: #eee;
position: relative;
height: 200px;
}
#child {
position: absolute;
top: 0;
left: 50%;
margin: 0 0 0 -200px;
width: 400px;
background-color: #ddd;
}
<div id="wrapper">
<div id="child">Child div</div>
</div>
jsFiddle
When an element overflows his parent, it is normal behaviour that it only overflows to the right. When you, for example, have a site that is wider then the viewport, you never have to scroll left, but only to the right. This solution is based on a absolute centered div, with a negative left margin (that value is the half of his own width). So if you know the width of this element, this solution should be fine.
Tested in FF 3.6, IE7 and IE8
I made a variation of Justus' solution. Instead of relative positioning, I used a negative margin of 50% in the inner element.
#wrapper {
margin: 0 auto;
padding: 10px 0 10px;
width: 200px;
background-color: #eee;
}
#child {
margin: 0 -50%;
width: 400px;
background-color: #ddd;
}
This way you don't need to know the element sizes ahead of time.
I am not 100% sure but try giving the parent element a position set to relative and child absolute and then set top, left and width/height properties for the child div accordingly.
This is how I solve it:
http://jsfiddle.net/WPuhU/1/
Also take care of the scrollbars(they do not appear if your window view is smaller then the overflowing div). Auto centers the overflowing div.
css:
#center-3 {height:40px;background-color: #999;}
#center-1 {height:20px;top:10px;background-color: #aaa;}
/* the necesary code */
body {width:100%;margin:0;}
#center-4 {
width: 100%;
overflow:hidden;
/* remove the next 2 line for a normal flow */
position: absolute;
z-index: -1;
}
#center-3 {
position: relative;
margin: 0 auto;
width: 200px;
}
#center-2, #center-1 {
position: relative;
width: 400px;
}
#center-2 {
left: 50%;
}
#center-1 {
left: -50%;
}
html:
<div id="center-4">
<div id="center-3">
<div id="center-2">
<div id="center-1"></div>
</div>
</div>
</div>
<div id="other-stuff">Here comes the other stuff above.</div>
#parent {
position: relative;
width: 100px;
overflow: visible;
}
#child {
width: 400px;
position: absolute;
left: 50%;
transform: translateX(-50%);
}