How to move the inside div sqrBall to the bottom left of the parent div container.
Here is the HTML code:
<div class="container">
<div class="sqrBall">
</div>
</div>
Here is the CSS:
.container{
width: 500px;
height: 500px;
border: 1px solid black;
margin: 0 auto;
}
.sqrBall{
width: 10px;
height: 10px;
background-color: blue;
}
Here is a DEMO
You can use absolute positioning on the inner element if the parent element has relative positioning. for example:
.container{
width: 500px;
height: 500px;
border: 1px solid black;
margin: 0 auto;
position:relative;
}
.sqrBall{
width: 10px;
height: 10px;
background-color: blue;
position:absolute;
bottom:0;
left:0;
}
n.b. if the parent isn't positioned relatively, the inner element will be positioned to the bottom left of the body, not its parent. (at least in this example)
try this demo
Fiddle
.sqrBall {
width: 10px;
height: 10px;
background-color: blue;
position: absolute;
top: 98%;
left: 0;
}
.container
{
position:relative;
}
You have to add two more properties to your existing class .sqrBall
Properties are...
position: relative;
top: 98%;
Below is the working demo, hope it helps you
<style type="text/css">
.container
{
width: 500px;
height: 500px;
border: 1px solid black;
margin: 0 auto;
}
.sqrBall
{
background-color: blue;
height: 10px;
position: relative;
top: 98%;
width: 10px;
}
</style>
<html>
<div class="container">
<div class="sqrBall">
</div>
</div>
</html>
.container {
width: 300px;
height: 300px;
border: 1px solid black;
margin: 0 auto;
position: relative /* Container should have relative position */
}
.sqrBall {
position: absolute; /* Child should have absolute position */
bottom: 0;
left: 0;
width: 30px;
height: 30px;
background-color: blue;
}
<div class="container">
<div class="sqrBall">
</div>
</div>
.container{
width: 500px;
height: 500px;
border: 1px solid black;
margin: 0 auto;
position:relative;
}
.sqrBall{
width: 10px;
height: 10px;
background-color: blue;
position:absolute;
bottom:0;
left:0;
}
Try like this: Demo
Add the following along with your code
CSS:
.container {
display:table;
}
.sqrBall {
float:left;
margin-top: 100%;
}
Related
The div should grow up left, however, it does the opposite as of now.
The margin-left and top is necessary by the way.
Quick gif showcasing the issue: https://gyazo.com/ce51c504698395c26cffefb9b74e7e3e
html, body {
width: 100%;
height: 100%;
}
#a {
width: 50%;
height: 100%;
border: 1px solid black;
}
#img-wrapper {
margin-left: 10%;
margin-top: 20%;
width: 50%;
position: relative;
border: 1px solid red;
}
img {
width: 100%;
}
<div id="a">
<div id="img-wrapper">
<img src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/12225358/Pug-On-White-01.jpg" alt="">
</div>
</div>
Try this:-
#a {
width: 70%;
height: 100%;
border: 1px solid black;
position: relative;
}
#img-wrapper {
width: 40%;
position: absolute;
bottom: 0;
right: 0;
border: 1px solid red;
}
If you want your image going from right to left by increasing width property, you should give it float property:
#img-wrapper {
float: right;
margin-top: 0; // if you want it to start from top right edge
}
added margin-right: 10%; float: right;
#img-wrapper {
margin-right: 10%;
margin-top: 20%;
width: 50%;
position: relative;
border: 1px solid red;
float: right;
}
html,
body {
width: 100%;
height: 100%;
}
#a {
width: 50%;
height: 100%;
border: 1px solid black;
position: relative;
}
#img-wrapper {
margin-right: 10%;
margin-top: 20%;
width: 52%;
position: absolute;
border: 1px solid red;
right: 0;
bottom: 50%;
transform: translateY(50%);
}
img {
width: 100%;
}
<div id="a">
<div id="img-wrapper">
<img src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/12225358/Pug-On-White-01.jpg" alt="">
</div>
</div>
Sounds like the problem isn't about getting the image to "grow up left" but is about positioning the #img-wrapper.
You can solve this by positioning the #img-wrapper absolutely and specifying its bottom and right position. I've added a :hover style so you can see it 'grow' on hover.
A word of warning though. Positioning something of unknown/variable size using percentages is going to give you very mixed results at different viewport sizes. Perhaps what you want isn't quite as described but I think you should be looking at a more flexible solution such as using flexbox.
html, body {
width: 100%;
height: 100%;
}
#a {
width: 50%;
height: 100%;
border: 1px solid black;
position:relative;
}
#img-wrapper {
right: 30%;
bottom: 30%;
width: 50%;
position: absolute;
border: 1px solid red;
}
#img-wrapper:hover {
width: 70%;
}
img {
width: 100%;
}
<div id="a">
<div id="img-wrapper">
<img src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/12225358/Pug-On-White-01.jpg" alt="">
</div>
</div>
html, body {
width: 100%;
height: 100%;
}
#a {
width: 50%;
height: 100%;
border: 1px solid black;
position: relative;
}
#img-wrapper {
width: 50%;
border: 1px solid red;
margin: 20% 0 0 20%;
position: absolute;
top:0;
left:50%;
transform: translateX(-50%);
}
img {
width: 100%;
}
I would like to center a circle on a line, like this:
I've got the following code:
.circle {
width: 75px;
height: 75px;
border-radius: 50%;
position: absolute;
left: 76%;
top: 41px;
background-color: #000;
}
.box {
width:500px;
height:150px;
position: relative;
border: 1px solid #eee;
.left {
width:200px;
height:100%;
position:relative;
}
<div class="Box">
<div class="Left">
<div class="circle">
</div>
</div>
<div class="Right"></div>
</div>
However, when i resize the windows, it ends up like this:
How can i make sure the circle stays in place, even when i resize my window?
You could take a different approach and use the border-right property on the .left div to represent the vertical line behind the .circle:
.circle {
width: 75px;
height: 75px;
border-radius: 50%;
position: absolute;
right: -37.5px; /* modified / - half of the circle's width */
top: 41px;
background-color: #000;
}
.box {
width: 500px;
max-width: 100%; /* added / responsive */
height: 150px;
position: relative;
border: 1px solid #eee;
}
.left {
width: 200px;
max-width: 100%; /* added / responsive */
height: 100%;
position: relative;
border-right: 1px solid #eee; /* added */
}
<div class="box">
<div class="left">
<div class="circle">
</div>
</div>
<div class="right"></div>
</div>
Another simply way to do this is using pseudo element like this :
.box {
margin: 10px auto;
max-width: 400px;
border: 1px solid #000;
text-align: center;
position: relative;
}
.box:before {
content: " ";
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 1px;
margin-left: -0.5px;
background: #000;
}
.cirle {
display: inline-block;
width: 100px;
height: 100px;
border-radius: 50%;
background: #000;
margin: 20px 0;
}
<div class="box">
<div class="cirle"></div>
</div>
this part of the code will make sure the line will stay at the center:
.box:before {
left: 50%;
margin-left: -0.5px;
}
I need to know how to cut that gray part from the blue box.
The red arrows on the image bellow show which part I would like to cut from the blue box. This is the code I have:
.father {
height: 400px;
width: 400px;
margin: 150px auto;
position: relative;
}
.border {
position: relative;
bottom: 50px;
margin: auto;
border-radius: 50%;
width: 96%;
height: 30%;
background-color: #DDD;
}
<div class="father">
<div class="border"></div>
</div>
From what I understand you would like to cut off the grey part outside the blue area. If so, here's how you do it.
.father {
height: 400px;
width: 400px;
margin: 150px auto;
position: relative;
background: lightblue;
overflow: hidden;
}
.border {
position: relative;
bottom: 50px;
margin: auto;
border-radius: 50%;
width: 96%;
height: 30%;
background-color: #DDD;
z-index: 1;
}
<div class="father">
<div class="border"></div>
</div>
Can you see this approach:
border-top-left-radius: 8px;
border-top-right-radius: 8px;
.father {
height: 400px;
width: 400px;
margin: 150px auto;
position: relative;
background: lightblue;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.border {
position: relative;
bottom: 50px;
margin: auto;
border-radius: 50%;
width: 100%;
height: 30%;
background-color: #DDD;
}
<div class="father">
<div class="border"></div>
</div>
Are you looking for this?
.father {
height:400px;
width:400px;
margin:150px auto;
position:relative;
background:green;
}
.border {
position:relative;
bottom:50px;
margin:auto;
border-radius:50%;
width:96%;
height:30%;
background-color:#DDD;
z-index:-9;
}
<div class="father">
<div class="border"></div>
</div>
.father
{
height: 400px;
width: 400px;
margin: 150px auto;
position: relative;
background: #04aada;
border-radius: 50px 50px 0 0;
}
.border
{
position: relative;
bottom: 25px;
margin: auto;
border-radius: 50%;
width: 96%;
height: 30%;
background-color: #fff;
z-index: 1;
box-shadow: 0px -4px 0px #04aada;
}
<div class="father">
<div class="border"></div>
</div>
I need to have a page with 3 main sections; Header, Footer and Content. I want the footer, ONLY the footer, to scroll horizontally. The other sections will contain static information (A Map and Chart).
Below is the code. I was hoping to see a scroll bar in only the green box! What am I missing?
#Header {
position: absolute;
top:0px;
left: 0px;
width: 100%;
height: 200px;
border: 1px solid red;
}
#Footer {
position: fixed;
bottom:0px;
left: 0px;
width: 100%;
height: 180px;
border: 2px solid blue;
overflow: hidden;
}
#Footer_Inset {
position: fixed;
bottom:10px;
left: 10px;
width: 3000px;
overflow-style: scrollbar;
height: 160px;
border: 2px solid Green;
}
<body>
<div id="Header"></div>
<div id="Footer">
<div id="Footer_Inset"></div>
</div>
</body>
HTML:
<div id="Header">static content</div>
<div id="Footer">
static content
<div id="Footer_Inset">
<div id="Footer_Content">scrollable horizontally</div>
</div>
</div>
CSS:
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
#Header {
position: absolute;
top:0px;
left: 0px;
width: 100%;
height: 200px;
border: 1px solid red;
}
#Footer {
position: fixed;
bottom:0px;
left: 0px;
width: 100%;
height: 180px;
border: 2px solid blue;
}
#Footer_Inset {
overflow-x: scroll;
height: 160px;
border: 2px solid Green;
}
#Footer_Content {
width: 3000px;
}
jsfiddle
If I understand this correctly, you should add overflow-x: scroll to #Footer and remove overflow-style: scrollbar from #Footer_Inset.
http://jsfiddle.net/ds1hc4L3/
Try putting the overflow inside #Footer instead of Footer_Inset
I also had problems with position: fixed for #Footer_Inset. Since #Footer is already fixed, using static positioning seems to look ok for me.
#Header {
position: absolute;
top:0px;
left: 0px;
width: 100%;
height: 200px;
border: 1px solid red;
}
#Footer {
position: fixed;
bottom:0px;
left: 0px;
width: 100%;
height: 180px;
border: 2px solid blue;
overflow-x: auto;
padding: 10px;
}
#Footer_Inset {
width: 3000px;
height: 160px;
border: 2px solid Green;
}
In #Footer change to overflow-x: auto;. Remove position: fixed; from #Footer_Inset.
http://jsfiddle.net/wilchow/uh53xejm/
#Header {
position: absolute;
top:0px;
left: 0px;
width: 100%;
height: 200px;
border: 1px solid red;
}
#Footer {
position: fixed;
bottom:0px;
left: 0px;
width: 100%;
height: 180px;
border: 2px solid blue;
overflow-x: auto;
}
#Footer_Inset {
bottom:10px;
left: 10px;
width: 3000px;
height: 160px;
border: 2px solid Green;
display: block;
}
http://jsfiddle.net/myxzh/6/
ul {
display: table;
table-layout: fixed;
width: 100%;
padding:0;
position: absolute;
top: -10px;
}
li {
display: table-cell;
height: 150px;
border: 1px solid black;
text-align: center;
vertical-align: bottom;
}
#con {
width: 100%;
border: 1px solid red;
height: 200px;
overflow: hidden;
}
#logo {
width: 80%;
height: 100px;
margin: 10px auto;
border: 1px solid yellow;
z-index: 1;
}
<div id="con">
<div id="logo">
</div>
<div id="list">
<ul>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
</ul>
</div>
</div>
I have this code and I am trying to make it where the list elements take up 100% of the red div box. Right now, the list goes outside of the red div which is not what I am trying to do. How do i make the black div(list items) fill up 100% of the red div and not go outside the red div?
If you want the black div to take up 100% of the height and width of the red div, change your CSS to:
ul {
display: table;
table-layout: fixed;
width: 100%;
padding:0;
position: absolute;
margin:0;
bottom:0;
height:100%;
}
li {
display: table-cell;
height: 150px;
border: 1px solid black;
text-align: center;
vertical-align: bottom;
}
#con {
width: 100%;
border: 1px solid red;
height: 200px;
overflow: hidden;
position:relative;
}
#logo {
width: 80%;
height: 100px;
margin: 10px auto;
border: 1px solid yellow;
z-index: 1;
}
jsFiddle example
I added position:relative; to your #con div since your absolute positioned ul element is positioned relative to it's first positioned ancestor, which in your example was the body, but you needed it to be #con. Then I made a few small changes to your ul's CSS rules so that it would take up all the space of the red div.
I changed your mark up a bit, there is no need for the div #list, that why ul exists.
This is the css
#con {
width: 100%;
border: 1px solid red;
height: 200px;
overflow: hidden;
position: relative;
}
#logo {
width: 80%;
height: 100px;
margin: 10px auto;
border: 1px solid yellow;
z-index: 1;
}
#list {
width: 100%;
list-style: none;
position: absolute;
top: 0px;
margin: 0;
padding: 0;
}
li {
float: left;
width: 33.1%;
height: 200px;
border: 1px solid black;
text-align: center;
vertical-align: bottom;
}
Is this good enough?
http://jsfiddle.net/myxzh/11/
A working fiddle --> http://jsfiddle.net/2VvTu/
You needed to set your container element to position: relative; and float your table cells left.
the box sizing property calculates borders and margins as part of the width (rather than default of adding them on on top of the width) --> you'll need to vendor prefix this as appropriate. More about that here --> http://paulirish.com/2012/box-sizing-border-box-ftw/
li {
-webkit-box-sizing: border-box;
display: inline-block;
height: 150px;
margin: 0;
padding: 0;
text-align: center;
width: 33.33%;
float: left;
border: thin purple dashed;
}