So I'm found an article on responsive design (here) and I tried to make something like what it had on part of the tutorial. The site said to divid the size of the element by the size of the container that the element(s) are in. (the reason I divided by 1000 and not 1050 is because the margins on the div#main make it 1000px even though the header is 1050px) If that doesn't make sense than the link can explain it. It looks fine with my browser at full size, but if I shrink the window to much then it doesn't resize the way it should. I'm not exactly sure what part of my code is wrong but if someone could help me that would be great! Here's a link to the page I made. And here is my source code:
<!DOCTYPE html>
<html>
<head>
<style>
body, html {
margin: 0;
height: 100%;
width: 100%;
}
header {
height: 100px;
max-width: 1050px;
margin: 0 auto;
}
#main {
border-radius: 25px;
background-color: #aaa;
height: inherit;
max-width: inherit;
margin: 25px;
}
.box {
width: 47.5%;
height: 75%;
margin: 1.25%;
background-color: #444;
border-radius: 15px;
float: left;
}
</style>
</head>
<body>
<header>
<div id="main">
<span class="box">
</span>
<span class="box">
</span>
</div>
</header>
</body>
</html>
Maybe if I explain what's happening you'll see that there actually is no problem.
The inner boxes have a fixed height based on 75% of the parent container's height. Therefore, the heights of all elements stay the same. However, your margins are fractions of the parent element's width, therefore they change with the page width. As the page gets smaller, the margin gets smaller. Since a div naturally lies as high on the page as it can, it moves toward the border of its parent.
All this is expected with your design. To fix it, set fixed top and bottom margins:
.box {margin: 12px 1.25%;}
Related
Here is a link of what I currently have for my skeleton design.
I'm new to using divs, I always used table but moving towards divs.
But anyways, my question would be...How do I align my content of each div properly.
I want the navigation to be centered along with the main content.
Index.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Chomas Tool</title>
<meta charset="windows-1252">
<meta name="Keywords" content="chomas,tool,pinconning,michigan,machine,shop" />
<meta name="Description" content="Chomas Tools- description" />
<!-- <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> -->
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo">
<img src="images/logo.gif" width="270" height="100" alt="Chomas Tool"></div>
</div><!-- Close header-->
<div id="navbox">Home | About | Projects | Contact</div>
<div id="content">TEST</div>
<div id="footer">Copyright © Chomas Tool</div>
</div><!--Close_wrapper-->
</body>
Main.css
body {
background-color:#b0c4de;
}
p {
background-color:#e0ffff;
}
#wrapper {
height: 100%;
width: 900px;
border: 1px solid #000;
margin-right: auto;
margin-left: auto;
}
#header {
background-color:grey;
height: 100px;
width: 100%;
}
#logo {
height: 400px;
width: 300px;
float: left;
}
#search {
width: 350px;
height: 400px;
float: right;
}
#search table {
border: 0px solid #000;
padding: 0px;
}
#navbox {
background-color:darkgrey;
width: 100%;
height: 20px;
text-align:center
}
#content {
background-color:lightgrey;
width: 100%;
height: 150px;
}
#footer {
background-color:grey;
width: 100%;
height: 20px;
}
The reason you are getting strange results with that layout is that your #logo div is set to a height of 400px. That is pushing everything else over to the right.
If you remove the height: 400px on the #logo div, and then add this to your styles:
img {vertical-align: bottom;}
everything will appear as you'd expect.
There are a few issues with your code.
The reason your Nav div, Content div and Footer divs are aligning improperly is because you have your #logo div set to a 400px height and floated, but you aren't clearing your float. Unfortunately you can't properly clear that div because you have a height on header of 100px, which is less than your 400px div that is nested inside the header.
For the purpose of teaching you, I'll assume your logo should NOT be 400px high, so I'll set it to be equal to the header height of 100px.
#logo {
height: 100px;
width: 300px;
float: left;
}
While we are on the concept of height, it's acceptable to have a fixed height on your header, as it's a div that shouldn't be super tall or allowed to change (generally speaking there are exceptions). That said... Your content div really shouldn't have a height, I can see you did it here to simulate that you had more content, instead let's just add some content there.
So now we are here: http://jsfiddle.net/dkCZ6/
As you can see the navigation is centered nicely, your content is where it should be as well as the footer.
Let's center the footer to make it nice looking... I added text-align: center;
http://jsfiddle.net/dkCZ6/1/
#footer {
background-color:grey;
width: 100%;
height: 20px;
text-align: center;
}
Noticed that white space that was created between the nav and content area? That's from adding the paragraph around the content stuff. Let's reset all padding and margin by adding * { margin: 0; padding: 0; } to the top of our CSS. (you should use a proper Reset CSS Stylesheet or use a Normalize CSS Sheet. These reset stylesheets help standardize elements across the different browsers, and also gives you a blank slate from which to develope from, without having to worry about weird things occuring, like that white space that we fixed.
Here is the best answer I have:
text-align: center
But base on that code you have then I have done:
**margin: 0 auto**
http://jsfiddle.net/Riskbreaker/WASEH/5/
Just to chow you I did this only on the nav:
Added:
<div class="inner">Home | About | Projects | Contact</div>
and on CSS:
.inner {margin: 0 auto; width: 50%;}
Classes are always good to use when you want to do multiple calls of the same to minimize code. Get in the habit of doing classes.
Lastly I suggest learning HTML5...Divs are great but you can simplified your code with html5
..
..Its simple to learn :)
Add
<div style="clear:both;"></div>
after you close the header
Your image style is all wrong hence why everything will look in the wrong position.
You should also be aware that you can use
margin: 0 auto;
Rather than
margin-right: auto;
margin-left: auto;
Consider using list elements for your navigation rather than just static text.
I have a site that has the following structure:
<div id="page_wrapper">
<div id="header"></div>
<div id="content-wrapper"></div>
<div id="footer"></div>
</div>
Now I have set html, body and page_wrapper to 100% in CSS. The goal here is to get the footer to be at either the bottom of the content or the bottom of the window -- whichever is visually lower. I've read a lot of things about how to do it, but I can't seem to get it to work correctly.
html, body, #page_wrapper { height: 100%; }
#page_wrapper {
width: 864px;
margin: 0 auto;
min-height: 100%;
background: url('path/to/image') repeat-y;
}
#content-wrapper {
position: relative;
width: 824px;
min-height: 100%;
margin: 0 auto;
}
#footer, #header {width: 824px; margin: 0 auto; }
#footer {
border-top: 4px solid #000;
position: relative;
margin-top: -7.5em;
}
It sorta seems to work. But problem I am seeing is, that if I zoom out my page_wrapper seems to almost reset its height to 100% but as I zoom in, it gets shorter and shorter and shorter causing overlap in the footer and content text instead of pushing the footer down.
Any idea how to repair something like that? I'm at my wits end with it trying to google up an answer...
Updated my answer with a test html, works quite fine in chrome 13. I tried zooming in and out and the footer stays put.
You should put your footer outside of the page-wrapper. Then give it a negative margin equal to the height of the footer. You can change the height of either the header or the content-wrapper to see the footer stick to the bottom of the page-wrapper instead of the browser window. If you open the html as is you will see the blue footer sticking to the bottom of the page and the page-wrapper taking up 100% of the window.
Please note that this is broken without a fix in Firefox 4 and 5. Also it doesnt work in IE 5.5 and earlier.
To make this work properly in IE6 add height: 100%; to #page_wrapper
<html>
<head>
<style type="text/css">
body, html {height: 100%;margin:0;padding:0;}
#page_wrapper {min-height: 100%; background-color: red;}
#header{height: 200px; background-color: green;}
#content-wrapper{height: 200px; background-color: yellow;}
#footer {height: 7.5em;margin-top: -7.5em; background-color: blue; position:relative;}
</style>
</head>
<body>
<div id="page_wrapper">
<div id="header"></div>
<div id="content-wrapper"></div>
</div>
<div id="footer"></div>
</body>
<html>
live example of this can be found on:
https://www.effacts.com/effacts/public?context=107
a proper sheet and html can be found here:
http://www.cssstickyfooter.com/
Does this help:
css sticky footer in an asp.net page
absolute position the footer div...
In #footer css try adding clear:both;
or
add in footer CSS right after position: relative; bottom:5px;
With position: relative you can actually use, top, right, bottom and left.
If you always want it at bottom you can put in as bottom:5px; If you want it at the bottom center then you can put in bottom: 5px; and right or left ...
5px above is just an example you can change pixel to as many as you want.
Furthermore, you can also have clear:both with it there as that clear make sure there is no other content that would override it.
A simple (one might think!) question to all CSS gurus: I would like to shrink a DIV snugly around an IMG. The IMG is 600 x 800 and I needed it much smaller. So I go {height: 100%; width: auto;} and constrain the height via a wrapper DIV. However, to maintain the (unknown to me) AR, I cannot fix the width on the DIV. I tried to set the wrapping DIV to "display: inline-block" or "float: left" or "position: absolute" or ... - no matter: most browsers will stretch that DIV 800px wide - the original width of the full-size IMG - so it looks sthg like this:
[[IMG].............................]
Bizarrely, I can add some text to the DIV (just to test), and that text will actually appear right next to the scaled IMG:
[[IMG]Hello world..................]
Does anyone here know why the original size of the IMG matters (for dimensioning the width, it does not affect the height)? And what I might be able to do to shrink the DIV?
Thanks for looking.
EDIT:
To test Pär Wieslander's idea, I wrote a little test bed that should help clarify what I am on about:
<style type="text/css">
html, body {
height: 100%;
}
#dialog {
background: green;
height: 50%;
position: relative;
}
#frame {
border: 2px solid black;
display: inline-block;
height: 100%;
position: absolute;
}
#img {
height: 100%;
width: auto;
}
</style>
<body>
<div id="dialog">
<div id="frame">
<img id='img' src='...' />
</div>
</div>
</body>
Just pick any large IMG of your choice. You should find an inexplicably wide frame around and image that has squeezed - height-wise - onto the green carpet.
If you specify the image's width or height as a percentage, that percentage is calculated in proportion to the size of the parent block. So specifying width: 50% on the image doesn't mean 50% of the original image width -- it means 50% of the width of the parent block. The same goes for the height. Thus, there will always be extra space around the image as long as you specify the width or height as a percentage.
The solution is simple -- specify the dimensions in pixels, ems or any other unit other than a percentage:
HTML
<div class="wrapper">
<img class="small" src="myimage.jpg">
</div>
CSS
img.small {
width: 150px; /* or whatever you like */
display: block; /* to avoid empty space below the image */
}
div.wrapper {
display: inline-block;
border: 1px solid #000;
}
Edit: Based on your comments and updated post, I understand that what you really want to do is to set the width of the surrounding div and make the image fill up that div. Here's an example that does that:
HTML
<div class="wrapper big">
<img src="myimage.jpg">
</div>
<div class="wrapper small">
<img src="myimage.jpg">
</div>
CSS
img {
display: block;
width: 100%;
}
.wrapper {
margin-top: 1em;
border: 1px solid #000;
}
.big {
width: 600px;
}
.small {
width: 300px;
}
So I go height="50%", say, and width="auto" (to maintain AR).
Why not just go width="50%" too as this would resolve it.
I think Pär's approach is right: don't do { height: fix; width: auto; } but do instead { height: auto; width: fix; } Works better.
I have some HTML+CSS code that wants to layout several divs. The layout is like this: all divs stay in a parent div whose size is fixed. Then each child div should stay on its own line, and use the minimum height for drawing its content. The last div should consume all remaining height, so that the parent div is entirely filled.
This code shows my approach using CSS float and clear properties:
<html>
<head>
<style>
.container {
width: 500px;
height: 500px;
border: 3px solid black;
}
.top {
background-color: yellow;
float: left;
clear: left;
width: 100%;
}
.bottom {
background-color: blue;
height: 100%;
float: left;
clear: left;
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="top">top1</div>
<div class="top">top2</div>
<div class="top">top3</div>
<div class="top">top4</div>
<div class="bottom">bottom</div>
</div>
</body>
</html>
However, the last div overflows from the its parent. I guess it is because of the width: 100%.
Is there any way to solve this problem? I want to avoid setting the overflow attribute of the parent, and also I have to avoid using absolute positioning. If somehow I could trick the last div to use the height of the parent minus the sum of height of the other divs.
Add:
div.container { overflow: hidden; }
It's not overflowing because it's 100% width. It's overflowing because it's a float and thus removed from the normal layout. Changing the overflow property will change how the browser caters for contained floats.
Oh and if you aren't already, make sure you're using a DOCTYPE. It particularly matters for IE.
I have div that contains 2 divs in it. One of the child divs has static height 2em, and I want the other one to vertically fill the rest of the space of the parent div. How do I do this?
Edit: I need the parent div to fill the screen.
This depends on exactly what you want to achieve. Getting a fixed top and variable bottom where the container is only as large as it needs to be for the two children.
Assuming:
<div id="parent">
<div id="top"></div>
<div id="bottom"></div>
</div>
use:
#top { height: 2em; }
and the bottom div will be as large as it needs to be. You can make the bottom fixed height and achieve the same thing.
But I suspect what you want to do is have the outer div fixed height (say 100%). That gets much harder. The problem is that there is no way in CSS of saying "height of 100% minus 2em" without using an (ill-advised) CSS expression.
One approach is to overlay the top with the bottom.
#outer { position: relative; }
#top { position: absolute; height: 2em; top: 0; left: 0; width: 100%; }
#bottm { height: 100%; padding-top: 2em; }
The top div actually overlays the bottom. This is fine so long as you don't want a border.
You can use Faux Columns if you're using an image for the background or just move the background color back to #parent to give the appearance of filling the screen with the #bottom div. It would fill the page by giving it a 100% height (as long as html and body also get height: 100%).
Example:
<head>
<title>TITLE</title>
<style type="text/css">
html, body { height: 100%; margin: 0; padding: 0; }
#parent { height: 100%; background: #f08; }
#top { height: 2em; background: #80f; }
</style>
</head>
<body>
<div id="parent">
<div id="top">TOP DIV</div>
<div id="bottom">THE REST</div>
</div>
Since CSS is just about styling, giving the appearance of 100% height is the same as having 100% height. Right?