I want to position first div to top-left of parent div and second div to bottom-right of parent div . Here is my code !
<div class="parent">
<div class="tl">TopLeft</div>
<div class="br">BottomRight</div>
</div>
Here is my css ,
.parent
{
width: auto;
height:300px;
background: Black;
}
.tl
{
width:100px;
height:40px;
background:Aqua;
}
.br
{
position:absolute;
width:100px;
height:40px;
right:0;
bottom:0;
background:Aqua;
}
By my code , the topLeft div is in the correct position , but the bottom-right div is outside of parent div . Want to know what I need in my code !
Here is Fiddle !
You need to set the parent element's position property to relative. That will make the children position themselves correctly in relation to the parent rather than the document.
.parent {
...
position: relative;
}
Example: http://jsfiddle.net/grc4/dQCpy/1/
.parent
{
width: auto;
height:300px;
background: Black;
position:relative;
}
Parent must have a relative position.
<style>
.parent{
background-color: yellow;width: 500px;
}
.tl{
background-color: yellowgreen;float: left;width: 200px;
}
.br{
background-color: wheat;float: right;width: 100px;
}
.clr{
clear:both;
}
</style>
<div class="parent">
<div class="tl">TopLeft</div>
<div class="clr"></div>
<div class="br">BottomRight</div>
<div class="clr"></div>
</div>
Related
I have an image inside a DIV.
I want to "overhang" the image outside the DIV a little, so I've positioned it absolute and the parent container as relative. When I do that, the parent DIV no longer resizes its height to contain the image.
How can I do this?
the HTML
<div class=".twelve.columns" id="header">
<div id="logoWrapper">
<img src="https://nbson.com/sni/images/logo.png" class="ssImg">
<div class="clr"></div>
</div>
</div>
the CSS
.ssImg{
width:100%;
}
.clr{
clear:both;
}
#header{
margin-top:0;
background:#000;
position:relative;
width:100%;
border:1pt solid pink;
}
JSFiddle
Absolutely positioned elements are completely removed from the document flow, and thus their dimensions cannot alter the dimensions of their parents.
If you really had to achieve this affect while keeping the children as position: absolute, you could do so with JavaScript [...]
To get the effect described without javascript, you could use negative values for bottom or top. I also updated your JSFiddle for your concrete example.
.ssImg{
width:100%;
}
.clr{
clear:both;
}
#header{
margin-top:0;
background:#000;
position:relative;a
width:100%;
border:1pt solid pink;
}
#logoWrapper{
width:15%;
min-width:120px;
margin-left:10px;
position:relative; /* this is new */
bottom: -40px; /* this is new */
}
<div class="twelve columns" id="header">
<div id="logoWrapper">
<img src="https://nbson.com/sni/images/logo.png" class="ssImg">
<div class="clr"></div>
</div>
</div>
How about this?
html, body {
height: 100%;
padding: 20px;
}
.ssImg{
width: 100%;
}
#header{
background-color: #000;
position: relative;
width: 100%;
height: 100%; /* Set the height what you want */
border: 1pt solid pink;
}
#logoWrapper{
width: 15%;
min-width: 120px;
position: absolute;
top: -15px;
left: -25px;
}
<div id="header">
<div id="logoWrapper">
<img src="https://nbson.com/sni/images/logo.png" class="ssImg">
</div>
</div>
First of all:
If you want to put two classes on an element use like <div class="twelve columns">, not like <div class=".twelve.columns">
Secondly, regarding your question:
Absolutely positioned elements are removed from the flow and thus, no longer taken into consideration when it comes to calculating dimensions for the parent element.
You can solve it by explicitly setting the height and width you need on the element.
Is there any way to make the child div below override its parent max-width to stretch to 100% page width? both parent and child are absolute position
<div class="container" style="max-width:500px;position:absolute;">
<div class="content"></div>
<div class="special-content" style="position:absolute;width:100%"></div> <!--override to 100% page width? -->
<div class="content"></div>
<div class="content"></div>
<div>
also the above container is currently positioned inside another image container div set to position:relative
You could do something like this. This would force the width of the special-content container to fill the width of the window, beyond the parent container width.
JSfiddle: http://jsfiddle.net/tm752gr0/4/
HTML:
<div class="container">
<div class="content"></div>
<div class="content special-content"></div>
<div class="content"></div>
<div class="content"></div>
</div>
CSS:
.container {
max-width:500px;
margin:0 auto;
/* position:absolute; */
border:1px solid #000;
}
.special-content {
margin:0 -1000px;
padding:0 1000px;
/* position:absolute; */
width:100%;
border:1px solid #000;
}
.content {
overflow:hidden;
display:block;
border:1px solid #000;
width:100%;
}
* {
height:30px;
}
body {
overflow-x:hidden;
}
Note: I commented out the position:absolute to be able to illustrate how the concept works.
If you can use vw then try this:
Can I use
<div id="parent">
Yay!
<div id="child">ABC123</div>
</div>
#parent {
position: absolute;
max-width: 500px;
border: 1px solid gray;
}
#child {
position: absolute;
width: 100vw;
border: 1px solid yellow;
}
Fiddle for you
Please help me with this
http://jsfiddle.net/5xXwQ/
<div id="parent">
<div id="banner"></div>
<div id="childsparent">
<div id="child">
sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>
sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>
sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>
sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>
sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>
sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>
sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>
sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>sdsdsdsd?<br>
</div>
</div>
</div>
#parent {
background: #CCC;
width:200px;
height:500px;
}
#banner {
width:200px;
height: 50px;
background: #ff0000;
}
#childsparent {
overflow:scroll;
}
I need to make it scrollable but parent div must be of its height for example 500px.
I know it works when there is only parent and child, but when there is multiple div it is overflowing div and scroll doesnt work. How to make this work?
First, I would put overflow:hidden; on #parent, but you will still have a really tall #childsparent. You have to restrict the #childsparent. If you know for certain the parent will be 500px tall and #banner will be 200px, then set:
#childsparent {
[...]
height:300px; /*or*/
max-height:300px;
}
If #childsparent were the only child of #parent then just #childsparent { ... height:100%; }. Otherwise, if you won't know the size of #banner then pull out some Javascript to do the math.
Here is updated jsfiddle with working example http://jsfiddle.net/5xXwQ/1/
#parent {
background: #CCC;
width:200px;
height:500px;
overflow: hidden;
}
#childsparent {
height: 500px;
overflow:scroll;
}
Adding height:450px; to #childsparent will give you the behavior you're looking for.
http://jsfiddle.net/5xXwQ/7/
#parent {
background: #CCC;
width:200px;
height:550px;
}
#banner {
width:200px;
height: 50px;
background: #ff0000;
}
#childsparent {
overflow:scroll;
height:500px;
}
I'm trying to fill remaning area of screen with the second div, div 1 and 2 got fixed width. How could i achive this effect?
HTML
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
Problem can be fixed by using this CSS code, when second div is set to auto it will fill remaning area left to be filled.
#div1 {
float:left;
width:400px;
height:200px;
background-color: gray;
}
#div2 {
float:right;
width:400px;
height:200px;
background-color: green;
}
#div3 {
margin-left: 400px;
margin-right: 400px;
width:auto;
height:200px;
background-color: silver;
}
Edit
Classically, this would look like this:
CSS:
#div1 {
float:left;
width:400px;
height:200px;
background-color: gray;
}
#div2 {
margin-left: 400px;
margin-right: 400px;
width:auto;
height:200px;
background-color: silver;
}
#div3 {
float:right;
width:400px;
height:200px;
background-color: green;
}
HTML:
<div id="div1"></div>
<div id="div3"></div>
<div id="div2"></div>
DEMO: http://jsfiddle.net/NicoO/5AJkn/
P.S: expand your screen > 800px to prevent the layout from breaking. Could also be solved by adding a min-width to a new parent element.
If your browser support calc, you coudl try:
#div2 { float:left; width:calc(100% - 800px); height:200px; }
Add the margins too, if any.
<style>
.box{display: table;width: 100%;}
#div1{width:400px; height:200px;background: #000;display: table-cell}
#div2{width:auto; height:200px;background: #e6e6e6;display: table-cell}
#div3{width:400px; height:200px;background: #000;display: table-cell}
</style>
<div class="box">
<div id="div1"></div>
<div id="div2">ds</div>
<div id="div3"></div>
</div>
It is the same questions that :
Positioning two divs, one with fixed width(left div) and other in percentage(right div)
Two divs side by side, one with google map and second with fixed width
This Codepen fix your problem
Apply position: relative for their parent (if it is not positioned already) and
apply the following to div2:
#div2{
position:absolute;
left:400px; /* width of div1 */
right:400px; /* width of div3 */
height:200px;
}
JSFiddle
You can use css3 calc() function if older browser support is not an issue.
#div2{
display:inline-block;
width: calc(100% - 800px); /*100% - width of div1 and div3 */
height:200px;
}
JSFiddle
We have two DIVs, one embedded in the other. If the outer DIV is not positioned absolute then the inner DIV, which is positioned absolute, does not obey the overflow hidden of the outer DIV.
#first {
width: 200px;
height: 200px;
background-color: green;
overflow: hidden;
}
#second {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
left: 250px;
top: 250px;
}
<div id="first">
<div id="second"></div>
<div id="third"></div>
</div>
Is there any chance to make the inner DIV obey the overflow hidden of the outer DIV without setting the outer DIV to position absolute (cause that will muck up our complete layout)?
Also position relative for our inner DIV isn't an option as we need to "grow out" of a table TD.
#first {
width: 200px;
height: 200px;
background-color: green;
}
#second {
width: 50px;
height: 400px;
background-color: red;
position: relative;
left: 0px;
top: 0px;
}
<table id="first">
<tr>
<td>
<div id="second"></div>
</td>
</tr>
</table>
Are there any other options?
Make outer <div> to position: relative and inner <div> to position: absolute. It should work for you.
What about position: relative for the outer div? In the example that hides the inner one. It also won't move it in its layout since you don't specify a top or left.
An absolutely positioned element is actually positioned regarding a relative parent, or the nearest found relative parent. So the element with overflow: hidden should be between relative and absolute positioned elements:
<div class="relative-parent">
<div class="hiding-parent">
<div class="child"></div>
</div>
</div>
.relative-parent {
position:relative;
}
.hiding-parent {
overflow:hidden;
}
.child {
position:absolute;
}
Make sure.
parent position relative.
parent have manually assigned width and height(important as child element having absolute position).
child position absolute;
.outer{
position:relative;
width:200px;
height:100px;
overflow:hidden;
}
.inner{
position:absolute;
width:100px;
height:100px;
font-size:3rem;
}
<div class="outer">
<div class=inner>
Inner DIV to apply overflw hidden
</div>
</div>
}
You just make divs like this:
<div style="width:100px; height: 100px; border:1px solid; overflow:hidden; ">
<br/>
<div style="position:inherit; width: 200px; height:200px; background:yellow;">
<br/>
<div style="position:absolute; width: 500px; height:50px; background:Pink; z-index: 99;">
<br/>
</div>
</div>
</div>
I hope this code will help you :)