I'm experiencing a nasty css problem I can't seem to solve.
I want to position a wrapper inside a container with the left property (in the positive direction; negative seems to work for some reason) without the content inside to start wrapping up.
Here is a jsfiddle for the following HTML and CSS.
<div id="container">
<div id="wrapper">
<div id="one"></div>
<div id="two"></div>
</div>
</div>
#container {
width: 200px;
height: 200px;
position: relative;
border: 1px solid #000;
/*white-space: nowrap;*//*Works for chrome, but not for firefox*/
}
#wrapper {
position: absolute;
/*left: 100px;*/
}
#one, #two {
width: 80px;
height: 80px;
background-color: #000;
margin: 10px;
float: left;
}
If you uncomment the left: 100px;, you'll notice the two boxes get moved but also wrapped. In chrome, this can be fixed using white-space: nowrap; on the container. It doesn't work for Firefox, though, and also affects the text content. I have tried removing position: relative; from the container and calculating the right offset with Javascript but that's somewhat inconvenient.
Edit: It does work with CSS3's transform: translateX(100px) but I'd still prefer the left variant.
Specifying a width for the wrapper seems to work in both Firefox and Chrome (and doesn't require the white-space property at all). The CSS for wrapper becomes:
#wrapper {
position: absolute;
left: 100px;
width: 200px;
}
Related
I was wondering why position: sticky works for some x-axis-scrolling, but once you scroll past the initial width of the screen width, your 'sticky div', stops sticking.
In this example, I have a left-side-bar that sticks to the left (please note that I cannot use position: fixed or position: absolute, because in my actual project both the left-div and the right-div need to scroll up and down along the y-axis, hence we only want left-side-sticking)
is there an additional CSS parameter I can define, such as
left-sticky-distance=999999%
or something like that?
some test code illustrating is below
<html>
<body>
<div style='
position:sticky;
z-index:1;
left:0;
width:100px;
height:200px;
overflow: hidden;
background-color:#ff0000;
opacity:0.8;'
>
</div>
<div style='position: absolute; top: 10; left: 10; width: 200; height:50px; background-color: blue'>B</div>
<div style='position: absolute; top: 10; left: 110; width: 200; height:50px; background-color: blue'>C</div>
<div style='position: absolute; top: 10; left: 210; width: 200; height:50px; background-color: blue'>D</div>
</body>
<html>
After I add the height: auto; into body's CSS attributes as below, this auto-hiding problem is fixed.
body {
background: #fff;
color: #444;
font-family: "Open Sans", sans-serif;
height: auto;
}
Hope it will be helpful to you. :)
This question: https://stackoverflow.com/a/45530506 answers the problem.
Once the "sticky div" reaches the edge of the screen, it is at the end of the viewport of the parent element. This causes the sticky element to stop and stay at the end of parent's viewport. This code pen provides an example: https://codepen.io/anon/pen/JOOBxg
#parent{
width: 1000px;
height: 1000px;
background-color: red;
}
#child{
width: 200px;
height: 200px;
background-color: blue;
position: sticky;
top: 0px;
left: 0px;
}
body{
width: 3000px;
height: 3000px;
}
<html>
<div id="parent">
<div id="child">
</div>
</div>
</html>
What i've just realized is that is stops sticking because you haven't captured an overflow. if you've specified an overflow: hidden;, then check that all content within that axis fits perfectly on all screen sizes and if not then make the necessary adjustments to make the content fit. This also happens when you have specified the height of a div and the content overflows past that height in a certain screen sizes.
I hope this helps anyone that made the same mistake i did.
I have some nested divs that aren't resizing correctly with the window in Chrome 26 (stable), but they work fine in previous versions as well as in Firefox. Before I go file a bug report, I want to make sure what I'm seeing isn't expected standard behavior that my other browsers just aren't getting right.
Using Chrome 26, try resizing your preview pane on this Plunkr. The #inner element will either shrink or expand beyond the bounds of its parent, which I do not want it to do, and which it doesn't do in previous versions of Chrome or in Firefox.
Setting my #outer div to absolute positioning fixes the issue—except that I need the #outer div fixed in place. I've also noticed that removing position:absolute from #main also fixes the problem…but I need #main to be absolutely positioned.
I'm at a loss as to why this is happening, or even if this is expected behavior. I need the #inner child to resize with its #outer parent, not have the #outer element scale independently. How can I achieve this?
HTML/CSS
<!doctype html>
<html>
<style>
#main {
min-height: 100%;
position: absolute;
width: 100%;
}
#container {
min-width: 400px;
width: 50%;
margin: auto;
position: relative;
}
#outer {
position: fixed;
border: solid 2px black;
margin-top: 100px;
top: auto;
max-height: 150px;
position: fixed;
width: 50%;
min-width: 400px;
margin: auto;
background-color: green;
}
#inner {
background-color: rgba(0,0,0,.5);
padding: 10px;
border: 2px gray dashed;
position: relative;
}
</style>
<div id="main">
<div id="container">
<div id="outer">
<div id="inner">
<input type="text">
</div>
</div>
</div>
</div>
If you change the main container to position:fixed as shown below, it will fix the resizing issue. Don't know what effect that will have on page layout, but it is a similar look.
#main
{
position:fixed;
top:0;bottom:0;left:0;right:0;
background-color:#d3fcee;
}
I am trying to float some elements and apply clearfix so that the parent element can expand to the height and width of the children.
So, I simply set up the layout as per this fiddle: http://jsfiddle.net/fMjEx/
I then wanted to float the elements inside .bar. This is usually quite straight forward:
Float the elements.
Clear fix the parent using pie-clearfix or overflow: auto.
However, I ran into these problems:
If I use pie-clearfix, the element .picture which is next to .bar is also included in the clearing: http://jsfiddle.net/6C7WD/
If I use overflow: auto or overflow: hidden, the width of the .bar no longer spans the width of the document: http://jsfiddle.net/fv2gA/
Initially, one solution I had was to make .picture position: absolute. However, the problem with this approach is that the element is taken out of the flow.
In the layout, the height of .bar is variable depending on the content inside. I would like to give .bar and .picture a margin-bottom so that anything that comes after them is pushed downwards by that amount depending on whether .bar or .picture has a greater height.
This rules out using position: absolute on .picture as a solution.
Are there any solutions that satisfy the following?
Clear only floats within .bar.
Does not remove any elements from the flow.
This is the solution I ended up with:
Added a wrapper to the markup:
<div class="container">
<div class="group"> <-------------------------- This is the wrapper
<div class="picture"></div>
<div class="bar">
<div class="info"> some text goes here</div>
<div class="buttons">some other content goes here</div>
</div>
</div>
</div>
And the CSS:
.picture{
width: 100px;
height: 100px;
float: left;
background: green;
margin-left: 100px;
margin-top: 10px;
z-index: 2;
position: relative;
}
.bar{
background: blue;
margin-top: -80px;
overflow: auto;
width: 100%;
float: left;
z-index: 1;
position: relative;
}
.group{
margin-bottom: 10px;
}
.group:after {
clear: both;
content: "";
display: table;
}
.info, .button{
float: left;
margin-left: 200px;
}
.container{
overflow: auto;
}
Fiddle of the above: http://jsfiddle.net/c6Lng/
Here's my markup:
<div id="container">
<img id="image" src="image.jpg" />
<div id="contents">Contents</div>
</div>
The height of #container equals the height of #image.
All the heights are dynamic (they change on window resize).
The image can not be set via background property.
How can I have Contents over the image and vertically centered in #container?
Is the height of #contents known? In that case this should do it (jsfiddle demo):
#container{
position:relative;
/* For demo only */
height:500px;
border: 5px solid red;
}
#image{
position:absolute;
/* For demo only */
height:500px;
}
#contents{
position: absolute;
top:50%;
height:100px;
margin-top: -50px; /* Half of #contents height */
/* For demo only */
background-color: blue;
}
This ought to do what you are looking for. I have just set the height of the container and image in css, but if they are the same set in html or using javascript, the result should be the same. The background colour is just there for clarity.
#container {
background-color: #333;
height: 200px;
}
#image{
height: 200px;
float: left;
}
#contents{
line-height: 200px;
float: left;
position: fixed;
}
EDIT: Here is a fiddle of a solution using the old classic margin auto trick. The only thing that may cause problems here is that the parent needs to be position: fixed; which may cause issues for you elsewhere. The main thing is it works, and no heights are set using pixels.
link
Here is the code from the fiddle for a pure css solution with no fixed heights.
<div id="container">
<img id="image" src="https://www.google.co.uk/logos/2012/juan_gris-2012-hp.jpg" />
<div id="contents">Contents</div>
</div>
#container {
position: fixed;
}
#contents{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 50%;
height: 10%;
margin: auto;
}
If you know the height of #contents you can set up
#container{position:relative;}
#contents{
position:absolute;
top:50%; /*50% of parent*/
margin-top:/*negative one-half of container height i.e. if contaner is 4 em -2em*
}
You say you don't know the height of #contents, though.
Another option is to set the display: to table-cell and use vertical-align: middle
#container{
display: table-cell;
vertical-align: middle;
}
But depending on what browsers you are targetting for support, that may cause display issues as well.
The more sure fire way is to combine the first option with some jquery or javascript to find the element's height and set its margin-top:
content= document.getElementById('content')
content.style.marginTop = '-' + content.offsetHeight + 'px';
http://jsfiddle.net/h76sy/
EDIT: Sorry, had a bug in my javascript, try it now
I want the top lines of two DIVs (<div></div>) to be aligned horizontally, how to do it?
Steven,
In addition to T. Stone's suggestion to float both divs, a simple way to align two divs is to make both have the display: inline-block; CSS rule and give the lower div the vertical-align: top; CSS rule.
Take a look at this simple jsFiddle example to see how this works.
div {
display: inline-block;
}
div#tall {
height: 4em;
}
div#short {
height: 2em;
vertical-align: top;
}
In response to "is there another way to do it", sure you could use display: inline but you have a bunch of hacks to remember to get it to work in IE6/7. This way is generally better (but it all comes down to the individual circumstances)
<style type="text/css">
.keeper {
overflow: hidden; /* expand to contain floated children */
}
.keeper div {
width: 200px;
height: 30px;
float: left;
border-top: 1px solid red; /* so you can see the 'tops' */
}
</style>
<div class="keeper">
<div>
</div>
<div>
</div>
</div>
Float them in a container.
.parent div { float: left; width: 50%; }
<div class="parent">
<div>1</div>
<div>2</div>
</div>
Note: The sum of the width of the child divs can not be greater than 100% of the parent div, including margin and padding.
Alternative
If maintaining flow with the page isn't a requirement, and all that really matters is aligning, them, the divs can always be positioned absolutely.
.abs { position: absolute; top: 100px; width: 50px; }
.left { left: 0px; }
.right { left: 50px; }
<div class="abs left">1</div>
<div class="abs right">2</div>