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>
Related
I have an elementary problem with my web that is driving me nuts.
Imagine that I have a container div which I set to be max-width 1024 px. Then I have two more divs inside it that are width:50% each of them. I try to add a padding to the insider divs, but then it overflows above the 1024 max-width pixels of the container div.
My doubt is, if the padding are like inner-margins, they are part of the element, wouldn't it be supposed to be counted inside that 50% width? In other words, I want the element + the padding to be 50%, not just the element.
Just to make things clearer,
This is how it looks now :
... and this is how it should look. :
So, what should I do?
The box model it's like this:
Total width = width + padding + border
If you have got a 1000px of width + 10px of padding it will be a 1020px of total width.
To avoid this you can use this property:
box-sizing: border-box;
More info:
https://developer.mozilla.org/es/docs/Web/CSS/box-sizing
You need to set box-sizing: border-box to your inner div's so the width given includes your padding.
If you intend to use margin, that will not do it.
For that you can use calc(), so if your inner div's will have a 5px margin, it would look like this
width: calc(50% - 10px);
And you can combine them ...
.outer {
width: 500px;
background: red;
padding: 20px 0;
overflow: hidden;
}
.inner {
width: calc(50% - 10px);
height: 100px;
margin: 5px;
padding: 10px;
box-sizing: border-box;
background: blue;
float: left;
}
<div class="outer">
<div class="inner">
</div>
<div class="inner">
</div>
</div>
You can use manual width something like ::
<div style="width:1024px">
<div style="width:502px;padding:5px"></div>
<div style="width:502px;padding:5px"></div>
</div>
Yes the paddings are like inner-margins, they are part of the element's actual size.
You should calculate
total element width = width + left padding + right padding + left border + right border + left margin + right margin
e.g.
The two <div> elements above end up with different sizes in the result (because div2 has a padding specified).
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
<div class="div1">This div is smaller (width is 300px and height is 100px).</div>
<br>
<div class="div2">This div is bigger (width is also 300px and height is 100px).</div>
For your problem you will have to use box-sizing: border-box;
The CSS3 box-sizing property allows us to include the padding and border in an element's total width and height.
If you set box-sizing: border-box; on an element padding and border are included in the width and height:
See below example
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}
<div class="div1">Both divs are the same size now!</div>
<br>
<div class="div2">Hooray!</div>
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 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'm new to HTML and CSS so please bear with me. I am trying to create a responsive grid where a parent div has 4 child divs contained within it. Resizing the browser both vertically and horizontally when there are no margins between the child divs works successfully. However, when I begin to create margins between the child divs, resizing the browser vertically causes the bottom child div to overlap the parent div - which I do not want.
I tried using the overlap: hidden property however this causes the bottom child div to be hidden (truncated) when the browser is vertically changed - again, I do not want this behaviour.
What I want is the child divs to have equal margins and when I vertically change the browser, the child divs to be contained within the parent div, regardless of the browser vertical size.
Here is my code:
html {
width: 100%;
height: 100%;
}
body {
width: 70%;
height: 100%;
background-color: black;
margin: 0 auto;
}
#div_container {
width: 100%;
height: 100%;
background-color: white;
}
#div1 {
width: 94%;
height: 24%;
background-color: green;
margin: 0% auto 1% auto;
}
#div2 {
width: 94%;
height: 25%;
background-color: yellow;
margin: 0% auto 1% auto;
}
#div3 {
width: 94%;
height: 25%;
background-color: blue;
margin: 0% auto 1% auto;
}
#div4 {
width: 94%;
height: 25%;
background-color: red;
margin: 0% auto 1% auto;
}
<div id="div_container">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</div>
Hopefully my question makes sense - if not then please let me know.
Any help would be greatly appreciated.
Thanks
Like ckuijjer said, the vertical values are relative to the width and not to the height.
One solution would be the usage of calc.
.container div {
height: calc(25% - 21px);
width: 80%;
margin: 0 auto 28px;
background: #f00;
}
Here is an example on codepen. But the browser support isn't very good.
The percentage for the margin-top and margin-bottom is based on the width instead of the height. See the discussion in Why are margin/padding percentages in CSS always calculated against width?
It might be an option to take a look at the vh unit which allows you to set a size as a percentage of the viewports height
I'm trying to figure out what are ways to stop borders from overflowing from it's parent container.
The only solution that I can come up is to set childs width and height by using calc() to calculate and subtract width and height of child's border.
Is there any better ways with dealing with this?
What solution would be suitable for pre-IE8?
Here's jsFiddle example.
CSS
.container {
width: 100px;
height: 100px;
margin: 0;
padding: 0;
clear: both;
background-color: purple;
}
.child {
width: 100%;
height: 100%;
border: 5px solid red;
}
HTML
<div class="container">
<div class="child">
text
</div>
</div>
you have set the width and height of child element to 100 percent so obviously it will be equal to the container one. Now setting a border,it will take extra width and height that will overflow.
so the first solution is the changing dimensions.
.child {
width: 90%;
height: 90%;
border: 5px solid red;
}
Note-90% is only in this case.
and the other solution is
.child {
width: 100%;
height: 100%;
border: 5px solid red;
box-sizing:border-box;}
As #dlev said:
One option is to set box-sizing: border-box; on the child, which forces the border to be considered part of the child element's "box", rather than just the content.
But even if you one to use calc css method then just deduct the border size:
.child {
width: calc(100% - 5px);
height: calc(100% - 5px);
border: 5px solid red;
}
demo