I was using CSS left for an animation and I'm moving over to translateX for performance reasons. Then I stumbled upon the following:
Two divs:
<div class="box box1">Using CSS left:20%;</div>
<div class="box box2">Using CSS transform: translateX(20%);</div>
and some CSS:
.box {
width:500px;
background:red;
height:50px;
position: relative;
}
.box1 {
left:20%;
}
.box2 {
transform: translateX(20%);
}
Produces this:
Turns out that translateX uses the element width while left uses with viewport/parent element width.
How do I make translateX use the viewport/parent width?
http://jsfiddle.net/Vd2nK/
You could do:
.box2 {
transform: translateX(20vw);
}
which, combined with
body {
margin: 0;
}
gives the same result as left: 20%;. Note, thought, that the vw unit (which equals 1/100th of the width of the viewport) requires a fairly modern browser.
Here's a fixed fiddle: http://jsfiddle.net/Vd2nK/6/
Related
I'm using the "100% page height" pattern from this SO answer:
CSS Div stretch 100% page height
In other words I have a basic DOM structure of:
<hmtml> // has min-height: 100% and position: absolute
<body> // has height: 100%
<div id="myApp"> // has // has position:absolute/top: 0/bottom:0
<div id="inner"> // has no styles (or height: 100%; same difference)
Everything works great with html/body/#myApp: they all have 100% page height. My problem is the div#inner: it doesn't grow to the height of its parent (even if I give it height: 100%).
I believe this is happening because #myApp is positioned absolutely, and thus has no height for #inner to inherit. Is there any way to fix this without adding position: absolute; top: 0; bottom:0 to every nested element? It seems like if I can somehow get #inner to take its height from #main I can get all of its children to inherit that height ... but because of the absolute positioning I can't figure out how to do that.
Any help would be appreciated.
html, body{ height:100%; margin:0; }
#myApp{
position:absolute;
top:0; bottom:0; left:0; right:0;
background:red;
}
#inner{
height:100%;
background:gold;
}
<div id="myApp">
<div id="inner">
Inner should be gold and it is!
</div>
</div>
Pretty simple question, but can't seem to find the solution. I have 5 elements: 2 floating left, 2 floating right. The fifth element is supposed to be in the perfect center of the div (#infographic), no matter what the screen width is.
example:
1,2 -- 3 -- 4,5 OR 1,2 ----- 3 ----- 4,5
HTML code:
<div id="infographic">
<div class="icon-one"></div>
<p>me</p>
<div class="arrows"></div>
<p>customer</p>
<div class="icon-two"></div>
</div>
Any suggestions to get the element in the center?
I guess this is the output you are looking for :
DEMO
html, body,p{
margin:0;
padding:0;
}
#infographic * {
width:10%;
height:30px;
background:teal;
padding:0;
margin:0 1%;
}
#infographic .icon-one, #infographic .icon-one + p {
float:left;
}
#infographic .icon-two, #infographic .icon-two + p {
float:right;
}
#infographic .arrows{
margin:0 auto;
text-align:center;
}
<div id="infographic">
<div class="icon-one"></div>
<p>me</p>
<div class="icon-two"></div>
<p>customer</p>
<div class="arrows">arrows</div>
</div>
If 12 and 45 have fixed width you can not achieve this using css float, you must use something like absolute positionning instead.
For more information qive a link to your page in its current state, or some more code.
Try this:
If you have two floated divs, then you know the margins. The problem
is that the float:right div should be put before the middle div. So
basically you will have:
left-floated | right-floated | centered
Now, about the margins: usually you can just use margin:0 auto, right?
The problem is that right now you know the values of the margins:
floated divs! So you just need to use:
margin:0 right-floated-width 0 left-floated-width
That should work...
See: this answer
Add position: relative to the container to allow the .arrows to be positioned absolutely relative to the container. Position the .arrows at the center of the container by using top: 50% and left: 50% (the percentages are relative to the container) and then move the .arrows a bit to the top left by using transform: translate(-50%, -50%) (percentages are relative to the .arrows)
.arrows {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
See http://codepen.io/ckuijjer/pen/rhEgy for an example or http://css-tricks.com/centering-css-complete-guide/ for a complete tutorial on horizonal/vertical centering.
If it's only about horizontal centering you might even be able to use
.arrows {
margin: 0 auto;
}
as floating elements are taken outside of the normal document flow
First, it should be possible to group the left and right floated elements together. What we can then do is create a 'fake' wrapper that fills up the entire container. If we know the width of the element to be centered, this can then be centered using a margin.
<div id="infographic">
<div class='leftcol left'>
<div class="icon-one left">1</div>
<p class='left'>me</p>
<div class='clear'></div>
</div>
<div class='rightcol right'>
<p class='right'>customer</p>
<div class="icon-two right">2</div>
<div class='clear'></div>
</div>
<div class='center'>
<div class="arrows">A</div>
</div>
</div>
CSS:
.left {
float: left; }
.right {
float: right;}
.center {
overflow: hidden;
position: absolute;
width: 100%;
}
.arrows {
margin: 0 auto;
display: block;
width: 30px;
}
.clear {
clear: both;
}
#infographic {
position: relative;
}
If we do not know the width of the centered element, take a look at the question Centering a div block without the width and apply the solution there.
Note that the solution presented assumes that the center width is never so wide that it will become wider than the two columns on the left and the right. If you want to have safeguards for that you should set a maximum width percentage like so (the example restricts each column to one-third of the total width):
.leftcol .rightcol .arrows {
max-width: 33.3%
}
i am trying to create to divs width the outer container set to 1000px and the inner left and right container to 50% each.
Now i have used this code
.leftNav {
#include span-columns( 5 of 10);
background-color:silver;
color:white;
}
.rightNav {
#include span-columns( 5 of 10);
background-color:silver;
color:white;
}
Now somehow if i don't put anything on left nav the right nav takes full 100% width.
How can i set the leftnav or rightnav to maintain at least 50% width even if they are empty?
thanks.
This "issue" doesn't come from Neat, but from CSS itself. To be shown, an empty element require to have a height.You can use one of the following tricks:
Put in your div
Set a height on your div
Set a padding on your div
Here's another trick I like, if you're not using the :after pseudo-element on these div:
.leftNav:after,
.rightNav:after {
content: '.'; // dot will force its parent to have a height
opacity: 0; // dot is hidden
}
You could use css tables.
Setting display:table-cell on both the left and right divs will ensure that each one gets equal height (ie the height of the greater of the two)
FIDDLE
.container {
width: 100%;
display: table;
}
.left {
width: 50%;
display: table-cell;
background: silver;
}
.right {
width: 50%;
display: table-cell;
background: tomato;
}
<div class="container">
<div class="left"></div>
<div class="right">some text</div>
</div>
You can also do:
.leftNav:after,
.rightNav:after {
content: '';
display: inline-block;
}
Then you don't have to deal with any dots which could be confusing to someone else looking at your code.
I know I can make an element as high as it is wide using padding-top/bottom
#element {
width: 40%;
padding-top: 40%;
}
The reason the above works is because, when giving padding-top/bottom a percentage value, it is relative to the width of the parent, not the height.
how can i do the same thing, just making it as wide as it is high instead of the other way around?
It needs to be responsive, and the solution should work in all major browser including IE8+
Well, I found a unique hack, though it's only a half-answer (it might answer certain cases). Maybe someone with a few more wits can extend it and find a full solution. :-)
Based on the fact that <img> tags retain their proportion when scaling only one dimension, I put together a test that embeds a 1x1 spacer, and scales it to fit the height.
It does work well. Sadly, the downside is the image needs to be contained in an element which is a sibling to the content generating the height, and the width of the actual element with the content does not change.
Thus, if you're able to duplicate your content, it might actually work.
Here's a JSFiddle to demonstrate it. And, here's the commented code:
<style type="text/css">
#outer {
position:relative; /* limit the absolutely positioned #box */
}
#box {
background-color:red;
position:absolute;
height:100%; /* make this box fill the height of #outer */
display:block;
z-index:-1; /* put it behind the content box generating height (maybe not if you want to hide / copy it) */
}
img {
height:100%; /* generate the proportional square */
}
#inner {
position:absolute;
top:0; bottom:0; left:0; right:0; /* make the inner box just fill the box generated by the image */
}
.centered {
text-align:center;
margin-top:50%;
transform:translateY(-50%); /* quick vertical-centering css */
}
#box-text {
color:white;
}
#height-box {
display:inline-block; /* make the box width fit to the content - not vital either way */
}
</style>
<div id="outer">
<div id="box">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
<div id="inner">
<p id="box-text" class="centered">Box</p>
</div>
</div>
<div id="height-box" contenteditable="true">is<br>this<br>actually<br>possible?</div>
</div>
You might need javascript
using jquery it should be something like:
$('#element').css({
width: + $('#element').height()
})
but the above is very rough I didn't even test it
Update it works- see my fiddle:
fiddle for above
or I think I might been a bit sloppy if you prefer:
var el=$('#element');
el.css({
width: + el.height()
});
this
From here:
<div class='box'>
<div class='content'>Aspect ratio of 1:1</div>
</div>
.box{
position: relative;
width: 50%; /* desired width */
}
.box:before{
content: "";
display: block;
padding-top: 100%; /* initial ratio of 1:1*/
}
.content{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
I'm trying to align a html-page with the bottom of the browser-window. This is my apporach:
<body>
<div class="outer-wrapper">
</div>
</body>
.outer-wrapper{
min-height: 950px;
width: 100%;
position: absolute;
bottom: 0;
}
The problem with this solution is that when the screen is smaller than 950px high, the top of the outer-wrapper disapears above the screen and no scroll is added. Both the body and the outer-wrapper has a background-image.
Here is a sample, as you can see, the top of the red box is above the body.
http://jsfiddle.net/C5Nce/1/
The following demo should work, if I understand what you want correctly:
http://jsfiddle.net/C5Nce/10/show/
I just used a media query to detect when the page is less than 550px and set the element to be pinned to the top instead:
#media screen and (max-height: 550px) {
.outer_wrapper {
top: 0;
}
}
I've coloured it green so you can tell when the query fires.
.outer {
position:absolute;
height:100%;
width:100%;
background-color:#aaaaaa;
margin:0;
padding:0;
}
.content {
position:relative;
width:90%;
height:90%;
background-color:#444444;
margin:5%;
}
.inner {
position:absolute;
height:20%;
width:100%;
background-color:#eeeeee;
bottom:0;
margin-bottom:10%;
}
<div class="outer">
<div class="content">
<div class="inner"></div>
</div>
</div>
http://jsfiddle.net/L8H9J/
1) Remove the margin-bottom style from the inner class
2) All the content you add inside the inner class will be aligned with the bottom
3) Because of the flow of the document in HTML, you cannot explicitly align them with the
bottom
4) You can use this trick to do so, but again all elements inside the inner class will be
with flow of position:static
5) There comes the use of JavaScript to determine suitable margins for each element inside
the inner class
Tip: Use percentages; although you want the wrapper to be of height ~950px, but if you can use percentages for the dimensions, you would really love watching your web applications scale with the browsers:
I would just give your outer-wrapper a height of 100% (along with html, body):
html, body {
height: 100%;
padding: 0;
margin: 0;
}
.outer-wrapper {
height: 100%;
width: 100%;
position: absolute;
bottom: 0;
overflow-y: auto;
background-position:bottom; //Edit
}
Then the outer-wrapper will always keep the body's height. There’s no need for the 950px height min because in the case that the viewport is too small you wanted for this to scroll and in the other case the viewport is bigger than 950px - well, it's bigger than 950px - that's a good thing.
Edit section from your code here
.outer_wrapper
{
background-color:red;
/*min-height: 550px;*/
margin-left: -75px;
top:auto;
bottom: 0;
position: absolute;
left:50%;
}
and you are specifying your red box is above the body, if you put it inside body it supposed to be placed like it as you also have specify min-height of container.