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
Related
I have a div with min-height=100; with a div inside it.
Now I want to use height=80%; for inner div but it doesn't work.
Please check the html and css section:
html,body{
width:100%;
height:100%;
}
.outer{
width:100%;
min-height:100%;
background-color:gray;
border:5px solid red;
}
.inner{
height:80%;
background-color:red;
}
<div class="outer">
</div>
<div class="outer">
<div class="inner">
</div>
</div>
It works when I use height instead of min-height for outer div but I can't use height because the height of the content of inner div is not fixed.
For fiddlers:
jsfiddle (updated with 3d outer div that have more than 100% height):
https://jsfiddle.net/mr_seven/d9ubjpe4/9/
Thanks
Just use height: 80%. After all, you're setting the min-height to 100%, which is also the max-height. So, it seems slightly pointless. Also, you need to give your div a width.
This should work for you:
HTML:
body, html {
height: 100%;
}
.outer {
background-color: gray;
height: 100%;
}
.inner {
background-color: red;
height: 80%;
}
CSS:
<div class="outer">
outer
<div class="inner">
inner
</div>
</div>
Isn't it better to play with padding-bottom instead of struggling with min-height?
html,body{
width:100%;
height:100%;
}
.outer{
width:100%;
height: 100%;
min-height:80%;
background-color:yellow;
border:5px solid red;
}
.inner{
height:80%;
background-color:blue;
}
<div class="outer">
</div>
<div class="outer">
<div class="inner">
</div>
</div>
Are you looking for this..Fiddler
<div class="outer">
</div>
<div class="outer">
<div class="inner">
</div>
</div>
css
html,body{
width:100%;
height:100%;
}
.outer{
width:100%;
height:100%;
min-height:100%;
background-color:gray;
border:5px solid red;
display: table;
}
.inner{
height:80%;
background-color:red;
}
The problem has been solved with some jQuery codes.
$(".inner").parent().addClass('fixedheight');
CSS:
fixedheight{
height:100%;
}
Now all of my outer div's will have min-height=100%; and if one of them (or more than one) have inner div, the outer div will have fixed height.
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.
<div class="row">
<div class="column fixed"></div>
<div class="column flexible"></div>
<div class="column fixed"></div>
</div>
Where .column.fixed are both of a fixed width and column.flex is the full width between those.
The only way I know is using positioning, but I'm wondering if it can be done using display: table-cell.
Codepen: http://codepen.io/bernk/pen/leCxm
Clean and responsive. Pure CSS. No messing with display property.
<div id="layout">
<div class='left'></div>
<div class='right'></div>
<div class='center'></div>
</div>
<style>
.left {
width: 20%;
float:left;
background: red;
}
.right {
width: 20%;
float:right;
background:blue;
}
.center {
margin:0 auto;
width: 60%;
background:green;
}
</style>
Fiddle: http://jsfiddle.net/N75Rn/
As you note, you could use display:table
option 1: display:table
Demo Fiddle
HTML
<div class='table'>
<div class='cell'>fit content</div>
<div class='cell'>expand content</div>
<div class='cell'>fit content</div>
</div>
CSS
.table {
display:table;
width:100%;
}
.cell {
display:table-cell;
width:1%;
border:1px solid black;
height:10px;
}
.cell:nth-child(2) {
width:100%;
}
option 2: floats
....or, you can use floats
Demo Fiddle
HTML
<div></div>
<div></div>
<div></div>
CSS
div {
border:1px solid black;
height:10px;
}
div:nth-child(1) {
float:left;
width:40px;
}
div:nth-child(2) {
float:right;
width:40px;
}
div:nth-child(3) {
overflow:hidden;
}
I like to do this kind of layout with position: absolute on the fixed-width elements and a padding value on their parent equal to their width.
It has an advantage in RWD/SEO since the order of the columns doesn't matter. Also, the contents of the flexible element won't leak out below the fixed-width elements when the flexible element is higher than them, which may or may not be desirable depending on your design.
The disadvantage to this is that the fixed-width elements are taken out of the content flow, meaning you may have to, somehow, compensate for their height if they're higher than the flexible element and if that breaks the layout.
Example:
HTML:
<div class="row">
<div class="column fixed fixed-left"></div>
<div class="column flexible"></div>
<div class="column fixed fixed-right"></div>
</div>
CSS:
.row { padding: 0 150px; }
.fixed {
position: absolute;
top: 0;
width: 150px;
}
.fixed-left { left: 0; }
.fixed-right { right: 0; }
Here's a pen with this.
I am trying to make an html page with 2 divs : "top" and "main"
The top <div> must take the place of its contained elements, the main <div> must take all the remaining place.
Here is what I tried:
CSS CODE :
html,body{
height:100%;
}
#top{
background-color : red;
padding:10px;
border:1px solid;
}
#main{
background-color : blue;
height:100%;
padding:10px;
border:1px solid;
}
#content1{
background-color:yellow;
}
#content2{
background-color:yellow;
height :100%;
}
HTML CODE:
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="top">
<div id="content1">content1</div>
</div>
<div id="main">
<div id="content2">content2</div>
</div>
</body>
</html>
Here is the jsFiddle
As you can see, the "100%" I set on "content2" causes this div to take 100% of the page height instead of just the remaining space. Is there a magic css property to fix this?
EDIT:
Thank you for all your solutions.
I finally chose the solution proposed by Riccardo Pasianotto based on CSS properties display:table and display:table-row.
Here is my final HTML CODE:
<!DOCTYPE html>
<body>
<div id="content1" class="row">
<div class="subcontent">
<div class="subContentContainer">
content1
</div>
</div>
</div>
<div id="content2" class="row">
<div class="subcontent">
<div class="subContentContainer">
content2
</div>
</div>
</div>
</body>
Here is the corresponding CSS CODE:
html,body{
padding:0;
margin:0;
height:100%;
width:100%;
}
body{
display:table;
}
.row{
display:table-row;
width:100%;
}
#top{
height:100px;
}
#content1{
background:#aa5555;
padding:10px;
}
#content2{
background:#5555AA;
height:100%;
}
.subcontent{
padding : 10px;
height:100%;
}
.subContentContainer{
background-color:yellow;
height:100%;
}
And here is the corresponding Jsfiddle.
DEMOJF
For doing this you have to use display:table so edit in that way
html,
body {
height: 100%;
width: 100%;
}
body {
display: table;
}
.row {
display: table-row;
width: 100%;
background: red;
}
#top {
height: 100px;
}
#content1 {
background: yellow;
height: 100%;
}
#content2 {
overflow: scroll;
height: 100%;
border: 1px solid black;
}
<body>
<div id="top" class="row">
<div id="content1">content1</div>
</div>
<div id="main" class="row">
<div id="content2">content2</div>
</div>
</body>
What I often do is making a container without padding to min-height: 100% and let my content have its proper height (auto) :
This will make something like this :
#container {
background-color : #5555AA;
min-height: 100%;
}
#content2 {
background-color:yellow;
margin: 10px;
}
http://jsfiddle.net/5cEdq/25/
I don't know if this is exactly what you want, but you can't make a div just "fill the remaning space" without making it absolute. What you don't really want either.
try this:
http://jsfiddle.net/5cEdq/16/
CSS :
html,body{
height:100%;
Padding:0;
margin:0;
border:0;}
Since both Divs are using 100% height set on the html and body tag you only need to set it there then zero your margin and padding. Generally if you have to set a div and its parent div both to 100% height you're overdoing it.
Is there a magic css property to fix this?
Yes there is. It's called box-sizing
Read this article for more info about the box-sizing property.
FIDDLE
So if your header was say 64px high, then you'd do something like this:
.container {
height: 100%;
background: pink;
margin-top: -64px;
padding-top: 64px;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
<header>header</header>
<div class="container">
<div class="content">
content here
</div>
</div>
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>