I'm trying to create the markup for a simple panel. The structure is below. The <div> with "transcluded" in it should fill its parent container <div>.
<div class="container">
<div class="container-title">title</div>
<div class="container-body">
transcluded
</div>
</div>
As you can see (in http://jsfiddle.net/kAk9Z/), the "transcluded" body extends beyond its container instead of filling only.
How can I get the container to stay its size while having the "transcluded" <div> fill in the remaining space?
Why don't you set you're height on the inner body div. That way it will determine the height of your container div, and you get the result you want. You could even go for a min-height and have it grow when the content requiers it. Something like this:
.container {
width: 640px;
background-color: #dededd;
padding: 4px;
}
.container-body {
background-color: white;
height: 100%;
border: 1px solid black;
padding: 8px;
min-height: 460px;
}
And the fiddle: http://jsfiddle.net/kAk9Z/4/
This is not a box-sizing issue, when you declare height 100% it is referred to the height of the parent element, which already contains a div so the sum of the heights of the .container's children is > 100.
A solution can be switch the container body to position: absolute, here's the fiddle: http://jsfiddle.net/kAk9Z/2/
.container {
width: 640px;
height: 480px;
background-color: #dededd;
padding: 4px;
position: relative;
}
.container-body {
background-color: white;
border: 1px solid black;
padding: 8px;
position: absolute;
top: 30px;
bottom: 4px;
right: 4px;
left: 4px;
}
Related
I have a page where I have a div at the bottom of the page which when clicked shows another div, just above the bottom div.
I'd like to avoid the footer divs overlapping the content div higher up the page when the window is resized.
The heights of the divs involved shouldn't change.
Is a CSS-only solution possible?
I've created a jsfiddle here
CSS
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#container {
height: 100%;
width: 100%;
background-color: white;
border: solid #aaa 1px;
padding: 4px;
}
#content {
height: 300px;
border: solid blue 1px;
}
#footer-content {
height: 100px;
border: solid red 1px;
display:none;
}
#footer-footer {
cursor: pointer;
height: 20px;
border: solid cyan 1px;
}
#footer.expanded #footer-content {
display:block;
}
#footer {
position: absolute;
bottom: 0px;
width: 100%;
}
HTML
<div id="container">
<div id="content">content
</div>
<div id="footer">
<div id="footer-content">footer-content</div>
<div id="footer-footer">Click me to expand</div>
</div>
</div>
JS
$("#footer-footer").on("click", function (evt) {
$("#footer").toggleClass("expanded");
});
Simply add position: relative to the #container. This way the absolute positioning of the footer refers to the container.
http://jsfiddle.net/5bkznxud/5/
You'll probably notice that in the example above there's always a scrollbar on the right. This is because of the borders and padding on #container. Here's an example with outline (border with no calculated width) and without any padding:
http://jsfiddle.net/5bkznxud/6/
TIP: Always use outline instead of border for blocking a layout OR use box-sizing: border-box. This causes a box' dimensions to also calculate for the border. Otherwise a box with width of 100% and border will span slightly wider than you want.
It can be solved by using calc().
In this case you can create a jQuery function that get the height of footer-content and footer-footer -> .height(). Without jQuery, I don't think it's possible.
Here is an example:
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#container {
height: 100%;
width: 100%;
background-color: white;
border: solid #aaa 1px;
padding: 4px;
min-height: 420px;
}
#content {
height:calc(100% - 135px);
border: solid blue 1px;
}
#footer-content {
height: 100px;
border: solid red 1px;
display:none;
}
#footer-footer {
cursor: pointer;
height: 20px;
border: solid cyan 1px;
}
#footer.expanded #footer-content {
display:block;
}
#footer {
position: absolute;
bottom: 0px;
width: 100%;
}
http://jsfiddle.net/dokmngv0/
Browser support for the calc() feature: http://caniuse.com/#feat=calc
I have a list of divs and each div contains sub divs each of which contain images. I have a problem wherein not all image are uniformly sized and hence the div containing the img tag expands depending on the image dimensions. I cant set the div height and width in terms of pixels, as it has work across mobile devices. Please let me know if there is a way to have fixed div size in terms of percentage irrespective of the image size.
CSS:
.listItem {
position: relative;
display: inline-block;
width: 80%;
border: 1px solid #eeeeee;
border-radius: 4px;
box-shadow: 0 1px 20px 0 #000;
margin: 1%;
background: #ffffff;
}
.programContent {
float: right;
right: 2%;
top: 0%;
margin-top: auto;
margin-bottom: auto;
padding: 1%;
border: 1px solid #737373;
border-radius: 2px;
background: rgba(190, 190, 190, 0.38);
width: 20%;
height: 90%;
position: relative;
}
.programContent img{
width: 100%;
max-height: 75%;
}
HTML:
<div class="listItem">
<div class="programContent">
<img src="imageURL">
</div>
</div>
<div class="listItem">
<div class="programContent">
<img src="imageURL">
</div>
</div>
Jsfiddle:
http://jsfiddle.net/fayazvf/owrk9cd2/2/
For the DIV that contains the image, define both height and width. see example below:
.div-that-contains-image {
width: 25%; /* Adjust as needed */
height: 25%; /* Adjust as needed */
overflow: hidden; /* cuts of whatever that goes beyond the given dimension */
}
For the image itself, either the width or the height, must be set to auto
to it doesn't deteriorate. see the example below.
.div-that-contains-image img {
width: 100%; /* Equals the .div-that-contains-image */
height: auto; /* Allows the image the breathing space so it doesn't deteriorate */
}
I've got a div within a div, both are percentage based for the page but the nested div overlaps slightly to the right.
I'm actually trying to get the white box sit inside the first light blue div with a small margin on all sides so you can see a bit of the darker backround color, making it stand out more.
Editing to point out that the point of the position:fixed is to make the white box move as you scroll.
A solution was posted that involved chaning the position to relative, although this obviously stops the box from moving.
JSFiddle
div {
border-radius: 5px;
}
#header {
height: 50px;
background-color: #F38630;
margin-bottom: 10px;
}
.left {
height: 1300px;
width: 25%;
background-color: #A7DBD8;
float: left;
margin-bottom: 10px;
}
.right {
height: 1300px;
width: 75%;
background-color: #E0E4CC;
float: right;
margin-bottom: 10px;
}
#footer {
height: 50px;
background-color: #69D2E7;
clear: both;
}
#fixedleft {
height: 50px;
width: 25%;
background-color: #FFFFFF;
position: fixed;
margin: 1px 1px 1px 1px;
}
<html>
<head>
<title>Result</title>
</head>
<body>
<div id="header"></div>
<div class="left"><div id="fixedleft"></div></div>
<div class="right"></div>
<div id="footer"></div>
</body>
</html>
Your margin is increasing with the width.
Try:
#fixedleft {
height: 50px;
width: calc(25% - 2px);
background-color: #FFFFFF;
position: fixed;
margin: 1px;
}
I guess that this issue is due to default body margin as it doesn't affect the width of your fixed div(as you can see in the example, it's width is always the same, no matter what margin value you set, unlike it's container's width) :
body { margin:0; }
There is still a problem with the inner margin (1px) that pushes it out of the container, you can use calc for it, here is an example:
JSFiddle
#fixedleft {
background-color: #ffffff;
height: 50px;
margin: 2px;
position: relative;
width: 98%;
}
Please try this instear of
#fixedleft {
height: 50px;
width: 25%;
background-color: #FFFFFF;
position: fixed;
margin: 1px 1px 1px 1px;
}
if you load jQuery..
$(window).bind("resize", function(){
$("#fixedleft").width( parseInt($(".left").width()) -2)
})
$(function(){$(window).resize()})
I want to add a space of 10px on both sides of the #in div, like this:
I have this code - live demo:
html
<div id="out">
<div id="in"></div>
</div>
css
#out {
width: 700px;
height: 40px;
background: lightblue;
position: relative;
}
#in {
position: absolute;
width: 100%;
height: 20px;
top: 10px;
background: white;
margin: 0 10px;
}
No calc(), No box-sizing. Since the element is positioned absolutely you could set its left/right offset properties to 10px instead of specifying an explicit width and margins on its sides:
Example Here
#in {
position: absolute;
height: 20px;
top: 10px;
left: 10px;
right: 10px;
background: white;
}
You have to use css calc rule in order to count 100% width - the margin size:
#in {
width: calc(100% - 20px);
}
Hope this helps
Solution 1: Just some padding
You can greatly simplify the CSS:
Just specify the size for the outer div. box-sizing: border-box is added to prevent the padding from influencing the width of the div.
#out {
width: 700px;
padding: 10px;
box-sizing: border-box;
background: lightblue;
}
No positioning needed for the other div. Just give it a height, and it will automatically strech the other div:
#in {
height: 20px;
background: white;
}
http://codepen.io/anon/pen/yICdF
Solution 2: Use a border
If your goal is to get a blue border, you don't need two divs at all. What about this one:
#out {
width: 700px;
}
#in {
height: 20px;
border: 10px solid lightblue;
}
Of course you don't need two divs in this case. Just remove #out altogether and move the width property to #in.
http://codepen.io/anon/pen/icHjD
I have this situation in which I'm using
height: 100%
on a parent, and in the parent I have this header which is 34px and a container which is 100% again.
For some reason the container (ordered list) is bigger than the parent
Here is a jsfiddle
And here is the css
* {
height: 100%;
width: 100%;
margin: 0;
box-sizing: border-box;
}
section {
padding: 10px 20px 20px 10px;
border: 2px solid black;
}
header {
height: 30px;
background-color: blue;
}
ol {
list-style-type: none;
border: 1px dashed #d2d4d8;
box-sizing: border-box;
background-color: yellow;
padding: 0;
}
li {
display: inline-block;
box-sizing: border-box;
background-color: green;
width: 30%;
border: 1px solid blue;
font-size: 0;
}
Any suggestions why the ordered list is outside the parent section element ?
It's setting the height of the ol to 100% of the parent height, not 100% of the parent minus the 30px for the header. I've gotten frustrated at this before, because in my head I want 100% to mean "Fill to the parent" but it means literally 100%. If you can do css3 stuff, you could change your css to this:
ol { height: calc(100% - 30px); }
You could also do some positioning stuff, but that always gets gross. Here is an untested idea of it:
section { position: relative; }
ol { position: absolute; top: 30px; bottom: 0; }
It doesn't help that your mixing percentages and fixed sizes with your padding. When you do that use box-sizing:border-box; so that the percentage based width and height will take into account the padding and margins and not just add them on the end.