I have two or more divs which need to overlap each other (due some transition effects, i.e. switching tabs and slow disappear).
Below these two divs there is a footer element.
If I use position: absolute the parent element collapses and divs overlaps the footer element.
I can calculate tallest height in scripts. But maybe there is CSS way to keep parent element's height together with tallest one, but let children visually overlap?
EDIT: width of the children is unknown as well, as design is responsive.
.parent{
border: 1px solid green;
position: relative;
}
.one{
background-color: red;
position: absolute;
width: 300px;
}
.two{
background-color: blue;
position: absolute;
width: 400px;
}
footer{
border: 1px solid magenta;
text-align: right;
}
<div class="parent">
<div class="one">
Div one to overlap. Height unknown, width unknown<br>
Div one to overlap. Height unknown, width unknown<br>
Div one to overlap. Height unknown, width unknown<br>
</div>
<div class="two">
Div two to overlap. Height unknown, width unknown<br>
Div two to overlap. Height unknown, width unknown<br>
</div>
<!-- ... --->
<footer>
Footer must be below all divs
</footer>
</div>
No, this is not possible with CSS only on elements with absolute position. Have a look at the answers of this post for a detailed explanation.
if you want to achieve your goal, you can't use absolute position. Because absolutely positioned elements are taken away from the normal layout. Parent element doesn't know about its height.
you can do in the following way:
live Jsfiddle
CSS:
parent{
border: 1px solid green;
}
.one{
background-color: red;
float: left;
width: 300px;
}
.two{
margin-left:-300px;
float: left;
width: 300px;
background-color: blue;
}
footer{
clear: both;
border: 1px solid magenta;
}
HTML:
<div class="parent">
<div class="one">
Div one to overlap. Random unknown<br>
Div one to overlap. Random unknown<br>
Div one to overlap. Random unknown<br>
</div>
<div class="two">
Div two to overlap. Random unknown<br>
Div two to overlap. Random unknown<br>
</div>
<!-- ... --->
<footer>
Footer must be below all divs
</footer>
</div>
Limitations:
you have to know the widths of the divs
you have to use same width either or use left margin value as the negative value of the larger width of the previous divs.
Explanation:
Floated elements sit side by side. If you use the negative value of margin-left, it will overlay on the previous div. Then you set clear property to both for footer which makes the footer stay at the bottom all the divs.
Related
How do I set the width of a div if I want it to be exactly as wide as its contents are. However, I have many children in my DIV that inevitable collapse because they take up more horizontal space than the div allows.
I have this CSS:
.outer{
width: 100%;
background-color: green;
}
.inner{
width: auto;
display: inline-block;
margin: 0 auto;
background-color: red;
}
.row{
float: left;
width: 250px;
background-color: blue;
display: inline-block;
}
And this is my HTML:
<div class="outer">
<div class="inner">
<div class="row">asd1</div>
<div class="row">asd2</div>
<div class="row">asd3</div>
<div class="row">asd4</div>
</div>
<div class="clear"></div>
</div>
Here is my jsfiddle: http://jsfiddle.net/vullnetyy/pshao68g/
What I want to do here is:
the red div must be exactly as wide as the 3 blue divs in its first row
the red div must be centered within the green div
javascript must be avoided
no static width may be set to the red or green divs (because this is supposed to be responsive, and an arbitrary number of blue divs may be provided)
First of all, if you want to center an Element you need to make it:
display: block;
width : %/px;
margin-left: auto;
margin-right:auto;
If you want the 3 blue divs to be inside of the red div and to be exactly 3 blue = 1red width, give each blue 33.333% width.
such as in this example: https://jsfiddle.net/vullnetyy/pshao68g/
Theres two conflicting issues here.
1)You must have a set width in order to do margin-left/right auto.
2)If you float to try to match child width you cant do margin auto. Now I know you didnt put float left on inner. But you did do display:inline-block which has float left and a few other rules attached.
In this particular case, you have to compromise just a little to get the results you want. Simply set .inner to the same as the row aka 250px since we know thats how large the child will be, and remove display:inline-block and PRESTO!
try this for to your inner and see what happens.
.inner{
width: 250px;
margin: 0 auto;
background-color: red;
}
I've really hit the wall on this one and need some help. I'm trying to create a two column layout with both widths and heights adjusted to the contents of the left column. It seems to be a rather basic layout, but I'm starting to think it can't be done (without resorting to JS).
This fiddle describes what I'm trying to do. It's a container DIV with two DIVs inside, aligned horizontally. The left inner DIV should adjust its size (both width and height) to its content. The right inner DIV (which contains a Google Map) should have the same height as the left one while filling up the remaining width of the container.
<div id="container">
<div id="left">
This DIV should adjust<br/>
both its width and height<br/>
to its content, not taking up<br/>
more space than needed!<br/>
<br/><br/><br/>
More content here...
</div>
<div id="right">
Google Map here.
</div>
</div>
I've tried everything I know and all tricks I've found, but no success!
#container {
background-color: #EEE;
overflow: hidden;
}
#container div {
border: 1px solid black;
padding: 5px;
}
#left {
background-color: lightblue;
display: inline-block;
float: left;
}
#right {
background-color: lightgreen;
height: 100%; /* THIS IS WHAT I WANT, BUT IT WON'T WORK, OF COURSE */
overflow: hidden;
}
I've found many similar questions, but in all those cases the left DIV/column had a fixed width, which makes it a whole lot easier.
Any input is much appreciated, especially if it works in IE9+ (and modern browsers)!
Edit
Some clarification. The purpose of the right column is to hold a Google map and consequently the map is supposed to fill up the entire DIV. Try setting a fixed height (e.g. 100px) for #right in the fiddle that I link to above and you will see the map showing up.
jsfiddle demo
css :
.container {
overflow: hidden;
background-color: #EEE;
}
.column {
float: left;
background-color: grey;
padding-bottom: 1000px;
margin-bottom: -1000px;
}
p {
padding: 10px;
margin-top: 10px;
width: 50%;
}
html
<script src="//maps.googleapis.com/maps/api/js?sensor=false"></script>
<div class="container">
<div class="column">
This DIV should adjust<br/>
both its width and height<br/>
to its content, not taking up<br/>
more space than needed!<br/>
<br/><br/><br/>
More content here...
</div>
<div class="column">
<div id="map"></div>
</div>
</div>
<p>
The right DIV (which contains a Google Map)
should be the same height as the left DIV,
while filling up the remaining width.
</p>
<p>How to do that?</p>
Here what I came up with -> link
When you remove the overflow property of your #right div it stretches as expected. However in this case you won't be able to hide the overflowed content.
CSS
#right {
background-color: lightgreen;
height: 100%; /* THIS WON'T WORK */ // height works as expected
}
I´m trying to float 3 divs in different order in responsive design. In mobile version is correlative (div 1, div 2, div 3) but in desktop version I want to place the div 3 near the div 1 and the div 2 at bottom of them. I´m triying it with float, clears and so but I dont know how fix it. I share a mockup. can help me anyone? Thanks
(source: subirimagenes.com)
This is the html structure:
<div id="fondo-web">
<div id="main">
<section id="main-container" name="div1">
Random Image
</section>
<section id="cadiz-a-caballo" name="div2">
Copy Text
</section>
<section id="frm-container" name="div3">
Contact Form
</section>
</div>
</div>
In example, this is one attempt:
#main-container{
width:33%;
background-color:#856;
float:left;
}
#cadiz-a-caballo{
width:33%;
background-color:#376;
}
#frm-container{
width:30%;
background-color:#856;
float: right;
}
And other attempt with absolute positioning and margin-bottom for the father container:
#main-container{
width:62%;
background-color:#856;
float:left;
}
#cadiz-a-caballo{
width:70%;
position: absolute;
background-color:#376;
top:600px;
}
#frm-container{
width:35%;
background-color:#856;
float: right;
}
#main{
width:75%;
margin:auto;
margin-bottom: 150px;
overflow: hidden;
background-color: #343;
}
This is more or less what you want: http://jsfiddle.net/uyQzQ/1/
First of all you want to make the first div to a certain percentage of its parent:
#main-container{
width:65%;
}
This will leave space for the 3rd div to fall into later.
Then you want the second div to be the full width of the parent:
#cadiz-a-caballo{
width: 100%;
}
Finally you want to position the 3rd div in the space left to the right of the first div. To do this you need to position the parent so absolute positioning of the 3rd div will be relative to the parent, not the document:
#main{
position: relative;
}
Now, you just need to set the width of the 3rd div to the size of the space that is left, and then position it in the top right of the parent.
#frm-container{
width:35%;
position: absolute;
top: 0;
right: 0;
}
I've not included any margin between each element. You can adjust the widths to take this into account to add those margins.
The main issue with this approach is that the 3rd div needs to be the same height or shorter than div 1, otherwise as div 3 is out of the flow of the document, it will display on top of div2 as well (and any content below that too if long enough).
Currently, I'm working on a navigation and I've encountered this issue:
The content of the navigation is floated to left. When I try to set the background color for the navigation itself, it does not work. Look at this example:
http://cssdeck.com/labs/qknohqxe
When the float:left is removed, the background color becomes visible, however, the "form" of the navigation is destroyed.
I'm pretty sure I'm missing an important point as I'm trying to reach to this simple point where both form and background color are preserved as I wanted.
My guess is that, there is a relation between the floated content, and the size of the carrier (#nav in my case).
Needing suggestions/workarounds for this issue.
Add this to .group:
overflow:auto;
That's it.
There is also another solution: adding a clear:both; element after all floating divs. But it's a bit more dirty:
<div class="container">
<div class="floating div"></div>
<div class="floating div"></div>
<div class="floating div"></div>
<div style="clear:both;"></div>
</div>
It always happens when you use floating divs. The container doesn't care about floating elements so it is like an empty container unless you use one of the mentioned solutions.
On the parent container (.group in your case), add overflow: auto or set a fixed height.
This happens because floated, as well as absolutely positioned elements are, by default, excluded from the document flow and thus are ignored when positioning the following elements.
Add a height to your .group.
.group{
height: 300px;
background-color: blue;
}
When you float objects it takes it out of the document flow. Meaning the parent object has no relation to the height of the child elements.
By setting a height you're forcing the container to go down.
Alternatively you can add an overflow to the container .group to force it to look for the height.
.group{
overflow: hidden;
background-color: blue;
}
Here's working CSS declaration.
.group{
background-color: blue;
float: left;
width: 200px;
}
You need to understand floating and positioning of nested elements.
Just add a clear both; to an extra element:
<div id="nav">
<div class="group">
<div class="button">Button1</div>
<div class="button">Button2</div>
<div class="button small">Button3</div>
<div class="button small">Button4</div>
<div class="button">Button5</div>
<br class="clear" />
</div>
</div>
#nav{
width: 240px;
}
.button{
float:left;
border-radius: 20px;
width: 200px;
height: 50px;
margin-top: 10px;
background-color: red;
text-align: center;
line-height: 50px;
}
.group{
background-color: blue;
}
.small{
width: 100px;
}
.clear
{
clear: both;
}
I am looking to take three divs and stack them horizontally (right next to each other) in a containing div. This containing div has a fluid width so that when the browser is scaled in (this is for a responsive design) the three child divs scale proportionally. In addition the three child divs have to be positioned individually so that the left-most div is on the left, the middle div is centered, and the right-most div is all the way to the right side of containing div.
I've tried to accomplish this by setting the container div to display: table and the three child divs to display: table-cell -- this works great except for I can't get the three child divs to be positioned in the way in which I described above. I tried border-spacing on the parent div; however, this doesn't work well with my goal.
Here's my Fiddle with code: http://jsfiddle.net/mkerny45/97mt7/7/
Screenshot of desired result: http://d.pr/i/KUfd
(Here you will see three child divs: left, middle, right in a containing div. The left and right divs are all the way to the left/right side respectively and center div is in center of containing div. The margin is is also depicted in the photo. I would like for the entire containing div and child divs to scale down proportionally and have the child divs always stay positioned in their appropriate location.)
Code
<div class="articles">
<article>
<img src="http://placehold.it/380x214/000000&text=Left" />
</article>
<article>
<img src="http://placehold.it/380x214/3D6AA2&text=Middle" />
</article>
<article>
<img src="http://placehold.it/380x214/98BD56&text=Right" />
</article>
</div>
You can achieve this using text-align:justify to space the div's evenly so they are flush to the edges. Then you add a span class with a width of 100% to force the width of the wrapper.
DEMO -> http://jsfiddle.net/spUKQ/2/
HTML
<div id="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<span class="stretch"></span>
</div>
CSS
#container {
border: 2px dashed #444;
height: 125px;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
/* just for demo */
min-width: 612px;
}
.box1, .box2, .box3 {
width: 150px;
height: 125px;
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1
}
.stretch {
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0
}
/* just for demo */
.box1, .box3 {
background: #ccc
}
.box2 {
background: #0ff
}