I have an inner of fixed width containing the content of variable size. I want the height of that inner-container to be as big as the content, and at least as big as the screen's height (when the content is smaller). The page also has a fixed size footer.
Normally I'd think of setting min-height: 100% to both inner and outer (root) containers, but that doesn't work in CSS.
The code I present below is a simplified example of the situation I have on a bigger page (with much more various elements in the root-container). A green inner-container is not filling the entire screen's height as I'd like it to be. I did manage for it to do so (for example by setting root-container's height instead of min-height, but then the rendering behaved wrongly when the content was bigger than the screen's height (you can quickly simulate that by changing the font-size to a bigger value, like 21px). I want to have it working (the green column filling at least the screen's height, black on it's both sides throught the whole height and the footer on the very bottom) in both cases.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Example</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<style type="text/css">
html,
body {
height: 100%;
margin: 0;
}
#root-container {
min-height: 100%;
background: black;
color: white;
margin-bottom: -200px;
}
#root-container:after {
height: 200px;
content: "";
display: block;
}
#inner-container {
min-height: 100%;
width: 400px;
background: green;
color: white;
font-size: 11px;
margin-left: auto;
margin-right: auto;
}
#footer {
height: 200px;
background: orange;
color: black;
}
h1 {
margin-top: 0;
}
</style>
</head>
<body>
<div id="root-container">
<div id="inner-container">
<h1>Content</h1>
And when the body finally starts to let go<br/>
let it all go at once<br/>
not piece by piece<br/>
but like a whole bucket of stars<br/>
dumped into the universe<br/>
Whoh! Watcb it go!<br/>
Good-bye small hands, good-bye small heart<br/>
good-bye small head<br/>
My soul is climbing tree trunks<br/>
and swinging from every branch<br/><br/>
They're calling on me<br/>
they're calling on me<br/><br/>
Do you think I'm an animal?<br/>
Am I not?<br/>
Do you like fur<br/>
Do you wanna come over<br/>
Are we captive only for a short time<br/>
Is there splendor, I'm not ashamed<br/>
Desire shoots through me<br/>
Like birds singing<br/>
(The way you move no ocean's waves were ever as fluid)<br/><br/>
They're calling on me<br/>
they're calling on me<br/>
I hit the mark!<br/>
I target moon, I target sky, I target sun<br/>
Fall down on the world before it falls on you<br/><br/>
Like beggars, like Stars<br/>
like whores, us all<br/>
Like beggars, like dogs<br/>
Like Stars, us all<br/><br/>
Shoot straight for my heart<br/>
(And when you were near no sky was ever quite so clear)<br/><br/>
Like stars, so small<br/>
Like us, when we fall<br/>
Like beggars, like whores<br/>
Like lovers, Get Up!<br/>
Get up, too far
</div>
</div>
<div id="footer">
<h1>Footer</h1>
</div>
</body>
</html>
And the same example uploaded to JSFiddle: http://jsfiddle.net/gNT8m/
This is a bug: children of parents with min-height can't inherit the height property.
There are many potential workarounds, but you're right that this should work the way you initially tried.
Update:
As to workarounds, the simplest that occurs to me is to set display: flex on your #root-container. I haven't cross-browser tested this solution, so you might want to investigate it further, but using flexbox is a good way to go.
See it working.
You'll want to add a few other niceties, like adding position: relative to your footer and adding some space (padding: <your footer's height>px) to your #inner-container to make sure your footer doesn't cover up any content.
Related
I am trying to do something that, I thought, was very simple. The header of a website I am building is a solid color that needs to span the entire width of the screen regardless of which browser it is veiwed in. What I have created so far works wonderful on desktops and laptops, but when I test it on a tablet or a mobile phone, the header does not span all the way to the right. The content inside of the header does span all the way however, which is really confusing to me. The only way I can get the header bar to span the entire width is by setting the position property to static, which is not what I need for this site, so that doesn't do me any good. Below is the CSS and HTML I am using. Could someone take a look at it and let me know what I am missing.
HTML:
<div class="header">
<div class="container">
<div class="header-content">
....Some Content goes in here....
</div> <!-- /.header-container -->
</div> <!-- /.container -->
</div> <!-- /.header -->
CSS:
html, body {
background-color: #949494;
width: 100%;
margin: 0px;
padding: 0px;
}
.header {
width: 100%;
min-width: 100%;
height: 200px;
background-color: #ffffff;
padding-top: 8px;
}
.container {
width: 1200px;
margin: 0 auto;
text-align: center;
}
This what was happening to me too. Resizes on the desktop just fine but due to a 728px banner at the top of my blog, mobile was looking terrible. It's hard to fit a wide banner on such a small screen without causing problems. If you don't have a banner, maybe you have some element that's too wide, throwing off the rest of the design.
This fixed the problem: <meta name="viewport" content="width=device-width, initial-scale=0.41, maximum-scale=1" /> (This goes in the <head>...</head>)
Lower the initial-scale down from 1.0 till your elements can reach all the way across the page at 100%. This scale made my text a little too small, but Flowtype.js helped. I could go with a smaller banner but I'm satisfied with this solution for now.
UPDATE: The above solution is not really device independent. For example, the "scale" might look great on your phone but too small on your tablet. You might want this instead:
<meta name="viewport" content="width=800" />
This makes all your devices act like a screen that's 800 pixels wide. Or whatever width you need. Works beautifully on my Android phone and Nexus tablet. I think desktop browsers ignore the "viewport" setting, which is fine by me.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<head>
I haven't tested this out on tablet or a mobile phone, but I think the problem is in setting a fixed width to the "container" div. Since you have set 100% width for html, body and the header div, these will always occupy 100% of the width irrespective of whether it is a browser, a tablet or a mobile phone. However, this is not the case with the "container" div as it has a fixed width. Try resetting the width of the "container" div in this manner:
.container {
width: inherit;
margin: 0 auto;
text-align: center;
}
Building on PJ Brunet's answer, I had a similar styling problem, but wasn't getting enough versatility from changing the meta tags in the html head. Instead, I added minimum width values in pixels to the css. Using the original question as an example:
.header {
/* restrict the smallest device size to this width */
min-width: 475px;
height: 200px;
background-color: #ffffff;
padding-top: 8px;
}
Then you can target the next conventionally sized device:
#media (min-width:641px) {
.header {
/* force devises with a smaller width to observe this style */
min-width: 700px;
}
}
Maybe not the best practice, but it will allow you to capture all devise sizes into more manageable groups to suit the the design.
You can also give min-width to body. Something like body {width: 1200px;}, depending on your width settings. Some clients might want the exact copy of desktop in their mobile!.
I'm creating a web page to be printed. It could wrap to 2 pages. There has to be a small, black square in each corner for a scanner to use for reference. I'm pretty sure I just need divs for the 4 black squares in the corners and one more div for main content area. How do I position the 4 corner squares so that each of them is in its own corner of the printed page with the content div filling the center? The center content should be inside the corner squares left to right, but could overlap with them top to bottom.
EDIT: I uploaded a sample image, but it's not showing.
EDIT: Here's what I have so far:
http://jsfiddle.net/7DjTf/
<html>
<head>
<title>Printable Form</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="UpperLeftScanningIndicator"></div>
<div id="UpperRightScanningIndicator"></div>
<div id="Content">Here is some content.<br /><br /><br /><br />Here is some more.</div>
<div id="LowerLeftScanningIndicator"></div>
<div id="LowerRightScanningIndicator"></div>
</body>
</html>
#Content {
border: solid 1px black;
width:90%;
margin-left:auto;
margin-right:auto;
}
#UpperLeftScanningIndicator {
height: 20px;
width: 20px;
background-color: black;
float: left;
}
#UpperRightScanningIndicator {
height: 20px;
width: 20px;
background-color: black;
float: right;
}
#LowerLeftScanningIndicator {
height: 20px;
width: 20px;
background-color: black;
float: left;
position:absolute;
bottom:20px;
}
#LowerRightScanningIndicator {
height: 20px;
width: 20px;
background-color: black;
float: right;
position:absolute;
bottom:20px;
right:500px;
}
I'm not sure how to get the lower right block to go over to the right. Float would work, but using "absolute" seemed to break that. Note: your browser window needs to be pretty wide for this sample to look any good. Also, I'm not sure how to make those black squares appear on every page no matter if there is only one page or if there is a second page printed.
its actually pretty easy.
I've updated your fiddle - http://jsfiddle.net/avrahamcool/7DjTf/1/
you have to use the right attribute correctly.
I would recommend using the same technique for all indicators. so use position: absolute; with all of them, and set the top/bottom left/right accordingly
also, no need for repeating the style. use class instead.
like this: http://jsfiddle.net/avrahamcool/7DjTf/2/
Update:
apparently, the #page CSS3 pseudo elements rules are not implemented yet in the browsers, so we'll have to fall back to JavaScript. (if it was, you'll have a perfect solution like this article explains)
first: because background-color is not printed, I switched to img tag.
second: the first solution had only 4 indicators (2 at the beginning & 2 at the end), and you want 4 indicator for each printed page.
so here is a new solution: http://jsfiddle.net/avrahamcool/7DjTf/5/
the idea is to add dynamic indicators as the content grows.
the indicators should be visible only when printing.
the part that visualize the indicator is the .indicator rule and he's located in #print rule.
so far, I didn't manage to write a code that 'knows' how many pages will be printed..
so the for loop run a constant number of times (and I don't know how to solve this part)
inside the loop: I add 4 dynamic indicators (2 in the left and 2 in the right) each time, the offset should grow in such way that the next indicators would be in the next page..
If you know how many pages you're gonna have, its a perfect solution for you.
Notice:
this offset between pages is different when printing from different browsers.
I've tested my solution in Chrome. (IE & FF requires a little tuning);
if you want right bottom icon to set in right you can use this
#LowerRightScanningIndicator {
height: 20px;
width: 20px;
background-color: black;
float: right;
position:absolute;
bottom:20px;
right:20px;
}
I have a setup for a left navigation bar on our website that. The way it is displayed is to have a header image (usually the client's name) at the top of the nav, then to have a table that holds a number of options about what to do. These options vary depending on what the client is. When displaying this nav, there are two images that run down the sides of the primary table, used as borders. These are skinnable images that are one by one pixel images. This way, each client's skin can be a different color while referencing the same image name in the CSS file.
Before we added doc types to these pages, the images were extending to the bottom of the page or the bottom of the content inside of the table, whichever was longer. Now, adding doc types to make the page standard, I cannot get it to do the same thing.
My setup is that I have one DIV as the header which simply holds the header image. Then, I have a DIV as a container with three DIV elements as children. The first and last ones hold the one pixel image as the left and right border and the middle div holds the content table.
I can't set the border image DIVs to 100% height, because the page size will be 100% + the size of the header image. And I can't just rely on the image going to the bottom of the content, because it needs to be the entire length of the page if the content doesn't take up the entire page. I'm at a loss of what to do here, short of using javascript to calculate what the size of the DIVs should be when I resize the page.
By the way, I'm trying to shoot for all browsers, so both IE (at least 9) and Chrome are m test cases. Linking code here to show what my problem is. As you can see, the left, content, and right divs extend past the bottom of the page, which I do not want to happen.
//HTML
<html>
<body>
<div class="NavHeader"> </div>
<div id="NavBody">
<div id="NavLeft"> </div>
<div id="NavContent"> <br> </div>
<div id="NavRight"> </div>
</div>
</body>
</html>
// CSS
html, body {
height: 100%;
}
.NavHeader {
height: 40px;
width: 100%;
background-color: blue;
}
#NavBody {
height: 100%;
}
#NavLeft {
height: 100%;
float: left;
background-color: black;
width: 1px;
}
#NavContent {
height: 100%;
float: left;
background-color: green;
}
#NavRight {
height: 100%;
float: right;
background-color: black;
width: 1px;
}
I've run into a similar case in the past and all I was able to come up with was using javascript...
CSS (as far as I know) doesn't really have that dynamic capability that you are looking for.
I'm trying to produce yet another lightbox as much needed HTML/CSS/Javascript practice, but I've encountered a styling issue that looks trivial (and probably is!) but I just can't solve it.
I have a div that contains an img. No matter what I try (border, margin, padding, auto height etc.) I just can't make the div shrink to match the image dimensions. I've reduced the problem to this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Layout experiments</title>
<style type="text/css">
#lightbox {
margin: 0;
padding: 0;
position : fixed;
left : 50%;
margin-left : -320px;
top : 100px;
border-radius: 22px;
background : #e0e0f0;
color : #102020;
}
#lightbox img {
border-radius: 15px;
}
.imagebg {
margin : 7px;
background : black;
border-radius: 15px;
height : 100%;
}
</style>
</head>
<body>
<div id="lightbox">
<div class="imagebg">
<img src="picture.jpg">
</div>
</div>
</body>
</html>
'picture.jpg' is 640x400, but the container div wants to be 640x404, the difference showing itself as a black strip below the image. The div exists so that I can fade the image to black by blending it's opacity down to 0, swap it, then blend it back in.
I've looked at the computed styles in multiple browsers and can't see where the 4px delta is coming from.
Trying adding:
img { display: block; }
to your CSS. Since an <img> is an inline element by default, its height is calculated differently as related to the default line-height value.
On inline elements, the line-height CSS property specifies the height that is used in the calculation of the line box height.
On block level elements, line-height specifies the minimal height of line boxes within the element.
Source: https://developer.mozilla.org/en/CSS/line-height
Your image is using the line-height of its parent. Try this:
.imagebg { line-height: 0 }
try adding:
vertical-align: middle;
This is used in google material design lite for removing the gap between audio, canvas, iframes, images, videos and the bottom of their containers.
Material Design Lite: https://getmdl.io
Github discusion: https://github.com/h5bp/html5-boilerplate/issues/440
Apart from other working answers, setting display property of parent to flex worked for me as well:
.imagebg { display: flex }
Basically you are getting this error on IE, though you hve not mentioned but this is the fact. IE generates some extra space below the <img> tag. Hence its a good practice to make the images img { display: block; }.
EDIT: You can say its a bug of IE
If you don't want to change display of the element, try
margin-bottom: -4px;
I have an issue with a site I am working on where the right wrapper keeps dropping down below the site. Obviously I want it to stay on the right hand side.
I've coded up a test case which shows my issue (I think) and I'm wondering if there is a better way to do things.
The website url is http://www.musicworkshop.co.nz/
Below is the test case which (I think) is the cause of my issue, however it may not be. The pink box drops down if it does not fit within the page width.
I've also included a diagram of what I'm trying to achieve along with a screenshot of the right wrapper not where it should be.
Is there a better way to do this?
John
<html>
<head>
<title> Test page </title>
<link rel="stylesheet" href="test.css" type="text/css" />
</head>
<body>
<div id="superbox">
<div id="box1">
</div>
<div id="box2">
</div>
<div id="box3">
</div>
<div id="box4">
</div>
<div id="box5">
</div>
<div id="box6">
</div>
</div>
</body>
</html>
#superbox{
width: 1000px;
height: 100px;
margin: 0 auto;
}
#box1{
height: 100px;
width: 200px;
background: red;
float: left;
}
#box2{
height: 100px;
width: 200px;
background: yellow;
float: left;
}
#box3{
height: 100px;
width: 200px;
background: blue;
float: left;
}
#box4{
height: 100px;
width: 200px;
background: green;
float: left;
}
#box5{
height: 100px;
width: 200px;
background: grey;
float: left;
}
#box6{
height: 100px;
width: 200px;
background: pink;
float: left;
}
alt text http://www.musicworkshop.co.nz/website.png
alt text http://www.musicworkshop.co.nz/website_right-wrap-missing.png
Since all your boxes are 200px wide go for a %.
if it doesn't fit into the page width, this is the way float works... if you want to have the boxes in one line whatever happens, set your superbox with to the with of all boxes (which is 200*6 = 1200 / not 1000).
EDITS:
Looking at your example site I think you mean when the viewwindow is small that you want the div to go off-screen. In your case the best solution is to make that repeating image the background-image of your body.
Something like:
body { background: #6593aa url('http://www.musicworkshop.co.nz/templates/musicworkshop/images/right_repeater.png') repeat-x; }
And make sure to take the backgrounds off your other divs. You'll probably want to pick a different image to repeat with too rather than just the right segment. I can see you were trying to get it to match up with the header nicely but the way you are going about it just won't work. My best solution is to use a transparent background on your leftwrap and rightwrap near header (use a .gif or .png with transparency for your rounded corner rather than the current image with the bit of "amplitude wave" in the background).
Summary:
Remove all wrapper etc. backgrounds.
Change the "rounded corner" images to have a transparent background.
Remove your "repeating" divs.
Apply that CSS above to the body.
Original:
What's your desired behaviour? For superbox to go 1200px? Unfortunately you can't have fixed sizes and "auto-grow".
If you want 'superbox' to grow to fit its children then don't specify a width (i.e. leave it width:auto).
If you instead want the children to resize if they are too large for 'superbox' use percentage widths on them.
It sounds like you want your boxes to stay their current size and not wrap. Well try and imagine what would happen if you put a new div under 'superbox' and wrapping your 'box_'es that had a width of 1200px. It's going to make 'superbox' grow to wrap around it so at the end of the day you might as well just make 'superbox' this larger width in the first place!