As described by the image there are two elements: A parent (dark gray) and child (not so dark gray). The width and height of the parent is fluid. The ratio of the child i 1:1 or y:y where y is equal to the height of the parent.
I've tried to find ways to solve this using flex, calc, padding etc but have reached the end of the road. Any ideas how to solve this with pure CSS are much appreciated.
EDIT: I realize now I should have added more details regarding the usage of this scenario. As well as what I consider to be a dynamic height. Dynamic height for me suggests that the height is decided by the amount of content it contains. So I added some HTML to clarify. The .content div may be unnecessary if you can put the content directly in the .container div. But that depends on how you write the CSS:
<div class="container">
<div class="content">
Here is some text. It can be long and it can be short.
It will affect the height of the .container thus also
the height and width of the .square.
</div>
<div class="square">1:1</div>
</div>
I think it is not possible to do what you try!You can't get parents height without JS. But maybe there is another solution. Does your parent container also has a fixed proportion?
This question was quite old. But today I found a quite-tricky solution that may help. That is, I utilize the property of image (svg here) that preserve the aspect ratio while scaling. So I insert an empty svg and make its height fit the parent. Then we have its width equals to its height. (You can change the 1 1 in the part <svg viewBox="0 0 1 1" > to change the ratio).
See the example below. Sorry for my bad English.
.outer {
display: flex;
/* This is just for the example */
width: 700px; /* x */
height: 100px; /* y */
font-size: 18px;
font-family: Verdana, Geneva, sans-serif;
}
.left {
flex-grow: 1
/* This is just for the example */
color: #cddfc9;
background-color: #636363;
padding: 10px;
height: 100%;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
.child {
height: 100%;
position: relative;
display: inline-flex;
}
/* This is the trick */
.child svg {
height: 100%;
width: 100%;
}
.child > .content {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
/* This is just for the example */
color: white;
background-color: #8a8a8a;
display: flex;
align-items: center;
justify-content: center;
}
<div class="outer">
<div class="left">
Text of various length be here...
</div>
<div class="child">
<svg viewBox="0 0 1 1" ></svg>
<div class="content">
yxy
</div>
</div>
</div>
you can use the vh property for this. Set the height of your parent div in vh and then use the same vh value for the width of your child div and set the height of the child div to 100%.
#parent{
position: absolute;
left: 0;
top:0;
width: 400px;
height: 50vh;
background-color: red;
}
#child{
position: relative;
float: right;
height: 100%;
width: 50vh;
background-color: blue;
}
<div id="parent">
<div id="child"></div>
</div>
I set a width & height to the parent images div. There are two child divs inside of it called image_one and image_two with a set width. The problem is that when I reduce the width of the viewport, the image_two div escapes the parent div and comes under the image_one div. How do I keep this div from escaping? I figured that setting a percentage width would automatically resize the div to stay inside of the parent div. When I set an overflow:hidden, both of the divs disappear.
Here is a link to the code:
http://codepen.io/matosmtz/pen/ZGpNmy
<div class="images">
<div class="image_one">
<p style="background-color:red; text-align:center">Photo</p>
</div>
<div class="image_two">
<p style="background-color:red; text-align:center">Photo</p>
</div>
</div>
.images {
padding: 0;
margin: 0;
width: 100%;
height: 220px;
}
.image_one {
width: 30%;
height: 200px;
position: relative;
background-color: black;
padding: 5px;
float: left;
margin: 5px;
}
.image_two {
width: 30%;
height: 200px;
position: relative;
background-color: black;
padding: 5px;
float: left;
margin: 5px;
}
The .images div is 100% width. This includes the sidebar on your codepen.
The child divs are 30%, but this means 30% of the whole space. So when you reduce the size of the browser, eventually they are big enough to need to slide under one another, because your .sidebar has a fixed width of 200px.
I would suggest having a look at how the Bootstrap CSS works in order to find your fix for this, or straight out using that.
I feel this question has been answered but I searched and searched and no answer seems to deal with dynamic main content width.
I simply want this scenario:
|-|nav|-|main content|-|
Where nav is a DIV and main content is a DIV and both are placed inside another DIV container which has a width of 100%. - is simpy a spacing between the DIVs, a margin.
nav has a fixed width of 300px and "main content" div should always take the rest of the space available (to fill the 100% of the parent div) - without the use of JavaScript.
Also I want to have some margins left and right of each DIV (nav, main content) so that they have some space between them and the "browser border"/body.
I experimented with table, table-cell but the border-collapsing drove me nuts so I am heading back to god old "float: left" and clearfix. This is what I have so far:
<div id="container" class="cf">
<div id="nav">
Nav stuff
</div>
<div id="main">
Main stuff
</div>
</div>
#container {
padding: 0;
width: 100%;
background-color: orange;
min-height: 50px;
}
#nav {
display: inline;
float: left;
min-width: 300px;
width: 300px;
margin-left: 10px;
margin-right: 10px;
}
#main {
display: inline;
float: left;
background-color: green;
margin-right: 10px;
}
.. /* clearfix stuff omitted (class 'cf') */
So now the problem is, how to make "main content" (#main) fill the rest of the parent (#container). If I use a width of 100% the 100% is of course the full width of the parent and the div will go under the "nav" div. If i use "auto" the same thing happens. It of course works if I pass in a fixed width e.g. in pixels but I don't know the correct pixels in advance and using JS to calculate that seems a bit odd to me.
I've seen a solution where the "nav" was put inside "main" but that leads to problems with the margins. Try to insert a margin to create some space beside a div that is inside another div... I don't think that's anyhow possible in this universe.
Thanks for your help!
Maybe you should create BFC to face this problem.
For example:
#container{
border: 1px solid red;
}
#nav{
float: left;
width: 300px;
border: 1px solid green;
height: 200px;
margin-left: 20px;
margin-right: 20px;
}
#main{
overflow: hidden;
height: 400px;
border: 1px solid blue;
margin-right: 20px;
}
overflow: hidden; is the key to create BFC for #main.
JSFiddle : http://jsfiddle.net/yujiangshui/yMFB6/
More about BFC : https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
For example:
#container {
width: 100%
position: relative;
}
#nav {
position: absolute;
top: 0;
left: 0;
width: 300px;
}
#main {
margin-left: 320px;
}
JSFIDDLE
So basically what I want to do is have a div or two on a page that is larger than its parent div. Normally I would restructure the whole website however that would be a large task.
The reason I don't want them to be position absolute is that the container heights will then be screwed up and it will cause the position absolutes to overlap some divs.
The reason for the two divs being larger than their parent divs is they must be the width of the browser when the container divs can be no larger than 1200px.
Yes!
Not only that, we can do one better by using vw and calc.
Simply set the width of the child elements to be 100% of the viewport width by using vw (percentage viewport units), and then set their left margin to a negative calculated value based on this, minus the width of the wrapper. Other than the optional max-width of the parent, everything else is calculated automatically. You can dynamically change the width of the parent container, and the children will automatically resize and align as needed, without being positioned.
body,
html,
.parent {
height: 100%;
width: 100%;
text-align: center;
padding: 0;
margin: 0;
}
.parent {
width: 50%;
max-width: 800px;
background: grey;
margin: 0 auto;
position: relative;
}
.child {
width: 100vw;/* <-- children as wide as the browser window (viewport) */
margin-left: calc(-1 * ((100vw - 100%) / 2));/* align left edge to the left edge of the viewport */
/* The above is basically saying to set the left margin to minus the width of the viewport MINUS the width of the parent, divided by two, so the left edge of the viewport */
height: 50px;
background: yellow;
}
<div class='parent'>
parent element
<div class='child'>child element</div>
</div>
You can also use margins to achieve this: http://jsfiddle.net/MEc7p/1/
div{
outline: 2px solid red;
}
#outer{
width: 200px;
height: 400px;
}
#inner{
width: 600px;
height: 200px;
margin: 0 -20px;
outline: 1px solid green;
}
Try this fiddle
http://jsfiddle.net/stanze/g2SLk/
.wrapper {
width: 400px;
border: 1px solid #f00;
min-height: 153px;
}
.wrapper-child-1 {
float: left;
border: 1px solid #ccc;
width: 195%;
min-height: 262px;
}
<div class="wrapper">
<div class="wrapper-child-1"> </div>
</div>
How can I achieve the following structure without using tables or JavaScript? The white borders represent edges of divs and aren't relevant to the question.
The size of the area in the middle is going to vary, but it will have exact pixel values and the whole structure should scale according to those values. To simplify it, I'd need a way to set "100% - n px" width to the top-middle and bottom-middle divs.
I'd appreciate a clean cross-browser solution, but in case it's not possible, CSS hacks will do.
Here's a bonus. Another structure I've been struggling with and end up using tables or JavaScript. It's slightly different, but introduces new problems. I've been mainly using it in jQuery-based windowing system, but I'd like to keep the layout out of the script and only control the size of one element (the middle one).
New way I've just stumbled upon: css calc():
.calculated-width {
width: -webkit-calc(100% - 100px);
width: -moz-calc(100% - 100px);
width: calc(100% - 100px);
}
Source: css width 100% minus 100px
You can use nested elements and padding to get a left and right edge on the toolbar. The default width of a div element is auto, which means that it uses the available width. You can then add padding to the element and it still keeps within the available width.
Here is an example that you can use for putting images as left and right rounded corners, and a center image that repeats between them.
The HTML:
<div class="Header">
<div>
<div>This is the dynamic center area</div>
</div>
</div>
The CSS:
.Header {
background: url(left.gif) no-repeat;
padding-left: 30px;
}
.Header div {
background: url(right.gif) top right no-repeat;
padding-right: 30px;
}
.Header div div {
background: url(center.gif) repeat-x;
padding: 0;
height: 30px;
}
While Guffa's answer works in many situations, in some cases you may not want the left and/or right pieces of padding to be the parent of the center div. In these cases, you can use a block formatting context on the center and float the padding divs left and right. Here's the code
The HTML:
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
The CSS:
.container {
width: 100px;
height: 20px;
}
.left, .right {
width: 20px;
height: 100%;
float: left;
background: black;
}
.right {
float: right;
}
.center {
overflow: auto;
height: 100%;
background: blue;
}
I feel that this element hierarchy is more natural when compared to nested nested divs, and better represents what's on the page. Because of this, borders, padding, and margin can be applied normally to all elements (ie: this 'naturality' goes beyond style and has ramifications).
Note that this only works on divs and other elements that share its 'fill 100% of the width by default' property. Inputs, tables, and possibly others will require you to wrap them in a container div and add a little more css to restore this quality. If you're unlucky enough to be in that situation, contact me and I'll dig up the css.
jsfiddle here: jsfiddle.net/RgdeQ
Enjoy!
You can make use of Flexbox layout. You need to set flex: 1 on the element that needs to have dynamic width or height for flex-direction: row and column respectively.
Dynamic width:
HTML
<div class="container">
<div class="fixed-width">
1
</div>
<div class="flexible-width">
2
</div>
<div class="fixed-width">
3
</div>
</div>
CSS
.container {
display: flex;
}
.fixed-width {
width: 200px; /* Fixed width or flex-basis: 200px */
}
.flexible-width {
flex: 1; /* Stretch to occupy remaining width i.e. flex-grow: 1 and flex-shrink: 1*/
}
Output:
.container {
display: flex;
width: 100%;
color: #fff;
font-family: Roboto;
}
.fixed-width {
background: #9BCB3C;
width: 200px; /* Fixed width */
text-align: center;
}
.flexible-width {
background: #88BEF5;
flex: 1; /* Stretch to occupy remaining width */
text-align: center;
}
<div class="container">
<div class="fixed-width">
1
</div>
<div class="flexible-width">
2
</div>
<div class="fixed-width">
3
</div>
</div>
Dynamic height:
HTML
<div class="container">
<div class="fixed-height">
1
</div>
<div class="flexible-height">
2
</div>
<div class="fixed-height">
3
</div>
</div>
CSS
.container {
display: flex;
}
.fixed-height {
height: 200px; /* Fixed height or flex-basis: 200px */
}
.flexible-height {
flex: 1; /* Stretch to occupy remaining height i.e. flex-grow: 1 and flex-shrink: 1*/
}
Output:
.container {
display: flex;
flex-direction: column;
height: 100vh;
color: #fff;
font-family: Roboto;
}
.fixed-height {
background: #9BCB3C;
height: 50px; /* Fixed height or flex-basis: 100px */
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}
.flexible-height {
background: #88BEF5;
flex: 1; /* Stretch to occupy remaining width */
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}
<div class="container">
<div class="fixed-height">
1
</div>
<div class="flexible-height">
2
</div>
<div class="fixed-height">
3
</div>
</div>
The usual way to do it is as outlined by Guffa, nested elements. It's a bit sad having to add extra markup to get the hooks you need for this, but in practice a wrapper div here or there isn't going to hurt anyone.
If you must do it without extra elements (eg. when you don't have control of the page markup), you can use box-sizing, which has pretty decent but not complete or simple browser support. Likely more fun than having to rely on scripting though.
Maybe I'm being dumb, but isn't table the obvious solution here?
<div class="parent">
<div class="fixed">
<div class="stretchToFit">
</div>
.parent{ display: table; width 100%; }
.fixed { display: table-cell; width: 150px; }
.stretchToFit{ display: table-cell; vertical-align: top}
Another way that I've figured out in chrome is even simpler, but man is it a hack!
.fixed{
float: left
}
.stretchToFit{
display: table-cell;
width: 1%;
}
This alone should fill the rest of the line horizontally, as table-cells do. However, you get some strange issues with it going over 100% of its parent, setting the width to a percent value fixes it though.
We can achieve this using flex-box very easily.
If we have three elements like Header, MiddleContainer and Footer. And we want to give some fixed height to Header and Footer. then we can write like this:
For React/RN(defaults are 'display' as flex and 'flexDirection' as column), in web css we'll have to specify the body container or container containing these as display: 'flex', flex-direction: 'column' like below:
container-containing-these-elements: {
display: flex,
flex-direction: column
}
header: {
height: 40,
},
middle-container: {
flex: 1, // this will take the rest of the space available.
},
footer: {
height: 100,
}
what if your wrapping div was 100% and you used padding for a pixel amount, then if the padding # needs to be dynamic, you can easily use jQuery to modify your padding amount when your events fire.
I had a similar issue where I wanted a banner across the top of the screen that had one image on the left and a repeating image on the right to the edge of the screen. I ended up resolving it like so:
CSS:
.banner_left {
position: absolute;
top: 0px;
left: 0px;
width: 131px;
height: 150px;
background-image: url("left_image.jpg");
background-repeat: no-repeat;
}
.banner_right {
position: absolute;
top: 0px;
left: 131px;
right: 0px;
height: 150px;
background-image: url("right_repeating_image.jpg");
background-repeat: repeat-x;
background-position: top left;
}
The key was the right tag. I'm basically specifying that I want it to repeat from 131px in from the left to 0px from the right.
In some contexts, you can leverage margin settings to effectively specify "100% width minus N pixels". See the accepted answer to this question.