Goal: Get the button element fixed to the bottom of the main element. I tried positioning it's container with relative positioning so it sticks to the bottom:
/* POSITIONING NOT WORKING. I WANT THIS DIV FIXED TO BOTTOM OF PARENT */
.wrapper:nth-child( 4 ) {
background-color: #bbb;
position: relative;
bottom: 0;
}
This isn't moving the .wrapper div at all. Ideas?
#import url( "https://necolas.github.io/normalize.css/latest/normalize.css" );
* {
box-sizing: border-box;
}
main {
background-color: #eee;
}
main, input {
padding: 2%;
}
main input {
width: 100%;
margin: 5% 0;
border: 0;
}
.clr-fix::after {
content: "";
display: block;
clear: both;
}
.wrapper {
width: 23%;
margin: 1%;
padding: 2%;
background-color: #ddd;
float: left;
}
/* POSITIONING NOT WORKING. I WANT THIS DIV FIXED TO BOTTOM OF PARENT */
.wrapper:nth-child( 4 ) {
background-color: #bbb;
position: relative;
bottom: 0;
}
<main class="clr-fix">
<div class="wrapper">
<input type="text" value="position:bottom">
<input type="text">
<input type="text">
<input type="text">
</div>
<div class="wrapper">
<input type="text">
<input type="text" value="Isn't working">
<input type="text">
<input type="text">
</div>
<div class="wrapper">
<input type="text">
<input type="text">
<input type="text" value="On 'A button'">
<input type="text">
</div>
<div class="wrapper">
<button>A button</button>
</div>
</main>
Relative positioning is a change in relation to the spot the element is already positioned. So if position: relative, bottom: 0 (or top:0, left:0, right:0, etc) means leave this at the same spot it currently is.
If you want this positioned to the bottom of the element, you need to make the parent element position: relative, and the element you want pinned to the bottom position: absolute (with bottom: 0). Absolutely positioned elements will hop on out of the DOM flow and go instead in relation to it's closest relative parent.
essentially you want:
.wrapper {
position: relative;
}
.wrapper:nth-child(4){
position: absolute;
bottom: 0;
}
Your main style will need a relative position applied to it. As mentioned, you can't position bottom:0 with relative positioning. See if this works for you.
main{
background-color: #eee;
position: relative;
}
.wrapper:nth-child(4) {
background-color: #bbb;
position: absolute;
bottom: 8%;
right: 1%;
}
To make the 4'th wrapper stick to bottom you need to put position: relative; on main and add position: absolute to the 4'th wrapper.
a position: absolute; element is absolutely positioned relatively to it's closest parent which is position: relative; - in your case that would be main which wraps the 4'th wrapper.
Related
I am trying to add an svg and another span element container an svg to the far right of an input however, with my current setting they are overlapping:
I have a structure like this:
/* How can I fix this such that the red will be aligned before the arrows? Currently my css is: */
svg,
#mySvg {
cursor: pointer;
position: absolute;
display: inline-block;
opacity: 0.8;
right: 0;
position: relative;
margin-left: -25px;
z-index: 9999 !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex align-items-center input-fields">
<input class="form-control textInput" type="text">
<svg></svg>
<span id="mySvg"></span>
</div>
currently they look like this:
Here is a simple example that I managed to work on for this purpose. You can change your HTML like this:
<div class="input-fields">
<input class="form-control textInput" type="text">
<div id="icons_container">
<svg></svg>
<span id="mySvg">♠</span>
</div>
</div>
and for the CSS part, you do like this:
#icons_container {
position: absolute;
display: flex;
align-items: center;
right: 0;
top: 0;
padding: 0px 5px 0 0;
}
I have wrapped both the icons with div that is positioned as absolute and it's display property is set to flex.
Here is the example in full in CodePen. https://codepen.io/ahmadkarimi2009/pen/ExgpLbe
Note: I haven't used Bootstrap for tackling this issue.
When you using absolute position for elements you can not control overlaping them.
The only thing you can do is that add more right offset to one of them to prevent overlaping.
Example:
svg {
right: 10px;
}
#mySvg {
right: 40px;
}
This question already has answers here:
Position absolute but relative to parent
(5 answers)
Closed 3 years ago.
In my case an absolutely positioned child element carouselbuttonCntainer is going far some pixels below parent div bgCoverSection when I set it's bottom value as zero.
HTML:
<div class="bgCoverSection" id="homePageSection">
<div id="carouselbuttonCntainer">
<div id="carouselbuttonInnerCntainer">
<input type="radio" class="imageCarouselRadioButton"
name="imageCarouselRadioButton" checked="checked">
<input type="radio" class="imageCarouselRadioButton"
name="imageCarouselRadioButton">
<input type="radio" class="imageCarouselRadioButton"
name="imageCarouselRadioButton">
</div>
</div>
</div>
CSS:
//parent
.bgCoverSection{
height: 614px;
width: 100%;
padding: 0px;
background-color: aqua;
text-align: center;
}
//child
#carouselbuttonCntainer{
position: absolute;
bottom: 0;
left: 50%;
}
.imageCarouselRadioButton{
width: 20px;
height: 20px;
}
In the code above code I set carouselbuttonCntainer bottom to 0, it's bottom doesn't align with bottom of parent bgCoverSection.
But when I set carouselbuttonCntainer top to 0, it's top will align with top of parent bgCoverSection.
You must have to provide position: relative; to parent when ever you use position: absolute;.
In your case please add position:relative to this class .bgCoverSection.
You need to add position: relative to its parent div.
.bgCoverSection{
height: 614px;
width: 100%;
padding: 0px;
background-color: aqua;
text-align: center;
position: relative;
}
Give the parent position as relative it would-be working
I want to position my button on the bottom of a div or the bottom of the screen (but in a non-fixed position). My code structure looks like this:
div-1
div-2
div-3
button
I want to put the button at the bottom of div 1, which height is set using jQuery (The height is the height of the screen, so putting the button at the bottom of the screen may also be a solution)
What I've tried so far:
CSS
.button {
position: fixed;
bottom: 10px;
left: 50%;
margin-left: -104.5px; /*104.5px is half of the button's width*/
}
This centers the button (what I want) and it places it at the bottom of the screen, but the position is fixed, so if I scroll down the button goes down aswell.
I've also tried setting the button's position to absolute and div-1's position to relative, this didn't work either.
Edit: The div's height is variable, so margins may not be such a good option
just do the button position:absolute without putting the div relativ
.button {
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -104.5px; /*104.5px is half of the button's width*/
}
.test{
height:1000px;
}
<div class="test">
<div>
<div>
<button class="button">
test
</button>
</div>
</div>
</div>
Try using VW instead of px.
HTML:
<button class="button">TEST</button>
CSS:
.button {
position: fixed;
bottom: 10px;
left: 47vw;
width: 6vw;
}
EDIT:
HTML:
<div class="div">
<button class="button">TEST</button>
</div>
CSS:
.div{
position: relative;
border: 1px solid black;
width: 500px;
height: 250px;
}
.button {
position: absolute;
bottom: 5px;
left: 50%;
width: 50px;
margin-left: -25px;
}
I was looking the code instead of the question so i forget that the real question was add the button on the bottom of div or screen.
The parent div has to be position: relative; and the button position: absolute;
if width div 50% then left must 25% if width div 70% then left must 15%
.center{
position:fixed;
bottom:20px;
left:20%;
width:60%;
}
.center .btn{
background:red;
width:100%;
color:white;
font-weight:bold;
border-radius: 64px;
padding:10px;
}
<div class="center">
<button class="btn">Login</button>
</div>
I believe these Stack Overflow posts might be of help to you:
1) How do I get a div to float to the bottom of its container
2) HTML/CSS positioning float bottom
If this doesn't help can you please also provide your HTML code.
You should use position: absolute on your button when parent element height and width is 100% (of document or page).
<div class="div-1">
<div class="div-2">
<div class="div-3">
<button>
Just a button
</button>
</div>
</div>
</div>
and css with little reset:
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
.div-1 {
position: relative;
height: 100%;
width: 100%;
}
.div-2, .div-3{
width: inherit;
height: inherit;
}
button {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
Here is JSfiddle
Here is the responsive width:
position: absolute;
bottom: 23px;
left: 10%;
width: 80%;
I'm trying to have an child element (something like a toolbar) of a parent element to be positiond on its bottom edge. The bahavior should be the same as using position fixed for the browser view.
I'm using absolute position right now. Everyting is perfect until the parent needs to scroll its content. Then the toolbar moves along with the rest of the parent's content.
Could somebody explain me why the toolbar moves?
Is it possible to achieve that task without need any javascript?
* {
box-sizing: border-box;
}
.container {
position: relative;
width: 100px;
height: 150px;
overflow-y: auto;
border: 1px solid black;
}
.mock {
height: 200px;
background-color: red;
}
.tool-bar {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 40px;
background-color: blue;
}
<div class="container">
<div class="mock"></div>
<div class="tool-bar"></div>
</div>
The toolbar is inside the scrollable area, that's why it scrolled. Try this code:
HTML
<div class="container">
<div class="scroll">
<div class="mock"></div>
</div>
<div class="tool-bar"></div>
</div>
CSS
div.scroll { /* style of .container to scroll */ }
I have found an interesting fiddle that may help you. They are using position:fixed and the divs are not nested:
http://jsfiddle.net/b2jz1yvr/
<div class="fixedContainer">
This is experimental
</div>
<div class="otherContainer"></div>
.fixedContainer {
background-color:#ddd;
position: fixed;
padding: 2em;
left: 50%;
top: 0%;
transform: translateX(-50%);
}
.otherContainer {
height:1000px;
background-color:#bbb
}
Consider I have a <div style="margin-top:50px"> and I need to places items in it relatively. There are some elements above <div>. For example, I have a <input type="text" /> and a button. I need to place this at the bottom of the <div> with text input being on left side aligned to parent and and button aligned to right of the parent. The input text must fill the width to button. I dont want to hardcode the px or em.
How do I achieve this ?
Edit: This is how it must look like.
Now I dont want to specify the length of text input. What I want is the button to be rendered to the right bottom of div and text input must set its width accordingly so as to fill space.
Ha! where was the drawing the first time around?
http://jsfiddle.net/eGHjs/
(Looks almost identical in IE7, Chrome, FF).
You have at least hardcode the button width to achive that.
<div id="container">
<div id="bottom">
<div><input type="text" class="text"></div>
<input type="submit" id="submit">
</div>
</div>
div#container {
height: 200px;
margin-top: 50px;
border: 1px solid gray;
position: relative;
width: 100%;
}
#bottom {
position: absolute;
width: 100%;
bottom: 0;
left: 0;
}
#bottom div {
position: relative;
margin-right: 105px;
}
#container #bottom input.text {
width: 100%;
}
#submit {
display: block;
position: absolute;
top: 0;
right: 0;
width: 100px;
}