How to overlay a div without messing with other div - css

I have a container div like this:-
<div class="container">
<div class="parent"></div>
<div class="child"></div>
</div>
I want to overlay the child div like this
But without touching the parent div css. How can I achieve this. I'll appreciate any kind of suggestions.

It is not clear from what you want to achieve but can try some of the below stuf :
You can achieve that by using top/bottom/left/right property and position: relative to the .child according to need.
You can achieve by using extra container and add display: flex;width:100% and using justify-content properties according to need .
float: left/right can also be used according to need(but you will not able to position other than left, right and use margin)
Simply by top/bottom/left/right margin can achieve the position .
* {
box-sizing: border-box;
}
.container {
position: relative;
width: 400px;
height: 300px;
border: 3px solid #73AD21;
}
.parent {
width: 200px;
height: 80px;
margin: 10px;
border: 3px solid #73AD21;
}
.child {
position: relative;
left: 180px;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
<div class="container">
<div class="parent"></div>
<div class="child"></div>
</div>

Related

How can I get a parent element to take the dimensions of its children?

This is an on-going concern of mine. I tried the normal fix of
display: inline-block
but it did not work. Here is the code. The containing div is called container-1 and the div I want it to contain along with dimensions is called mi_holder:
#container-1 {
border: 1px solid red;
}
#mi_holder {
display: inline-block;
position: relative;
top: 100px;
}
<div id="container-1">
I am inside
<div id='mi_holder'>
But I am outside :(
</div>
</div>
Change your top: 100px; to margin-top: 100px;
Does this give the result you want:
#container-1 {
border: 1px solid red;
}
#mi_holder {
margin-top: 100px;
}
<div id="container-1">
I am inside
<div id='mi_holder'>
And I am no longer outside :)
</div>
</div>

Expanding or collapsing parent div after positioning child divs

I'm trying to position clid divs in parent div but the height of parent div should be dynamic so it should either expand or shrink after child divs are positioned inside. How can I accomplish it? Childs should remain inside of parent all times.
Since I'm not designer at all I read "Learn CSS Positioning in Ten Steps" to learn a bit.
And this question "Make absolute positioned div expand parent div height".
Thanks
JSFIDDLE
CSS
#header
{
margin: 0 auto;
border: 1px solid #000000;
width: 500px;
background: #aa0000;
}
#body
{
margin: 0 auto;
border: 1px solid #000000;
width: 500px;
background: #ff0000;
}
#footer
{
margin: 0 auto;
border: 1px solid #000000;
width: 500px;
background: #dd0000;
}
#section_one
{
position: relative;
width: 100px;
height: 100px;
background: #EEEEEE;
top: 10px;
left: 10px;
}
#section_two
{
position: relative;
width: 100px;
height: 100px;
background: #EEEEEE;
top: 10px;
left: 150px;
}
HTML
<div id="header">HEARDER</div>
<div id="body">
<div id="section_one">SECTION ONE</div>
<div id="section_two">SECTION TWO</div>
</div>
<div id="footer">FOOTER</div>
You could use float:left and then postion the sections with margin
FIDDLE
Markup
<div id="header">HEARDER</div>
<div id="body">
<div class="section one">SECTION ONE</div>
<div class="section two">SECTION TWO</div>
<div class="section three">SECTION THREE</div>
<div class="section four">SECTION FOUR</div>
</div>
<div id="footer">FOOTER</div>
CSS
.section
{
width: 100px;
height: 100px;
background: #EEEEEE;
float:left;
}
.two
{
margin: 20px 0 0 10px;
}
.three
{
margin: 80px 0 0 50px;
}
.four
{
margin: 220px 0 0 -200px;
}
if it's just a matter of aligning those boxes, use margin&padding and inline-block instead of absolute positioning.
like this: http://jsfiddle.net/avrahamcool/JVh8e/1/
HTML:
<div id="cover">
<div id="section_one">SECTION ONE</div>
<div id="section_two">SECTION TWO</div>
</div>
CSS
#cover
{
margin: 0 auto;
padding: 5px;
width: 500px;
background-color: #000000;
}
#section_one, #section_two
{
display: inline-block;
width: 100px;
height: 100px;
margin: 5px;
background-color: #EEEEEE;
}
as you already read in the link you provided, an absolute element is removed from the flow, so unless you're willing to write a script that finds the necessary height of the cover, its impossible.
also: use background-color instead of background (if you apply only the color)
Update
this is the new fiddle (after your editing):
http://jsfiddle.net/avrahamcool/JVh8e/5/
Update 2:
check out this working example with script.
http://jsfiddle.net/avrahamcool/JVh8e/6/

converting frameset into css

I'm trying to build a CSS page layout based on this old frameset:
<frameset cols="30%,70%">
<frame>left</frame>
<frameset rows="80%,20%">
<frame>top</frame>
<frame>bottom</frame>
</frameset>
</frameset>
What was easy 15 years ago seems to get a bit more complicated nowadays. I wrote the following HTML:
<div id="container">
<div id="left">left</div>
<div id="right">
<div id="top">top</div>
<div id="bottom">bottom</div>
</div>
</div>
Together with this CSS:
#container {
border: 1px solid black;
height: 300px;
}
#left {
border: 1px solid red;
float: left;
width: 30%;
height: 100%;
overflow-y: scroll;
}
#right {
border: 1px solid blue;
margin-left: 30%;
height: 100%;
}
#top {
border: 1px solid red;
height: 80%;
overflow-y: scroll;
}
#bottom {
border: 1px solid red;
height: 20%;
}
I put a demo here.
What I want to achieve and failed so far is the following: Height of #bottom shall be a certain pixel height, not percents. When I do this, I mess up with #top. I tried to use absolute positions to stick #bottom at the bottom but then I don't know how to let #top use the rest of the height.
Any ideas would be appreciated. Thank you.
I think this (fiddle) what you are looking for.
#top {
border: 1px solid red;
height: 80%;
overflow-y: scroll;
}
#bottom {
bottom:0;
border: 1px solid red;
height: 20%;
}
The divs will look like they don't precisely fit but it's only because of the borders. If you want the borders then you can use the css box-sizing property and set it to border-box. See this page for reference. Basically it makes the size of an element include the border which it doesn't by default.

How to fill 100% of remaining width

Is there any work around to do something like this work as expected?
I wish there were something like that width:remainder; or width:100% - 32px;.
width: auto; doesn't works.
I think the only way possible is working around with paddings/margins, negative values, or float, or some html tags hack. I tried also display:block;.
I like to get the same result as this, without tables http://jsfiddle.net/LJGWY/
<div style="position: absolute; width: 100%; height: 100px; border: 3 solid red;" id="container">
<div style="display:inline; width: (100%-100px); border: 3 solid green;">Fill</div>
<div style="display:inline; width: 100px; border: 3 solid blue;">Fixed</div>
</div>
Updated answer:
The answers here are pretty old. Today, this can be achieved easily with flexbox:
.container {
border: 4px solid red;
display: flex;
}
.content {
border: 4px solid green;
flex-grow: 1;
margin: 5px;
}
.sidebar {
border: 4px solid blue;
margin: 5px 5px 5px 0;
width: 200px;
}
<div class="container">
<div class="content">
Lorem ipsum dolor sit amet.
</div>
<div class="sidebar">
Lorem ipsum.
</div>
</div>
Original answer:
Block level elements like <div> will fill 100% of the available width automatically. If you float one of them to the right, the contents of the other will fill the remaining space.
<div style="height: 100px; border: 3px solid red;" id="container">
<div style="float: right; width: 100px; border: 3px solid blue;">Fixed</div>
<div style="border: 3px solid green;">Fill</div>
</div>
http://jsfiddle.net/5AtsF/
For anyone looking over this now theres a newish css property method called calc which can perform this in a much more flexible fashion.
<div class="container">
<div class="fixedWidth"></div>
<div class="variableWidth"></div>
</div>
.fixedWidth{
width:200px;
}
.variableWidth{
width:calc(100%-200px);
}
As a word of warning, this is not very portable and support is ropey on mobile devices. IOS 6+ and andriod 4.4 i believe. Support is significantly better for desktop though, IE 9.0+.
http://caniuse.com/calc
I have used a JS hack in the past to achieve this technique if anyone is incredibly stuck, a different layout is more advisable though as resize is slower.
window.addEventListener('resize', function resize(){
var parent = document.getElementById('parent');
var child = document.getElementById('child');
child.style.width = parseInt(parent.offsetWidth - 200) + "px"; //200 being the size of the fixed size element
}, false);
If you don't know how big will be the fixed part you can use the flex 9999 hack.
<div class="container">
<div class="fixedWidth"></div>
<div class="variableWidth"></div>
</div>
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.fixedWidth {
flex: 1;
}
.variableWidth {
flex: 9999;
}
This should do for you:
<div style="position: absolute; width: 100%; height: 100px; border: 3px solid red;" id="container">
<div style="float: right; width: 100px; border: 3px solid blue;">Fixed</div>
<div style="display: block; margin-right: 100px; border: 3px solid green;">Fill</div>
</div>
See the jsFiddle
This is assuming you're going to be removing the 3px borders from the end result (they overlap in the example because border width is not included in the width).
You can acheive this without change your markup with use display:table property for this:
.parent{
position: absolute;
left:0;
right:0;
height: 100px;
border: 3px solid red;
display:table;
}
.fill{
margin-right: 100px;
border: 3px solid green;
display:table-cell;
width:100%;
}
.fixed{
width: 100px;
border: 3px solid blue;
display:table-cell;
}
Check the live example with no horizontal scrollbar
http://jsfiddle.net/WVDNe/5/
Another example but in better way check this:
http://jsfiddle.net/WVDNe/6/
note: it not work in IE7 & below
Check this also
http://jsfiddle.net/LJGWY/4/
It's work in all browsers.
Try setting the position like so:
<div style="position: absolute; width: 100%; height: 100px; border: 3 solid red;" id="container">
<div style="position:absolute; left: 0; top: 0; right: 100px; border: 3 solid green;">Fill</div>
<div style="position:absolute; top: 0; right: 0; width: 100px; border: 3 solid blue;">Fixed</div>
</div>
You could put the fixed div inside the the fill div.
<div id="container">
<div>Fill
<div>Fixed</div>
</div>
</div>
CSS
#container{
position:absolute;
width:90%;
height:100px;
border:3px solid red;
}
#container div{
height:95%;
border:3px solid green;
width:100%;
}
#container div div{
height:95%;
width:100px;
border:3px solid blue;
float:right;
}
Example: http://jsfiddle.net/EM8gj/3/
you can use table style.
create a div with table style and sub items be that's table-cell styles
label text
Try CSS calc() function.
width: calc(100% - 100px);
That's it

How can I send an inner <div> to the bottom of its parent <div>?

The div inside another div picture and code below. Because there will be text and images of the parent div. And red div will be the last element of the parent div.
<div style="width: 200px; height: 150px; border: 1px solid black;">
<div style="width: 100%; height: 50px; border: 1px solid red;">
</div>
</div>
This is one way
<div style="position: relative;
width: 200px;
height: 150px;
border: 1px solid black;">
<div style="position: absolute;
bottom: 0;
width: 100%;
height: 50px;
border: 1px solid red;">
</div>
</div>
But because the inner div is positioned absolutely, you'll always have to worry about other content in the outer div overlapping it (and you'll always have to set fixed heights).
If you can do it, it's better to make that inner div the last DOM object in your outer div and have it set to "clear: both".
A flexbox way.
.parent {
display: flex;
flex-direction: column;
justify-content: space-between;
}
/* not necessary, just to visualize it */
.parent {
height: 500px;
border: 1px solid black;
}
.parent div {
border: 1px solid red;
}
<div class="parent">
<div>Images, text, buttons oh my!</div>
<div>Bottom</div>
</div>
Edit:
Source - Flexbox Guide
Browser support for flexbox - Caniuse
Make the outer div position="relative" and the inner div position="absolute" and set it's bottom="0".
Here is another pure CSS trick, which doesn't affect an elements flow.
#parent {
min-height: 100vh; /* set height as you need */
display: flex;
flex-direction: column;
background: grey;
}
.child {
margin-top: auto;
background: green;
}
<div id="parent">
<h1>Positioning with margin</h1>
<div class="child">
Content to the bottom
</div>
</div>
You may not want absolute positioning because it breaks the reflow: in some circumstances, a better solution is to make the grandparent element display:table; and the parent element display:table-cell;vertical-align:bottom;. After doing this, you should be able to give the the child elements display:inline-block; and they will automagically flow towards the bottom of the parent.
Note : This is by no means the best possible way to do it!
Situation :
I had to do the same thign only i was not able to add any extra divs, therefore i was stuck with what i had and rather than removing innerHTML and creating another via javascript almost like 2 renders i needed to have the content at the bottom (animated bar).
Solution:
Given how tired I was at the time its seems normal to even think of such a method however I knew i had a parent DOM element which the bar's height was starting from.
Rather than messing with the javascript any further i used a (NOT ALWAYS GOOD IDEA) CSS answer! :)
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
-ms-transform:rotate(180deg);
Yes thats correct, instead of positioning the DOM, i turned its parent upside down in css.
For my scenario it will work! Possibly for others too ! No Flame! :)
Here is way to avoid absolute divs and tables if you know parent's height:
<div class="parent">
<div class="child"> Home
</div>
</div>
CSS:
.parent {
line-height:80px;
border: 1px solid black;
}
.child {
line-height:normal;
display: inline-block;
vertical-align:bottom;
border: 1px solid red;
}
JsFiddle:
Example
You may not want absolute positioning because it breaks the reflow: in some circumstances, a better solution is to make the grandparent element display:table; and the parent element display:table-cell;vertical-align:bottom;. After doing this, you should be able to give the the child elements display:inline-block; and they will automagically flow towards the bottom of the parent.
<div style="position: relative;
width: 200px;
height: 150px;
border: 1px solid black;">
<div style="position: absolute;
bottom: 0;
width: 100%;
height: 50px;
border: 1px solid red;">
</div>
</div>
<div style="width: 200px; height: 150px; border: 1px solid black;position:relative">
<div style="width: 100%; height: 50px; border: 1px solid red;position:absolute;bottom:0">
</div>
</div>

Resources