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.
Related
I have a parent div with display: inline-block and two floated child divs. When there is enough space for them to be placed next to each other the parent div's height and width are totally determined by the children.
But when the space is insufficient - making the child wrap to the next line and the elements be stacked vertically, the parent div's width remains as it was just before the children stacked instead of adapting to the size of the largest child.
How can I solve this so the parent still wraps instead of having a width that is too large?
See JSFiddle
<div id="parent">
<div></div>
<div></div>
</div>
#parent {
display: inline-block;
border: solid 2px;
padding: 10px;
background-color: #aaaaaa;
}
div > div {
float: left;
}
div > div:first-child {
width: 200px;
height: 200px;
background-color: yellow
}
div > div:last-child {
width: 300px;
height: 300px;
background-color: blue;
}
This is caused by not clearing the floats and as far as I've been able to read, there's no direct solution to do this in a fully responsive way without using JavaScript.
But with fixed dimensions, there is an approach that will clear the floats and wrap the parent :
http://jsfiddle.net/cfL491Lc/
#media screen and (max-width: 555px) {
div > div:last-child {
clear: left;
}
}
With the following logic : breakpoint = width of divs + padding + margin on body + 19px scrollbar.
If there's no scrollbar present, it will wrap a bit too early but that's the limitation of media queries. Depending on the surrounding content (especially the total height) another query might be necessary.
I'm not getting your question. In the code which you gave the outer div's height and width are determined by the inner divs
when stacked horizontally :
outer width = sum of inner widths
outer height = greatest of inner heights
<div style="width:auto;height:auto;display: inline-block; border: solid 2px; padding: 10px; background-color: #aaaaaa;">
<div style="float: left; width: 200px; height: 200px; background-color: yellow;">
</div>
<div style="float: left; width: 80px; height: 30px; background-color: blue;">
</div>
</div>
When stacked vertically
outer height= sum of inner heights
outer width= greatest of inner widths
<div style="width:auto;height:auto;display: inline-block; border: solid 2px; padding: 10px; background-color: #aaaaaa;">
<div style="float: left; width: 200px; height: 200px; background-color: yellow;">
</div>
<br>
<div style="float: left; width: 80px; height: 30px; background-color: blue;">
</div>
</div>
What do you want to change in this?
I am trying to set the width of a div element to the width of it's longest child element, which in this case happens to be a div that I want locked to the bottom of the parent div. I am also not using a fixed height for the parent, because I do not know how big the children will need to be
Here is my html/css:
HTML:
<div id ="header-right">
<div id="content1"></div>
<div id="footer"></div>
</div>
CSS:
#header-right{
background-color: red;
position: relative;
display: inline-block;
height: 300px; /*The actual width is unknown, this is just for example*/
}
#content1{
background-color: blue;
width: 200px;
height: 100px;
}
#footer{
background-color: cyan;
position: absolute;
bottom: 0;
width: 300px; /*Also an unknown value*/
height: 25px;
}
You can have a look at this jfiddle to see what happens:
https://jsfiddle.net/rkdqp9m5/2/
You can see the container div ignores the footer, since it is absolutely positioned.
However, if I do not use absolute positioning for the footer, then I cannot lock the footer to the bottom of the div, as you can see in this jfiddle
https://jsfiddle.net/rkdqp9m5/3/
I want to lock the footer to the bottom of the container, but I also want the parent's width to be based off the footer. I do not want to use tables for this, and I do not wan to used fixed widths or heights, as the container's and the footer's dimensions will be based off of images whose widths I do not know.
Edit: I would also like to keep this strictly in HTML/CSS, if possible
If you're OK with browser requirements of flexbox, you could do:
#header-right {
background-color: red;
padding: 20px 0px 0px 0px;
height: 300px;
display: inline-flex;
flex-direction: column;
justify-content: space-between;
}
#content1 {
background-color: blue;
width: 200px;
height: 100px;
align-self: flex-start;
}
#footer {
background-color: cyan;
width: 300px;
height: 25px;
align-self: flex-end;
}
<div id="header-right">
<div id="content1"></div>
<div id="footer"></div>
</div>
JSFIDDLE DEMO with all the necessary vendor prefixes.
Does this help: Relative parent DIV to inherit the width of absolute child DIV
What it suggests is that you can't use pure CSS, but you can use Javascript to achieve what you're trying to do.
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>
Two divs are side by side, one is floating left with a width of 25%, the other just has a width of 75%. But when padding is applied on the right hand div, the padding doesn't work properly.
Here is a JSfiddle example:
http://jsfiddle.net/88upt/
<div id="top">
</div>
<div id="middle">
</div>
<div id="bottom">
</div>
CSS
#top {
float: left;
background-color: green;
width: 25%;
height: 100%;
}
#middle {
background-color: blue;
padding: 30px;
min-height: 30%;
}
#bottom {
background-color: red;
min-height: 70%;
}
Can someone explain to me why this is happening?
Thanks
Floating something is kind of like making it's position absolute. It will hover on top of it's neighboring containers. Add a margin-left equal to the width of the floated element to make the container the correct width.
http://jsfiddle.net/88upt/4/
#middle {
background-color: blue;
padding: 30px;
min-height: 30%;
margin-left:25%
}
EDIT Elaborating a bit more.
The floated element pushes the content of the sibling elements over. It will not push the left side of the content's element over. The padding is there it's just hidden by the floating element.
Add overflow = "auto" in the #middle.
#middle {
background-color: blue;
padding: 30px;
min-height: 30%;
overflow: auto;
}
In this way, you don't need to know the width of floating element.
Width doesn't factor in padding.
Source: http://www.w3schools.com/css/css_boxmodel.asp
The width only applies to content, not padding, border, or margin.
You can find more information here.