According to CSS Specification:
A floated box is shifted to the left or right until its outer edge
touches the containing block edge or the outer edge of another float.
If there is a line box, the outer top of the floated box is aligned
with the top of the current line box.
When I was writing this demo, I found that floats always collapse when height is zero. But I didn't find any declaration about this on CSS Specification. My question is why it behaves like this? Why edge with zero height is not considered an edge?
.container{
height:500px;
width:800px;
background:pink;
}
.f{
float:left;
width:100px;
/* height:50px; */
}
.r{
position:relative;
}
.a{
position:absolute;
top:0;
left:0;
}
<div class='container'>
<div class='f'>
<div class='r'>
<div class='a'>ITEM1</div>
</div>
</div>
<div class='f'>
<div class='r'>
<div class='a'>ITEM2</div>
</div>
</div>
</div>
Simply because it's 0 height so there is no edge and the edge of the containing block will be considered and you will logically have overflow.
Add some animation to better see the effect:
.container{
height:500px;
width:800px;
background:pink;
}
.f{
float:left;
width:100px;
height:50px;
background:red;
}
.r{
position:relative;
}
.a{
position:absolute;
top:0;
left:0;
}
#keyframes change {
to {
height:0;
}
}
<div class='container'>
<div class='f' style="animation:change 3s linear forwards">
<div class='r'>
<div class='a'>ITEM1</div>
</div>
</div>
<div class='f' >
<div class='r'>
<div class='a'>ITEM2</div>
</div>
</div>
</div>
When reaching 0, we no more have an edge on the first float element so the second one will get shifted to touch the edge of the containing block.
The only way to have an edge is to make sure there is at least a small amount of height even if it's a border, padding, etc.
.container{
height:500px;
width:800px;
background:pink;
}
.f{
float:left;
width:100px;
height:50px;
background:red;
}
.r{
position:relative;
}
.a{
position:absolute;
top:0;
left:0;
}
#keyframes change {
to {
height:0;
}
}
<div class='container'>
<div class='f' style="animation:change 3s linear forwards;border-top:0.2px solid">
<div class='r'>
<div class='a'>ITEM1</div>
</div>
</div>
<div class='f' >
<div class='r'>
<div class='a'>ITEM2</div>
</div>
</div>
</div>
Related
If someone used a flexbox with 2 items that take up as much space available both will take equal parts of the container. I'm working with a sliding component(Ionic2) that translates one of the boxes(say the left one) over the other(right one) and I'd like to shrink the other based on the final position of the translated box(so that possible inner flex items can resize accordingly). Here's a codepen .
<h1>Both parts take up the same space.</h1>
<div class="container">
<div class="item1">
</div>
<div class="item2">
</div>
</div>
<br>
<h1>They still take up the same space, but the red overlaps the blue.</h1>
<div class="container">
<div class="item3">
</div>
<div class="item4">
</div>
</div>
And the corresponding css
.container{
width:1000px;
height:100px;
background-color:gray;
display:flex;
}
.item1{
height:100%;
width:100%;
background-color:red;
}
.item2{
height:100%;
width:100%;
background-color:blue;
}
.item3{
height:100%;
width:100%;
background-color:red;
transform:translate3d(100px,0,0);
}
.item4{
height:100%;
width:100%;
background-color:blue;
}
Is it possible without having to transform the second box?
I am using this code for a site I am developing. The problem I am having is scrolling up to the fixed panel div.
HTML:
<div id="wrapper">
<div id="a" class="panels">FIXED PANEL</div>
<div id="b" class="panels">Scrolling-Panel 1</div>
<div id="c" class="panels">Scrolling-Panel 2</div>
<div id="d" class="panels">Scrolling-Panel 3</div>
</div>
CSS:
html,body {
padding:0;
margin:0;
background:black;
}
#wrapper {
position:absolute;
height:100%;
width:100%;
}
.panels {
position:relative;
height:100%;
min-height:100%;
width:100%;
}
#a{
background:#eee;
position:fixed;
color:red;
top:0;
}
#b{
margin-top:100%;
background:yellow;
}
#c{
background:pink;
}
#d{
background:green;
}
Fiddle is here:
http://jsfiddle.net/ygw6b9ga/
Any ideas/help would be much appreciated!!
Clicking link anchor targeting different element in page tells browser to scroll viewport or corresponding wrapper so elements upper left corner (in LTR page) is visible. Fixed elements does not affect scrolling areas so targeting and focussing them does not initiate this routine.
In your example you could either target the #wrapper instead of the #a to re-reveal fixed header (…, fiddle) or resort to javascript (… fiddle).
This question is an extension of Expand a div to take the remaining width.
The top solution works great for having a div take up the remaining width, but one I place an input in the left div it breaks. My expectation is that the input would expand to fill the remaining width of the div but instead it jumps out of the div and is placed in the bottom.
Note the red box correctly fills the width while the blue box is a fixed with. I need an input box to be doing the same as the red box: fill the remaining width.
http://jsfiddle.net/fct87qpn/
<div class="container">
<div class="right"></div>
<div class="left">
<input type="text" class="text"/>
</div>
</div>
The solution is already in your provided link:
.left {
overflow: hidden;
}
JSFiddle
Another solution would be to add a margin:
.left {
margin-right: 200px;
}
The first one is more flexible, though.
.container {
position:relative;
width:100%;
height:200px;
border:1px solid;
}
.right {
height:200px;
width:200px;
background:green;
float:right;
}
.left {
width:-webkit-calc(100% - 200px);
height:178px;
background:red;
}
.text{
position:relative;
width:100%;
height:20px;
margin:0;
border:0;
top:178px;
}
<div class="container">
<div class="right"></div>
<div class="left">
<input type="text" class="text"/>
</div>
</div>
Hi is this even possible? i've tried everything I need to get that orange box up and under the other orange box? here is my code, I'm going mad!!
<div id="container">
<div id="nav1"></div>
<div id="nav2"></div>
<div id="box3"></div>
<div id="box4"></div>
<div id="box5"></div>
<div id="box5"></div>
<div id="box3"></div>
</div>
CSS
#box3
{
width:250px;
height:200px;
background-color:#F30; float:left;
}
#box4
{
width:500px;
height:400px;
background-color:#F00;
float:left;
}
#box5
{
width:250px;
height:200px;
background-color:#C00;
float:left;
}
Jsfiddle
JSfiddle: http://jsfiddle.net/W5uE3/
html:
<div id="container">
<div id="nav1"></div>
<div id="nav2"></div>
<div id = 'cont1'>
<div class="box3"></div>
<div class="box3"></div>
</div>
<div id="box4"></div>
<div class="box5"></div>
<div class="box5"></div>
</div>
css:
#container {
width: 1000px;
}
.box3{
width:250px;
height:200px;
background-color:#F30;
float:left;
}
#box4{
width:500px;
height:400px;
background-color:#F00;
float:left;
}
.box5{
width:250px;
height:200px;
background-color:#C00;
float:left;
}
#cont1 {
float: left;
width: 250px;
}
You don't need to use z-index, just an extra container. And to change the multiple ids to classes.
First you can't use any div with same id, you have 2 div's with box5 id and 2 div's with id box3, please consider changing these to use a class instead of an id.
then
You should use the clear:both on the div you want placed in bottom other.
For example:
<div id="box4" style="clear:both"></div>
<div id="box3" style="clear:both"></div>
I already have seen a couple of questions going in this direction, but nothing helped. Everyone says just set the parent div position to relative and the child ones to absolute. But my problem is that every div is at the 0/0 point of my parent div. It seems the inner elements doesn't know from each other.
Here is what my page should look like:
http://imageshack.us/photo/my-images/854/unbenanntgoc.png/
In my html I just define my divs:
<div id="content">
<div id="header" />
<div id="naviContent" />
<div id="imageContent" />
<div id="tagContent" />
<div id="textContent" />
</div>
So navi image and tag content divs should float.
And this is how my css looks like:
#charset "utf-8";
body {
background-color:#33FF00;
}
#header {
height:100px;
background-color:#FFFFFF;
position:relative;
}
#naviContent {
width:25%;
background-color:#F0F;
float:left;
}
#imageContent {
background-color:#000;
position:absolute;
float:left;
width:800px;
height:600px;
}
#tagContent {
background-color:#900;
position:absolute;
float:left;
width: 25%;
}
#textContent {
background-color:#0000FF;
clear:both;
}
#content {
height:1600px;
width:1200px;
background-color:#999999;
margin-left: auto;
margin-right: auto;
padding:10px;
position:relative;
}
So maybe anyone can tell me why all my elements (black, yellow, red, grey and green) are positioned to the 0/0 point of the pink one?
Thanks in advance
You need to close the DIV properly -
<div id="content">
<div id="header">Header </div>
<div id="naviContent">Nav</div>
<div id="imageContent">Image</div>
<div id="tagContent"> Tags</div>
<div id="textContent">Text </div>
</div>
EDIT: Working Fiddle You need to adjust floated width and you are done!
Position absolute is not the standard way of laying out a page.
What you should do is just remove the position attribute, float everything left and set widths (please note you will need content in the div for it to render correctly).
You might want to look into CSS grid systems such as 960.gs as they handle this part of development for you in a standardised way using pre-defined classes.
you should code like this : - http://tinkerbin.com/J9CCZXRL
CSS
#content {
background:pink;
width:500px;
padding:10px;
-moz-box-sizing:border-box;
overflow:hidden;
}
#header {
background:red;
height:100px;
}
#left {
background:green;
width:100px;
height:400px;
float:left;
}
#middle {
background:blue;
width:260px;
float:left;
height:400px;
margin-left:10px;
}
#right {
background:yellow;
width:100px;
float:right;
height:400px;
}
#footer {
background:grey;
height:100px;
clear:both;
}
HTML
<div id="content">
<div id="header"></div>
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
<div id="footer"></div>
</div>