This question already has answers here:
Center aligning a fixed position div
(16 answers)
Closed 2 years ago.
How can I horizontally center the fixed element which has red border? I added 3 cubes for visual hint.
By center I mean that center cube is in viewport center (and stay there when viewport is resized) and rest of the fixed element is cut off from left and right if necessary.
This needs to be old-school, i.e no flexbox.
#element {
width: 120%;
height: 200px;
position: fixed;
left: 0;
top: 0;
border: 2px dashed #ec6161;
}
#children {
display: flex;
justify-content: space-around;
align-items: center;
height: 100%;
}
.child {
width: 50px;
height: 50px;
border: 2px dashed #888;
postion: absolute;
}
<div id="element">
<div id="children">
<div class="child left"></div>
<div class="child center"></div>
<div class="child right"></div>
</div>
</div>
#element {
width: 120%;
height: 200px;
position: fixed;
left: 0;
top: 0;
border: 2px dashed #ec6161;
margin-left: -10%;
}
You could add margin-left: -10%to your #element component
Related
This question already has answers here:
How can I position my div at the bottom of its container?
(25 answers)
Closed 3 years ago.
I'm trying to move the element to the bottom of its parent but only way to do that is to make it positioned absolute but i want it to be relative.
#output{
height: 100px;
background-color: red;
}
#inner{
height: 30px;
background-color: blue;
/*float: down*/
}
<div id="output">
<div id="inner"></div>
</div>
#output{
height: 100px;
background-color: red;
display: flex;
flex-direction: column;
}
#inner{
margin-top: auto;
height: 30px;
background-color: blue;
/*float: down*/
}
<div id="output">
<div id="inner"></div>
</div>
This question already has answers here:
Why doesn't percentage padding / margin work on flex items in Firefox and Edge?
(2 answers)
Closed 4 years ago.
I have div that contains flexbox element with iframe inside (made to be responsive using CSS).
In Firefox that parent's height is 0 for some reason.
.container {
border: 2px black solid;
}
.flexbox {
max-width: 854px;
margin: 0 auto;
display: flex;
justify-content: center;
align-content: center;
align-items: center;
background: yellow
}
.flexbox div {
position: relative;
width: 100%;
padding-bottom: 56.25%;
}
flexbox div span {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
border: none;
}
<div class="container">
<div class="flexbox">
<div>
<span>
TExT
</span></div>
</div>
</div>
The best way to see this please look at my example on JSFiddle: https://jsfiddle.net/5jLqugy6/
I believe its because you have not set the height of the parent container or the child element within the parent.
This question already has answers here:
CSS when inline-block elements line-break, parent wrapper does not fit new width
(2 answers)
Make container shrink-to-fit child elements as they wrap
(4 answers)
Closed 4 years ago.
The overlay text takes up the full width of its container when there is a word break. I only want it to take up the width of the actual text. Is this possible?
See problem in codepen.
HTML
<div class="container">
<div class="overlay">
<p class="centered-overlay-text">Not Good</p>
</div>
</div>
<div class="container">
<div class="overlay">
<p class="centered-overlay-text">Good</p>
</div>
</div>
CSS
.container {
position: relative;
width: 60px;
height: 60px;
background-color: yellow;
margin-bottom: 10px;
}
.overlay {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
display: flex;
align-items: center;
justify-content: center;
}
.centered-overlay-text {
text-align: center;
background-color: blue;
}
codepen
https://codepen.io/anon/pen/MVpLKz
Try adding width: min-content; to centered-overlay-text
Like so
As mentioned in the comment though, this isn't fully cross-browser.
Like this ?
.container {
display: flex;
justify-content: center;
width: 60px;
height: 60px;
background-color: yellow;
}
.centered-overlay-text {
text-align: center;
background-color: blue;
align-self: center;
color: white;
}
<div class="container">
<p class="centered-overlay-text">Hell<br>Yeah !</p>
</div>
This question already has answers here:
vertical align bottom + inline block
(2 answers)
Closed 6 years ago.
I have the following html structure
<div class="examples">
<div class="option"></div>
<div class="option"></div>
<div class="option"></div>
</div>
CSS:
.examples {
whitespace: nowrap;
min-height: 400px;
}
.option {
width: 18%;
max-width: 18%;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 1%;
vertical-align: bottom;
cursor: pointer;
border: 4px solid red;
display: inline-block;
}
How can I vertically align inline blocks (option) at the bottom of the container (examples) using CSS? These are a row of images inside the examples container. I tried vertical align: bottom, but that doesn't work and I want to stay away from flex because of lack of cross browser support. I also want to stay away from absolute position because the elements (option) are a row of images.
You'll probably want to use flexbox and use display: flex; justify-content: flex-end; on the container div. That should put them at the bottom.
.examples {
whitespace: nowrap;
min-height: 400px;
position: relative;
background: blue;
}
.aligner {
position: absolute;
bottom: 0;
width: 100%;
}
.option {
width: 18%;
max-width: 18%;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 1%;
cursor: pointer;
border: 4px solid red;
display: inline-block;
}
<div class="examples">
<div class="aligner">
<div class="option"></div>
<div class="option"></div>
<div class="option"></div>
</div>
</div>
I would like to have a small red div with full width at a fixed top position, inside another div that has overflow: scroll. I hope the jsFiddle makes it clear: http://jsfiddle.net/mCYLm/2/.
The issue is that the red div is overlapping the scrollbar. I guess right: 0 means the right hand side of div.wrapper; it does not subtract the scrollbar of div.main. When I move the overflow: scroll into div.wrapper, then the red banner has the right size (fiddle). However, it is not at a fixed position anymore (scrolling down makes the banner scroll up).
How can I achieve the following two things together?
The red banner is at the fixed position like in this fiddle.
The red banner has full width except the scrollbar like in this fiddle.
I'd like to get this working in Google Chrome.
HTML:
<div class="wrapper">
<div class="red-banner"></div>
<div class="main">
<div class="item">foo</div>
<div class="item">foo</div>
<div class="item">foo</div>
<div class="item">foo</div>
</div>
</div>
CSS:
div.wrapper {
position: relative;
}
div.main {
height: 200px;
overflow-y: scroll;
}
div.item {
border: 1px solid black;
margin: 20px;
padding: 20px;
}
div.red-banner {
background-color: red;
position: absolute;
left: 0;
top: 0;
right: 0;
height: 20px;
}
Seems like this isn't possible with pure CSS, so here's a JavaScript (jQuery) hack:
$(function() {
var $container = $("<div>").css({ height: 1, overflow: "scroll" }).appendTo("body");
var $child = $("<div>").css({ height: 2 }).appendTo($container);
window.SCROLLBAR_WIDTH = $container.width() - $child.width();
$container.remove();
});
then:
$("div.red-banner").css({
right: SCROLLBAR_WIDTH
});
HTML
<div class="scroller">
<div class="banner-wrapper">
<div class="banner"></div>
</div>
</div>
<div class="main">
<div class="item">foo</div>
<div class="item">foo</div>
<div class="item">foo</div>
<div class="item">foo</div>
</div>
CSS
* { margin: 0; padding: 0 }
body {
padding-top: 30px;
}
div.main {
height: 200px;
width: 100%;
overflow-y: scroll;
position: absolute;
z-index: 50;
background: -webkit-gradient(linear, center top, center bottom, from(white), to(rgba(255,255,255,0)));
}
div.item {
border: 1px solid black;
margin: 20px;
padding: 20px;
}
div.scroller {
height: 20px;
width: 100%;
position: absolute;
z-index: 100;
overflow: hidden;
}
div.banner-wrapper {
background: transparent;
position: relative;
height: 20px;
overflow-y: scroll;
left: 0;
margin-right: -20px;
}
div.banner {
height: 20px;
background: -webkit-gradient(linear, center top, center bottom, from(white), to(rgba(255,255,255,0)));;
margin-left: 20px;
margin-right: 40px;
}
Development version: http://jsfiddle.net/mCYLm/13/
Final version: http://jsfiddle.net/mCYLm/14/
Works with zooming and variable viewport width.
! BUG: Scrollbar button from the right top is not accessable/clickable.
Tested in:
IE6,7,8,9 (windows)
FF11 (Windows)
Google Chrome 18 (ubuntu)
Safari 5.1 (OSX)