In a container can you in any way position two blocks above each other (eg absolute) and make the container expand to the size/height of the largest one?
If using position: absolute the container does not expand to the size of the positioned element.
Is there any way to get this effect with CSS?
Illustrative (defunct) example:
<div class="wrap">
<div class="foo">foo</div>
<div class="bar">bar</div>
</div>
CSS:
.wrap{
position: relative;
}
.foo{
height: 40px;
}
.bar{
height: 60px;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
jsFiddle: http://jsfiddle.net/qjFR9/
I'd like to position .bar over .foo (position .bar as if there was no .foo) and .wrap should be the height of the largest child.
If the width of the container is fixed a solution like this works:
<div class="wrap">
<div class="foo"><div class="inner">foo</div></div>
<div class="bar"><div class="inner">bar</div></div>
</div>
CSS:
.wrap{
overflow: auto;
}
.wrap,
.wrap .inner{
width: 300px;
}
.wrap > div{
float: left;
width: 0;
}
/* test: .wrap expands to fit the .inner content */
.bar > .inner{
height: 60px;
}
jsFiddle demo.
But this doesn't work with non-fixed width wrappers.
Is there a better way?
Related
I want to have a div in the background (100% width of browser) by mouseover on a content-div. Everything works great but i dont know is there a solution to make the background div as height as the parent?
Without using Jquery? Pure CSS would be great!
Thanks!
.content {
/* position: relative; >> will make the absoluted positioned div 100%width of the browser*/
z-index: 1;
}
.background {
position: absolute;
background: aqua;
width: 100%;
right: 0px;
left: 0px;
z-index: -1;
display: none;
}
.post:hover .background {
display: block;
height: 10%;
/* WHAT TO DO? */
}
<div class="post">
<div class="content">
<div class="background"></div>
…content…
</div>
</div>
part of the problem is: the "post" div is in a centerd "main" div with a given width and i want to have a background-div that has 100% width of the viewport
Sorry, it is a bit hard to explain what i need, therefore I make a small sketch here:
This is posible with vw units, look:
* {
margin: 0;
padding: 0;
}
.main {
background: #29D;
margin: 0 auto;
max-width: 800px;
}
.post {
background: #E31;
margin: 3vw 3vw 3vw 12vw;
}
.content {
background: #8D5;
margin: 2vw;
}
.content img {
width: 100vw;
margin-left: -14vw;
display: block;
}
#media(min-width: 800px) {
.content img {
margin-left: calc(800px / 2 - 50vw - 14vw);
}
}
<div class="main">
.main
<div class="post">
.post
<div class="content">
.content
<img src="http://s3.postimg.org/3k8v5p0v7/dragon.jpg">
</div>
<div class="content">
.content
</div>
<div class="content">
.content
</div>
</div>
</div>
First thing you need to know is the max width of your wrapper. In my case it is 800px. You have to substitute all the 800's with your size. Then notice that all your left margins should be in vw units or pixels but not 100%. The trick here is that calc() function and the media query!
I have 2 columns 50% width each. Inside each column I have overflown content positioned absolutely relative to body.
<div class='column left'>
<div class='inner'><h1>Pink</h1></div>
</div>
<div class='column right '>
<div class='inner'><h1>Blue</h1></div>
</div>
I need the inner divs to be hidden. How do I do that? Setting overflow:hidden on .column has no effect on inner divs. Fiddle HERE
PS. The idea is to animate the width of the columns and show the inner content. This fiddle illustrates what i am trying to achieve (but it is using vh, vw that I cannot use due to browser requirement)
html, body {
width :100%;
height: 100%;
position: relative;
}
.column {
float: left;
width: 50%;
height: 100%;
overflow: hidden; /*has no effect*/
}
.inner {
position: absolute;
top: 50%;
width: 100px;
}
.left .inner {
right: 20px;
text-align: right;
}
.right .inner {
left: 20px;
text-align: left;
}
Are you simply looking for
visibility: hidden;
or
display: none;
This last one removes the element from the DOM.
I have two divs with float:left inside a container with a fixed width - something like that
<div style="width:1100px">
<div id="A" style="float:left; width: 400px"></div>
<div id="B" style="float:left; min-width: 600px"></div>
</div>
Here is the problem. Both internal divs A and B are generated dynamically and div B can exceed 700px. In that case, it goes below div A. I cannot easily change the width of the container, because it is also generated automatically by bootstrap.
I've tried to play with the overflow options, but it didn't work. I could recalculate the width of the container dynamically with jquery based on the total width of divs A and B, but it will be overdo.
What is the easiest way to force div B stay next to div A regardless of its width?
Thanks
like my comment and using akinuri modified fiddle, using percentage and without scroll bar;
#container {
width: 1100px;
position: relative;
overflow: show; /* or hidden if you dont want the scrool bar */
}
#A {
background: yellow;
width: 60%;
}
#B {
position: absolute;
top: 0;
left: 60%; /* width of #A */
width: 80%;
background: blue;
}
you get
http://jsfiddle.net/TRFmL/1/
EDIT
I think now I have whatyou want:
#container {
width: 100%;
position: relative;
overflow: show; /* or hidden if you dont want the scrool bar */
}
#A {
float:left;
display:inline-block;
background: yellow;
width: 60%;
}
#B {
float: right;
margin-right: -40%; // this is the result of 100 - (A+B)
display:inline-block;
width: 80%;
background: blue;
}
One way I can think of is using absolute positioning.
<div id="container">
<div id="A">a</div>
<div id="B">b</div>
</div>
#container {
width: 1100px;
position: relative;
overflow: auto; /* or hidden if you dont want the scrool bar */
}
#A {
background: yellow;
width: 400px;
}
#B {
position: absolute;
top: 0;
left: 400px; /* width of #A */
width: 900px;
background: blue;
}
FIDDLE
You can use inline-block display for the div, then set white-space to nowrap and remove any white space between the two div.
Live example: http://jsfiddle.net/VMVAb/
I've stumbled upon some unexpected behaviour when testing a layout in Firefox. It seems that when a parent is set to display:table-cell and position:relative, its children do not respect the parent width when positioned absolutely and given 100% width. Instead, the child width is set to the parent's parent width. I've recreated this issue with a fiddle:
http://jsfiddle.net/D6Rch/1/
which is structured as:
<div class="table">
<div class="cell-1">
<div class="content-1">this must be positioned absolutely</div>
<div class="content-2">as these divs will be overlapping</div>
</div>
<div class="cell-2">
<div class="advert">fixed width advert</div>
</div>
</div>
.table {
width:600px;
height:400px;
border:3px solid black;
display: table;
position: relative;
table-layout: fixed;
}
.cell-1 {
width: auto;
display: table-cell;
background: yellow;
position: relative;
margin-right:10px;
}
.cell-2 {
margin-right:10px;
width: 100px;
display: table-cell;
background: pink;
position: relative;
}
.content-1 {
position: absolute;
top: 10px;
width: 100%;
background: lightgreen;
z-index: 5;
}
.content-2 {
position: absolute;
top: 50px;
width: 100%;
background: lightblue;
z-index: 5;
}
.advert {
position: relative;
border: 1px solid red;
}
It functions as expected in Chrome & Safari, but not on Firefox. Question is, why does this happen? And is there a workaround for this or should I take an altogether different approach?
Thanks in advance,
This is a known bug in Gecko. See the Gecko Notes here - https://developer.mozilla.org/en-US/docs/Web/CSS/position
So, you'll have to wrap you content divs in another positioned div. Like so
http://jsfiddle.net/D6Rch/4/
<div class="cell-1">
<div class="wrapper">
<div class="content-1">this must be positioned absolutely</div>
<div class="content-2">as these divs will be overlapping</div>
</div>
</div>
.wrapper {
position: relative;
}
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/