I've got a little css problem.
I got a div with a max-width. In this div there is a img that needs to be positioned outside his div (to the bottom). Unfortunately I can't use position absolute because of the max-width. When I would use position absolute, at some point the width of the screen reaches the max-width and the img with position absolute will go outside the div on the right side.
I know this must sound a little messy, so I've made a Jsfiddle:
https://jsfiddle.net/te93s8h1/
This JS Fiddle shows a example of the issue I got. I need the green block outside the div (at the bottom) but the green block can not go outside the div on the right side. How can I achieve this?
I prefer css only.
Never mind my question, I think I understand what you're trying to achieve. You should add a position: relative; statement to the style block of your .grid class as demonstrated in this JSFiddle.
Just simply try this without using position absolute.
.container {
background-color: #00f;
width: 98%;
height: 100px;
margin: auto;
max-width: 1300px;
}
.grid {
position: relative; /* Added Position */
background-color: #f00;
width: 50%;
margin: auto;
min-width: 600px;
height: 100px;
}
.block_outside_div {
position: inherit; /* Added Position */
background-color: #0f0;
height: 50px;
width: 50px;
left: 45%; /* 45% Percentage value for move from left */
top: 120px; /* 120px value for move from top */
}
<div class="container">
<div class="grid">
<div class="block_outside_div">
</div>
</div>
</div>
Related
So I want a div to always be on the bottom of another div it's in.
I've used bottom:0, position: absolute. This works as long as the window is the same size as the main div (which is the size of the windows too), but the main div has a min-height set, when the window gets smaller then this height the div start moving up with the bottom of the window.
vertical-align also doesn't work for this purpose as it glues it to the bottom of the other divs in the main div, but that results in it not being in the bottom of the main div, which is my goal.
How can I achieve this?
You can use flexbox for that:
.parent {
width: 50%;
height: 200px;
border: 1px solid grey;
margin: 1em auto;
display: flex;
flex-direction: column;
align-items: center;
}
.child {
width: 60%;
height: 50px;
background: rebeccapurple;
margin-top: auto;
}
<div class="parent">
<div class="child"></div>
</div>
From my understanding, you want to make sure that a div is always anchored to the bottom of a div, no matter what. In that case, all you need to do is make sure that the parent div has position:relative, while the child has position: absolute and is absolutely positioned to the bottom of the div.
Screen size shouldn't affect this, even if the parent div has a min-height.
But if I'm off, if you post your code, we may be able to better help.
HTML
<div class="parent">
<div class="child"></div>
</div>
CSS:
<style>
.parent {
position: relative;
min-height:--px
}
.child {
position: absolute;
bottom: 0;
}
How to automatically adjust size of the div which is horizontally centred, using another div which has position: fixed property?
To better understand what I mean please take a look at the picture below. Div A is a fixed div with a fixed size and div B is a div which is horizontally centred. I want div B to resize (when I resize browser window) in a such way so right border of A and left border of B never overlap (ideally, if the distance between the borders kept the same).
I know that this can be fairly easy done using JavaScript by reacting on resize events, but I'm wondering is there any way to achieve this in pure CSS?
Here's another way. This should work in older browsers too.
<style>
div {
border: 1px solid red;
height: 100px; }
#A {
position: fixed;
width: 150px; }
#B {
margin: 0px 155px; }
</style>
<div id="A">Stuff</div>
<div id="B">Stuff</div>
How about this:
#a{
width:200px;
}
#b{
width:calc(100% - 400px);
}
Just set the width of B to be 100% of screen width minus twice the width of A and their borders will touch.
When an element is given the settings position: absolute or position: fixed You can change the width of an element by using the left and right properties.
Simply add the same amount to the right as you would to the left
#left {
position: absolute;
width: 150px;
}
#middle {
position: absolute;
left: 165px;
right: 165px;
overflow: auto;
}
/* For demo purposes */
html, body, div { height: 100%; margin: 0; } div { background: red; } #overflow { height: 200%; }
<div id="left"></div>
<div id="middle">
<div id="overflow"></div>
</div>
I have an div element with variable height which I need to be positioned by it's bottom relative to the containers top.
This must be done without changing the html.
e.g.
<div id="container">
<h1>Some Text<br/>more...</h1>
</div>
h1's bottom should be 100px below #container's top.
Thanks a lot
EDIT:
So by Request what I did (or didn't) tried:
Searching with Google for css bottom top position relative but that's not the best search terms in the world...
Normally I would put a container around h1 and give it a height of 100px but then I would need to change the html and that I can't
using bottom: somevalue but that positions the element's bottom relative to the container's bottom.
slain some vampires
You could make use of transform: translateY(-100%), to make the bottom of the element relative when you apply margin-top: 100px to h1.
#container {
width: 200px;
height: 200px;
background: tan;
overflow: hidden;
}
#container h1 {
transform: translateY(-100%);
margin-top: 100px;
background: papayawhip
}
<div id="container">
<h1>Some Text<br/>more...</h1>
</div>
Depending on browser support requirements:
#container {
position: relative;
}
#container h1 {
position: absolute;
bottom: calc(100% - 100px);
}
Example
Only way through it is to add a height to the h1 unless you want to go with calc which isn't supported yet by some browsers. Then set your top margin to be top: 100px - h1's height. Hope this works
<div id="container">
<h1>Some Text<br/>more...</h1>
</div>
#container {
width: 300px;
height: 300px;
background: #222;
overflow: hidden;
}
#container h1 {
background: #444;
position:relative;
height:80px;
top:20px;
}
http://jsfiddle.net/ms889w57/
#container
{
position: absolute;
height: 100px;
bottom:0px;
}
This code is not affecting html at all. I added css for id-container.
An absolute position element is positioned relative to the first parent element that has a position other than static. You can change it to fixed it you wants to.
Height of the container, help you to calculate spacing from bottom.
I have a google map that takes up 100% of the width and height of the screen. Well, the height is set to 1000px because I can't get it to go to 100%, but that's another question. Anyway, I want to have the #map div to take up the full screen and display a rectangular box to the right of the screen - this is a div that would have the class set to 'search_box'.
I am having two problems with the html and css in my app:
The rectangular box does show up on the right of the page as I want it, but it shows up UNDER the google map, so you can't see it! I can only confirm this because if I refresh the page, it does show up for a split second before the google map covers it. :(
I want the box to be about 50px lower than the menu above it, but padding-top doesn't seem to do anything. I'm not sure if this is because it's floating. Any ideas?
Also, should the 'search_box' div be inside of the 'map' div?
In my HTML
<div id="map"></div>
<div class="search_box"></div>
In my CSS
.search_box {
background-color: white;
float: right;
}
#map {
width: 100%;
height: 1000px;
padding: 0 auto;
margin: 0px;
overflow: hidden;
}
If you want the search box to float next to the map you'll need to float #map as well. If you want the search box inside of the map, you should wrap them both in a containing div and position the search box absolutely.
To position the search box on the right side of the map, wrap both the divs inside another div.
<div class="map-wrapper">
<div id="map"></div>
<div class="search_box"></div>
</div>
Now use absolute position for the search div to position it on the right side of the map.
DEMO
CSS
.map-wrapper{
position:relative;
}
.search_box {
background-color: blue;
width:100px;
height:200px;
position:absolute;
top:10px;
right:10px;
}
#map {
width: 100%;
height: 1000px;
padding: 0 auto;
margin: 0px;
background-color:#ccc;
}
I can't imagine why you would want/care to position an element beneath another that completely covers it, but: http://jsfiddle.net/3bV3M/5/
Re-order your DOM:
div.search-box
div#map
#map should have position:absolute to take it out of the normal document flow but allow its position to still be controlled. I left .search-box on top of #map so you can see it positioned; to move it behind, remove the z-index: 1;. Note that I enabled css normalisation on the fiddle.
html, body {
display: block;
height: 100%;
position: relative;
width: 100%;
}
.search_box {
background: red;
height: 1.2rem;
margin-left: auto;
margin-right: 0;
position: relative;
top: 50px;
/* use `top` instead of `margin-top`, it doesnt contribute to the box */
width: 5rem;
z-index: 1; /* remove me */
}
#map {
background: black;
height: 100%;
position: absolute;
top: 0;
width: 100%;
}
I am trying to position an div element at the bottom right of an image, that is inside a container element. I set position relative to the container, and position absolute to the inner div, but it does not work. Here is the (http://jsfiddle.net/ZC84G/). Please, help.
<div class="container">
<div class="icon"></div>
<img src="/images/someImage.png" />
</div>
CSS:
body {
background-color: black;
}
.container {
position: relative;
}
.container img {
max-width: 75%;
max-height: 80%;
}
.icon{
background-image: url('http://icons.iconarchive.com/icons/iconfactory/star-wars-lego/32/Biggs-No-Helmet-icon.png');
width: 31px;
height: 31px;
position: absolute;
bottom: 5px;
right: 5px;
}
This is because by default div has block display mode, and it's width is 100% of the parent container. Try to add display: inline to .container
.container {
position: relative;
display: inline;
}
Here's the corrected jsfiddle: http://jsfiddle.net/ZC84G/4/
Your container div has no width and height set. And since a <div> is a block-level element by default, it will be set to 100% width ie expand to however much horizontal space is left.
Plus, you're also constraining your image size:
max-width: 75%;
max-height: 80%;
If you replace the img CSS with:
max-width: 75%;
max-height: 80%;
It works fine, and as expected: http://jsfiddle.net/ZC84G/3/
I've modified your CSS on the image a bit.
Basically, I set it to scale properly to the size of its container, and now it sits where I think you wanted it. The way you could find this yourself in the future would be to inspect the element by using right click from your browser, and looking at the size of the different elements to see what was expanding larger/smaller than it should.
.container img {
max-width: 100%;
height: auto;
}