I'm trying to display 2 divs side by side in css.
The first div has a variable width (in fonction of the image it contains).
The second one has to take all the remaining width.
The second div contains 3 sections: "top", "middle" and "bottom" whose added height is 100%.
Both divs have a 100% height.
I successfully placed the divs side by side thanks to this question and everything works great when the body has fixed dimensions.
But since I will embed this page in an iframe, I want the divs to occupy all the available space. I would like to avoid setting the body dimensions with javascript...
I decided to add this code to the body:
body {
margin: 0;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
This does the trick on Chrome and Safari: the image has a 100% height which defines its width and the second div stretches until it occupies all the available space. (The caption is displayed over the image)
But when I use Firefox, the first pane is larger than expected (see the red rectangle).
I created a fiddle with the code: http://jsfiddle.net/0w0s6z5n/1/
I can't understand why the behavior is different and what I did wrong on this page. Can someone explain to me why the behavior is different and point me in the right direction to succeed in displaying everything like it currently is on Chrome/Safari.
Thanks in advance for your help.
add
width: 100%;
height: 100%;
to body (yeah, its that simple)!! :)
Problem : container always takes dimension of parent elements, so you have to declare them if you intend to use them in %
css :
body {
margin: 0;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-color: orange;
width: 100%; /* added */
height: 100%; /* added */
}
Fiddle here
I am not sure this is exactly what you wanted, but from what i understood you need to have the first div with a variable width and the rest should fall in place.
I edited your code: Fiddle here
CSS :
body {
margin: 0;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-color: orange;
}
.container {
width: 100%;
height: 100%;
background-color: pink;
}
.first {
position: relative;
float: left;
height: 100%;
background-color: red;
}
.second {
height: 100%;
background-color: yellow;
}
.media {
height: 100%;
}
.caption {
position: absolute;
width: 100%;
height: 15%;
right: 0;
bottom: 0;
left: 0;
background-color: grey;
}
.top {
height: 40%;
background-color: blue;
}
.middle {
height: 30%;
background-color: purple;
}
.bottom {
height: 30%;
background-color: green;
}
With this if you change the width of .media , the rest of them fall in place and also works with firefox (Tested).
Related
Ok, i thought of starting afresh following some confusions in my previous similiar post. Here, I am trying to know the exact "reason" as to why exactly my outer container div ("container" , pink) is not automatically expanding vertically to fit the content div ("content" , red) (which automatically expands vertically with length of text). I am looking a reason more than the solution, because the reason will help me understand the concept more deeply. Please copy dummy text loremipsum... several times in the "content" div so that it overflows from page
Screenshot
here is the code:
html, body {
width: 100%;
left: 0px;
top: 0px;
margin: 0px;
height: 100%;
}
.container {
width: 600px;
left: 0px;
position: relative;
right: 0px;
background-color: rgba(216,86,112,0.5);
margin: auto;
height: 100%;
}
.content {
height: auto;
width: 200px;
background-color: rgba(255,0,0,1);
position: absolute;
top: 0px;
bottom: auto;
left: 0px;
right: 0px;
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
/* Paste dummy text here more than a page */
</div>
</div>
</body>
</html>
The problem is the following:
Instead of using
.container {
height: 100%;
}
try:
.container {
height: auto;
}
and instead of
.content {
position: absolute;
}
use
.content {
position: relative;
}
Here's why
When an element is set to be 'position: absolute' it wont collapse with any other element, that's why your container doesn't expand at all.
When an element is set to be 'Height:100%' it takes the height of its container, in your case the cointainer is the body which means it will take 100% percent of your screen (in your case), but your content is way higher than the screen and that's why it overflows your content.
Hope you understand....
I know this has been asked many times, but I'm stuck trying to get % height of an element to work. My understanding is the if the parent element has a height specified then setting a % height on the child element should work. Unfortunately I have tried to get this to work but I must be missing something.
body{
border-radius: 10;
height: 100%;
position: relative;
}
.child-element{
height: 50%;
margin: none;
background-color: gray;
}
Where I have:
<body>
<div class="child-element">
</div>
</body>
There is a parent element html for body tag also needs the height to be set.
html {
height: 100%;
}
Simplified demo below (removed unnecessary rules and reset default body margin too).
html, body {
height: 100%;
}
body {
margin: 0;
}
.child-element {
height: 50%;
background-color: gray;
}
<body>
<div class="child-element"></div>
</body>
If the intention is to present the available browser client area as containing a single content rectangle (rather than having a tall one that scrolls), I prefer to do:
body {
top: 0; left: 0; right: 0; bottom: 0;
overflow: hidden; position: overflow;
}
If the aim is to have a child panel that builds height from nothing, then you need to be aware that the height of objects is based on width of parent, not height when the object is not absolute or fixed position. It's possible to build a square as follows:
.square {
width: 20em;
background: cyan;
}
.square:before {
content: '';
display: block;
width: 0;
height: 0;
padding-top: 100%;
float: left;
}
.square:after {
content: '';
display: block;
clear: both;
}
}
<div class="square">Square</div>
You can change the aspect ratio of the block by changing the amount of padding.
Hope this helps.
Mark
Examining this HTML:
<div class="wrapper">
<div class="content">
</div>
</div>
<div class="footer">
<hr />
<p>some text</p>
</div>
and CSS:
.footer {
position: absolute;
height: 100px;
width: 100%;
bottom: 0;
background-color: black;
}
.wrapper {
padding-bottom: 100px;
background-color: blue;
height: 100%;
}
.content {
width: 200px;
height: 100px;
margin: auto;
background-color: green;
}
html, body {
width: 100%;
height: 100%;
}
You can see that footer have position absolute and stay at the bottom of the page. wrapper will cover the remaining space and contain a content inside it. I want to vertical-align content without breaking the current layout. Do you have any suggestion?
Here is JSFiddle link. (Note: jsfiddle doesn't work as expected, there always a space beneath footer, this behavior doesn't occur when run the HTML file in browser).
Note: I don't want to use fixed height for wrapper, I want it covers all the remaining space, so please don't suggest me to use line-height
I tried the example here but it doesn't seem to work
NOTE I want the layout easy to modify (like add a header or content at the top) without breaking it therefore I want to avoid using absolute position on wrapper and content
NOTE 2 Sorry for not to clarify, actually, content doesn't have fixed size, its size depend on the content inside it, so the solution using negative margin doesn't work as I mentioned above
Here is one approach using the following CSS:
.footer {
position: absolute;
height: 100px;
width: 100%;
bottom: 0;
background-color: black;
}
.wrapper {
background-color: blue;
position: absolute;
top: 0;
bottom: 100px;
left: 0;
right: 0;
}
.content {
width: 200px;
height: 100px;
background-color: green;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
}
Use absolute positioning and then negative margins, since your content has well-defined
dimensions, this is relatively straightforward.
See demo at: http://jsfiddle.net/audetwebdesign/DgUV2/
For .wrapper, use the top, bottom, left and right offsets to stretch the div to the
full width and height, taking into account the 100px for the footer.
For .content, set top and left to 50%, the center point of the .wrapper and then adjust
for the center of the .content div using negative margins.
Remember to zero out the margin for the body or else you might see 10px whitespace
depending on your browser.
Add this to your .content
position: relative;
top: 50%;
transform: translateY(-50%);
Just 3 lines of code to vertical align
I was able to get it to work using Method 1 from the example you linked
I added the following:
.content {
width: 200px;
height: 100px;
margin: auto;
background-color: green;
/* THE BELOW WAS ADDED */
position: absolute;
top: 50%;
left: 50%;
margin: -100px 0 0 -100px;
}
html, body {
width: 100%;
height: 100%;
/* BELOW ADDED TO REMOVE EXTRA SPACE AROUND EDGES */
margin: 0;
}
jsFiddle of working example
Assume, that I have three boxes (divs) on website (see image below):
header with logo
content with some text
footer with contact info
Each box have unique color (in order: yellow, orange and blue) and black border.
I would like to website always fills the entire screen, the logo was on the top and the footer was at the bottom. So if there is not enough text in content, content should be extended, so that the footer was on the bottom. And if will be a lot of text in content, slider should appear on the right.
How do this in CSS? Important is that boxes have backgrounds. I found many solutions, but none doesn't work properly with backgrounds.
Solution Explained
The black box in your diagram gets min-height 100%, is the scrolling container, and is position relative, to allow child positions to be respective to it.
The red box in your diagram is actually composed of 2 boxes:
one for your dynamically-sized content; this has sufficient top and bottom padding to make room for your header and footer, and force the scrolling container to expand
one for the background; this is position absolute, with top and bottom position specified relative to the black box, its parent.
The yellow and blue boxes in your diagram can be position: absolute, top: 0 and bottom: 0, respectively... or however you choose to position them.
Here's a fiddle of it: http://jsfiddle.net/syndicatedshannon/F5c6T/
And here is another version with explicit viewport elements just to clarify, matching colors, and borders added to replicate the OP graphics (although per the OP the black border is actually the window).
Sample HTML
<html>
<body>
<div class="background"></div>
<div class="content"></div>
<div class="header"></div>
<div class="footer"></div>
</body>
</html>
Sample CSS
html { position: absolute; height: 100%; left: 10px; right: 10px; overflow: auto; margin: 0; padding: 0; }
body { position: relative; width: 100%; min-height: 100%; margin: 0; padding: 0; }
.background { position: absolute; top: 120px; bottom: 120px; background-color: red; width: 100%; }
.content { position: relative; padding: 120px 0; }
.header { position: absolute; top: 10px; height: 100px; width: 100%; background-color: yellow; }
.footer { position: absolute; bottom: 10px; height: 100px; width: 100%; background-color: cyan; }
Also note that this assumes you cannot rely on CSS3 yet.
If you're only targeting modern browsers, you can use calc()
body, html {
height: 100%;
padding: 0;
margin: 0;
}
.header {
height: 50px;
margin-bottom: 10px;
}
.footer {
height: 100px;
margin-top: 20px;
}
.content {
min-height: calc(100% - 50px - 10px - 100px - 20px);
}
The drawback is that you need to know the header and footer sizes and they need to be fixed. I don't know any way around this without using Javascript. For slightly less modern browsers, you can use border-box to get the same effect as above.
body, html {
height: 100%;
padding: 0;
margin: 0;
}
.header {
height: 50px;
margin-bottom: 10px;
z-index: 5;
position: relative;
}
.footer {
height: 100px;
margin-top: -100px;
z-index: 5;
position: relative;
}
.content {
box-sizing: border-box;
padding: 60px 0 120px 0;
margin-top: -60px;
min-height: 100%;
z-index: 1;
position: relative;
}
Lastly, here is the JS solution:
$(function(){
$('.content').css('min-height',
$(window).height()
- $('.header').outerHeight()
- $('.footer').outerHeight() - $('.content').marginTop()
- $('.content').marginBottom());
});
EDIT: My JS solution assumed border-box and no border. This solution should be more robust:
function setContentSize() {
$('.content').css('min-height',
$(window).height()
- $('.header').outerHeight()
- $('.footer').outerHeight()
- ($('.content').outerHeight()
- $('.content').innerHeight()));
}
$(setContentSize);
$(window).on('resize', setContentSize);
I am trying to create a gray transparent background screen, on top of my original html page.
What I have done so far is to append a div (with jquery) to the body tag with this css style:
.spesificPropertiesDiv {
position: absolute;
display: block;
top: 0px;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.5;
z-index: 6000;
text-align: center;
}
as I mentioned before I am appending a div with this class to the body.
Every works fine when I append it on large screen (24 inch) but when I am appending it on 16 inch display the gray screen div's height is 100 px less than the body's height.
One more thing that I need to mention is that on large screen the page is fit on the screen where on the smaller screen a scroll-bar appears to make the page lower side of the page visible.
Why dose this happen? How can I fix it?
Thanks!
I have changed it to:
.spesificPropertiesDiv{
display: block;
position: fixed;
top: 0; bottom: 0; left: 0; right: 0;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.5;
z-index: 6000;
text-align: center;
}
and it works!!!!
Thank you all for the help
Could you try:
.spesificPropertiesDiv {
position: fixed; *position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}
Additionally, is there any padding on this div? Is it a direct child of the <body> tag?:
<body>
<div class="spesificPropertiesDiv"></div>
</body>