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?
Related
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>
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 is what I have done till now.
<div style="overflow:visible;width:1050px;border:1px solid green;height:50px;margin-left:115px">
<div style="border:1px solid red;position:absolute;width:730px;">
<br/><br/><br/>
<div class=''><div class='tagstyle'>FRESHER</div><div class='tagstyle'>IT JOBS</div><div class='tagstyle'>2013</div><div class='tagstyle'>BANGALORE</div></div>
<!----- left --->
<div>
<div style="border:1px solid blue;height:900px;position:absolute;width:340px;margin-left:735px;">
<!------ right --->
<div>
</div>
Problem is, right side div going downward, when left side div has any content.
Aha! Saw your edit now! It's really simple with some css3 table display properties, but that doesn't work in old browsers.
However, you could use some simple css to make a standard blog template with sidebar, header and main content:
<style>
.body-wrapper {
position:absolute;
top:20px;
left:50%;
width:900px;
margin-left:-450px; /* Half the width (negative) */
background:red;
}
.header {
position:relative;
width:100%;
height:100px;
margin-bottom:10px;
background:blue;
}
.main {
float:left;
width:70%;
background:green;
}
.sidebar {
float:right;
width:30%;
background:yellow;
}
</style>
<div class="body-wrapper">
<div class="header">
Header!
</div>
<div class="main">
Content!
</div>
<div class="sidebar">
Sidebar!
</div>
</div>
Here is a jsFiddle as proof: http://jsfiddle.net/Kepk9/
Hope it helps!
Another answer!
If you just would like to position divs after each other, you could set them to display:inline-block, like this:
<style>
.inline {
display:inline-block;
}
</style>
<div class="inline">
Labalodado
<br/>multiline content
</div>
<div class="inline">
Less content
</div>
<div class="inline">
Another div
<br/>with
<br/>multiline content
</div>
The reason why your code doesn't work is really simple actually. I made some other answers first because I think that they are a better approach.
position:absolute doesn't automatically move the item to {0,0}
You have to set top:0px by yourself.
Oh.. and there are some mistakes in your code too, but just go with one of my other too answers and you'll be fine :)
I've got a set of side by side divs (actually using HTML5 sections but I'm assuming the solution and behavior is just the same). They sit in a container with the right side holding form fields and left side a summary title and information. The structure looks something like this:
<div id="container">
<div id="left" >Summary here</div>
<div id="right">Form fields here</div>
</div>
The catch is I have to hide or show various fields depending on actions taken with javascript so the actual height of the right side and container are not static. What I need is to get the left side to fill the height of the container so it will match the right. I've tried the numerous solutions on the internet but none seem to be working.
Thanks in advance!
This is a very common question. Take a look at this article... it has all the answers:
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
Now, here's a quick fiddle of putting that to use. Try clicking on any of the "Column #" text elements to remove them from the document... the columns will resize nicely :)
http://jsfiddle.net/UnsungHero97/qUT3d/9/
HTML
<div id="container3">
<div id="container2">
<div id="container1">
<div id="col1">Column 1</div>
<div id="col2">Column 2</div>
<div id="col3">Column 3</div>
</div>
</div>
</div>
CSS
#container3 {
float:left;
width:100%;
background:green;
overflow:hidden;
position:relative;
}
#container2 {
float:left;
width:100%;
background:yellow;
position:relative;
right:30%;
}
#container1 {
float:left;
width:100%;
background:red;
position:relative;
right:40%;
}
#col1 {
float:left;
width:26%;
position:relative;
left:72%;
overflow:hidden;
}
#col2 {
float:left;
width:36%;
position:relative;
left:76%;
overflow:hidden;
}
#col3 {
float:left;
width:26%;
position:relative;
left:80%;
overflow:hidden;
}
Basically i have:
<div class="wrap">
<div class="sum">
little text
</div>
<div class="content">
long<br/>
long<br/>
long<br/>
long<br/>
long<br/>
long<br/>
long<br/>
text
</div>
</div>
<style>
.wrap{
height:100%;
overflow:hidden;
background:green;
}
.sum{
float:left;
height:100%;
background:yellow;
}
.content{
float:left;
height:100%;
background:red;
}
</style>
If you see, the sum div doesn't expand to the remaining height to equal to the content div.
All i want is both divs be in the same height without specifying it.
I totally need a Pure css, and not javascript or table.
Thanks
This might be a better option for you...
http://bonrouge.com/2c-hf-fixed.php
or check out faux columns:
http://www.alistapart.com/articles/fauxcolumns/