I'm trying to make a simple, fluid, responsive two column layout (just for the sake of learning CSS), consisting of a sidebar and a main section.
I was able to create the sidebar with 100% height, position the main content at its side, but when I put a H1 inside my main section... tada! Its margin created a margin for the sidebar as well.
Here's a minimum code that presents the problem:
<!DOCTYPE html>
<html>
<head>
<style>
html,body {
margin:0;
padding:0;
width:100%;
height:100%;
}
#sidebar {
display:block;
position:absolute;
width:25%;
min-height:100%;
border-right:1px solid #222;
background-color: #E0E0E0;
}
#main {
margin-left:25%;
display:block;
}
h1 {
padding:2%;
/* margin:0; */
/* defining the margin as zero aligns
* everything at the top */
}
</style>
</head>
<body>
<header id="sidebar">
Let's reach for the stars!
</header>
<section id="main">
<h1>Nope!</h1>
</section>
</body>
</html>
I've tested it in Chrome and Firefox, happened in both.
I've created this JSFiddle, and thanks to a comment from cimmanon, the behavior is the same.
Well, I'm lost. Am I missing something really simple?
Is this approach a good way to make a two column layout? I inspired myself reading the CSS from the Svbtle blogs.
Generally speaking, absolute positioning should be avoided unless you really do want the element removed from the document's flow. If you have a page where #main ends up having shorter content than #sidebar and the user's display isn't tall enough to display all of #sidebar's contents, you're going to have your content clipped off.
My favored way of achieving equal height columns is to use the display: table CSS properties.
http://jsfiddle.net/PmkCQ/3/
html,body {
margin:0;
padding:0;
width:100%;
height:100%;
}
body { display: table }
#sidebar {
width:25%;
border-right:1px solid #222;
background-color: #E0E0E0;
}
#sidebar, #main {
display:table-cell;
vertical-align: top; /* optional */
}
h1 {
padding:2%;
margin-top: 0;
/* margin:0; */
/* defining the margin as zero aligns
* everything at the top */
}
There's other ways, of course, but this one is less brittle than floats or absolute positioning. The only down side is that IE7 doesn't support these properties, so they'll continue using the element's previously defined (or default) display setting (for div, it will be block).
Add display: inline-block to the h1 and it won't influence the side bar. Then you can set any margin you want.
The reason it seemed fine in JSFiddle is probably the styles applied from their styles (inspect the h1 and you'll see it has margin:0).
Related
This is my CSS code:
#outer {
width:580px;
padding:10px;
float:left;
}
.inner {
width:560px;
padding: 10px;
background-color:#fff;
color:#666666;
}
And the HTML:
<div id="outer">
<div class="inner">
... a lot of content
</div>
</div>
My problem is the background-color for the inner div doesn't extend to fill the entire div alongside its content. I've had this problem quite often, and my solution has usually been to specify a height for #inner, which makes the background fill #inner accordingly. However, I don't want to specify a height explicitly because it's dynamic content. What should I do to make the background-color fill the div as it extends?
Set the position of each element, with the inner element needing to be absolute, and then just tell the inner div to always fill the outer one with height: 100%. The only care that you have to take with this is that setting the position of inner to absolute will then make it ignore floats, but presumably you are taking care of that with outer.
(I changed the background color to red in this answer to make it more obvious what is going on.)
This is my CSS code:
#outer {
position: relative;
width:960px;
height: 500px;
}
.inner {
position:absolute;
height:100%;
width:400px;
background-color: red;
}
And the HTML:
<div id="outer">
<div class="inner">
... a lot of content
</div>
</div>
I couldn't replicate your issue. If you don't specify a height for '.inner', the background color should extend dynamically as '.inner' fills with content.
You might be having an issue due to a lack of a CSS reset. Each browser has a set of standard css rules it applies to all pages, unless you override these rules.
I recommend adding a CSS reset in your above all your current css.
A very basic but popular reset is by Eric Meyer, found here: http://meyerweb.com/eric/tools/css/reset/
Let me know if that helps, and if not try posting an image of what you are experiencing.
Btw, this is how your code renders for me:
The padding of the outer element will always show the background color of the outer element...
Just remove the padding there.
#outer {
width:580px;
/* padding: 10px;*/
background:red;
border:1px solid green;
}
.inner {
width:560px;
padding: 10px;
background-color:lightblue;
color:#666666;
}
I know it sounds really weird, but I'm trying to code a website with very little CSS knowledge. It's just a test website, so that I can get into the language a bit more, but I'm having some troubles. I can't find the answers anywhere. In case necessary, I've included the HTML and CSS files at the bottom.
1. Center Body
I was wondering how to center the body of my website? I know it seems simple, but I've looked on every single Google link and I can't find a solution. When I zoom in to test my website on 175% zoom increase, as that's what most monitors have at least, I notice that my browser is scrolling in to the left side of the website, rather than the center. I would like the elements of the website to be in the center, so that it doesn't end up with a blank space on the right like YouTube has for larger monitors. However, I have no idea on whether or not there is there a way I can make the website zoom to the center?
2. Multiple Images
When I was slicing the website layout I made, I took three images from one of the 'rounded rectangle' shapes. My aim is to make it so I can have the shape become expandable, meaning that it'll be a small box [ ] for small numbers, but if the number has more digits, the box can expand without breaking the website. Because of this, I sliced the LEFT and RIGHT side of the content box, as well as a 1px inside which I hoped to expand. I have no idea where to look for a tutorial, however, on how to make them all work together. If somebody could point me in the right direction, I'd be extremely grateful.
3. Following
Resolved - a huge thanks to Nicole Bieber who helped me out! :-)
Many thanks.
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> .. </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
..
<div id="header"></div>
<div id="navigation">
<div class="founders2">
<div id="left_content">
<div class="news">Latest News & Information</div>
<div id="right_content"></div>
</div>
<div id="footer"></div>
</body>
</html>
CSS:
#logo {
background:url(images/main/logo.png) top left no-repeat;
width:391px;
height:148px;
font-size:0px;
margin:-10px 0 0 0;
float:left
}
body {
margin:0px;
padding:0px;
background:url(images/main/bg.gif) repeat;
#31
}
#header {
margin:0 auto;
width:100%;
height:147px;
background:url(images/main/header_bg.gif) repeat-x;
}
#navigation {
width:100%;
height:500px;
background:url(images/siteSlice_13.gif) repeat-x;
}
#founders1 {}
#left_content {
float:left;
width:910px;
height:100%;
}
#right_content {
float:right;
width:490px;
height:100%;
}
#footer {
margin:0 auto;
clear:both;
width:100%;
height:77px;
background:url(images/siteSlice_96.gif) repeat-x;
}
/**
* Needs to be aligned vertically.. no idea how.
**/
.news {
font-family:ubuntu;
font-size:25px;
color:#FFFFFF;
text-shadow: 2px 2px #000000 12;
text-align:left;
text-indent:15px;
width:100%;
height:100%;
background:url(images/main/news_header.gif) no-repeat;
margin:100px;
}
.founders2 {
background:url(images/main/founders_navbar.gif) no-repeat;
width:265px;
height:52px;
margin:0 0 0 600px;
}
Anything not in the /main/ image folder hasn't been re-edited by myself yet, but is still a basic image that should act in the same way as when a new one replaces it.
Centered Page Content
One way you could center the body of a fixed width page layout with could be done with Auto Margins, as I will show in the following example
This is a basic example with only a div element which will be our website container.
You can apply a fixed with either to the container or to the body, and apply the automatic margins to the container itself...
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My Website</title>
<link href="center.css" rel="stylesheet" type="text/css">
<!---
other header and meta stuff ...
--->
</head>
<body>
<div id="box_content">
<p>
My Content Area.
</p>
</div>
</body>
</html>
and the CSS for the above:
CSS for Center Aligned Content using Centered Body
In this CSS example for the above HTML code, we center our container (div) element by applying a fixed width to the Body element, and assigning Auto margins to the same element. The margins will expand evenly on both sides to preserve the fixed 800px with, thus centering the page:
#charset "utf-8";
/* CSS Document */
body{
/*
Applying a fixed width with automatic margins will center the page:
*/
width: 800px;
margin-left:auto;
margin-right:auto;
/*
and whatever...
*/
margin-top: 5px;
margin-bottom: 0px;
/*
Here we have a gray background so we can see the centered content area
*/
background-color:#CCC;
}
/*
Our content area will be white so we can see it centered over the gray background.
*/
#box_content{
background-color:#FFF;
overflow:auto;
padding:5px;
}
However, you can also apply the fixed width to the container itself instead.
The following example works with the above HTML code.
CSS Example with centered div element
#charset "utf-8";
/* CSS Document */
body{
/*
Here we have a gray background so we can see the centered content area
*/
background-color:#CCC;
}
/*
Our content area will be white so we can see it centered over the gray background.
*/
#box_content{
/*
Applying a fixed width with automatic margins will center the page,
will also work on the container itself:
*/
width: 800px;
margin-left:auto;
margin-right:auto;
/*
and whatever...
*/
margin-top: 5px;
margin-bottom: 0px;
background-color:#FFF;
overflow:auto;
padding:5px;
}
Both of the above CSS examples look exactly the same. (Should look the same on all the modern web browsers ).
There are various other ways to center using CSS ( including setting Position to 50% with a -400 margine, but this breaks on some renderers ).
The approach I have demonstrated is simply my simple but my preferred approach to centered fixed width layouts.
Also, I removed the 100% width values on your nested elements that dont need them ( div elements will default to 100% width anyhow )
100% Height will not work, a div element will not expand vertically to its container, unless you use absolute positioning ( but will expand to page size, and not the parent container size ). DynamicDrive has examples on how to do this.
Also looking at your Source, I suggest changing the following:
font-family:ubuntu;
Because it is not a font family recognized by all operating systems, so visitors to your web page will most likely not see the same fonts you see on your own system. unless you use ServerSide Fonts.
If you don't use a server side font, it would be best to stick to common fonts and font families that (usually) exist on all major operating systems if you want all users on all major operating systems to see the same font regardless of whichever web browser they use.
3 Slice Buttons
One again - there are more than one way to do this. One of the easier ways to do it would be to layer 3 divs and apply a slice to each layer. The following example is from a simple resizable button in one of my own template designs, a simple box-model button to say the least.
Note: I think nesting div elements in a << a >> hyperlink is considered a bad practice? Although I do it anyhow ... I could be wrong.
HTML
<a href="contact.php" style="float:right">
<div class="b_1"><div class="b_2"><div class="b_3">
Contact
</div></div></div>
</a>
The CSS for the above button:
/*
Contains the left slice of the button:
*/
.box_nav a .b_1{
float: left;
margin-top: 3px;
background-image: url(ui/ui_19.png);
background-repeat: no-repeat;
}
/*
Contains the Right slice of my button:
*/
.box_nav a .b_2{
background-image: url(ui/ui_23.png);
background-repeat: no-repeat;
background-position: right;
}
/*
COntains the tiled center slice of the button
*/
.box_nav a .b_3{
background-image: url(ui/ui_21.png);
height: 43px;
margin-right: 10px; /* This margin is the same width as the RIGHT slice */
margin-left: 10px; /* This margin is the same width as the LEFT slice */
line-height: 40px; /* my way of centering text vertically in the button */
text-align: center;
/*
prevents buttons with more than one word ( has spaces ) from breaking into two lines
*/
white-space: nowrap;
}
.box_nav a:hover .b_1{
background-image: url(ui/ui_24.png);
}
.box_nav a:hover .b_2{
background-image: url(ui/ui_28.png);
}
.box_nav a:hover .b_3{
background-image: url(ui/ui_26.png);
}
As seen above, this is a box model structure. The box_nav itself however requires "overflow:auto;" or "overflow:hidden;" however if height is not set explicitly.
The above button from my actual example looks like this:
Final Section
As for your 3rd question, I don't actually understand what you are asking, and the html/css combination breaks in my browser when I copy your code. ( also I cant see it properly because I also don't have your images. I'm not sure what you were trying there, but i looks like your were trying a 3 column layout?
Your html for this section pretty much completely falls apart in my browser ( and also in dreamweaver )
UPDATE:
As requested by you, here are two ways to do fluid layouts:
In this example, you can use the same automargins with a fluid width like this ( simply modify the fixed 800PX width to a fluid width, such as 80%
width: 80%;
margin-left:auto;
margin-right:auto;
If you want fixed margins with a fluid layout, you can simply set margins, but do not set a width:
width: auto;
margin-left:100px;
margin-right:100px;
Introduction
There are many good and well tested recipes for a footer that is always as the bottom of a page but is not fixed (or overlap content). Here is one that works for me: http://ryanfait.com/sticky-footer/
In short it works like follows:
HTML:
<html><body>
<div id="wrapper>SOME CONTENT</div><footer></footer>
</body></html>
CSS:
* {
margin: 0;
}
html, body {
height: 100%;
}
#wrapper {
min-height: 100%;
height: 100%;
margin: 0 auto -4em;
}
footer {
height: 4em;
}
The trick is that #wrapper is forced to use 100% of available height, but is margin bottom leaves some space for a footer (negative margin is exactly the size of the footer).
Problem description
While building a Single Page Application, some javascripts frameworks like Ember.js adds additional divs to our document structure (for example to handle events). This creates an addtional wrapper around our original document which may look like this:
<html><body>
<div class="framework-container">
<div id="wrapper>SOME CONTENT</div><footer></footer>
</div>
</body></html>
This additional div breaks our CSS setup. To improve the situation we want to say that framework-container should behave exactly as body, so we may try to add:
.framework-container {
position: relative;
height: 100%;
min-height: 100%;
}
And it almost work: if the content is smaller than the page height. Otherwise there is a noticeable distance between the footer and bottom of the page - which we cannot accept.
Does anyone know a pure CSS solution to this problem?
I'm not sure if you said the wrapper worked or not, but you can tell Ember to insert the application into a particular element, and it won't insert any elements outside(above) that element.
Set the root Element
App = Em.Application.create({
rootElement: '#body'
});
HTML
<div id="container">
<div id="header">I'm a header</div>
<div id="body"></div>
<div id="footer">I'm a footer</div>
</div>
CSS
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
http://emberjs.jsbin.com/OPaguRU/1/edit
I totally jacked some of this from: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
I made this:
HTML:
<body>
<div id="header" >
</div>
<div id="main" >
</div>
<div id="footer" >
</div>
</body>
CSS:
body
{
margin:0px;
}
#header
{
width:100%;
background-color:black;
height:60px;
}
#main
{
width:300px;
border:1px dotted black;
margin:0 auto;
}
#footer
{
width:100%;
background-color:black;
height:40px;
position:absolute;
bottom:0px;
}
http://jsfiddle.net/VpwQQ/2/
But as you can see, the main div doesn't have a height.
Then I replaced my css by that:
body
{
margin:0px;
}
#header
{
width:100%;
background-color:black;
height:60px;
}
#main
{
width:300px;
border:1px dotted black;
position:absolute;
margin:0 auto;
bottom:60px;
top:80px;
}
#footer
{
width:100%;
background-color:black;
height:40px;
position:absolute;
bottom:0px;
}
http://jsfiddle.net/VpwQQ/1/
But then, the horizontal center doesn't work.
How can I do this design (div centered and that takes all the page in height between the header and footer with a 20 px magin) ?
I'm not sure what you're trying to do, but I'll give my explaination of what's going to happen with your code:
Your #main div doesn't have a height because it doesn't have a height CSS property, nor does it have any content.
You should add either a height: 100px or just add some content and you will see it gets a height.
The reason why I ask what you want to do is because you're not very clear as to what you want your final product to look like.
You're going to have another problem with the footer. If you use position absolute it sticks to the bottom at the moment. Set the height of the #main div to something ridiculously high and you'll see that when you have to scroll down the page the footer stays where it is. See http://jsfiddle.net/VpwQQ/3/
You should use position: fixed but this will keep it on the bottom of the WINDOW and not the DOCUMENT. So then you get into the problem of having to use Javascript in order to measure the document height and setting positions appropriately. Not sure what you're trying to do, but if you're just trying to lay out a website then use standard relative positioning to push the footer down naturally below the #main div.
Edit:
See http://jsfiddle.net/VpwQQ/4/ if you're just trying to set up a normal website layout.
If you want the footer to "stick" to the bottom of the page all the time then you will need to use position: fixed but I don't think this works across all browsers. See http://jsfiddle.net/VpwQQ/6/
Lastly, to get both footer and header to "stick" see http://jsfiddle.net/VpwQQ/8/
I added a div inside #main.
Main now has a 100% width.
Inside, put a div of 300px, with no absolute position.
I forked your fiddle: http://jsfiddle.net/8U9P6/
Personnally I prefer the javascript solution and not using the absolute position. But this solution seems to work.
Add and overflow to contain the content in the inside div: http://jsfiddle.net/M2nZc/
Note that the page will not grow as it is absolute position.
You can't use automatic margins on an absolutely positioned element, as it's not in the document flow any more.
Use width: 100% on the #main div, then put another element inside it that you center using automatic margins.
Demo: http://jsfiddle.net/Guffa/VpwQQ/9/
Note: You may need to use height: 100% on the body and html elements for the bottom sizing to work on the #main element.
Once you fill your #main div with content, it will automatically gain height according to the content. You can simply fill it with a few paragraphs of lorem ispum to simulate content. You can now remove the absolute position and positioning CSS.
Centering a div using the "0 auto" shorthand only works when the parent element (which, for the #main div, is the body element) has a defined width. To do this, try giving your body element a width of 100%. Doing this is something that you might want to make a habit of in you CSS.
To have your #main div always be 20px below the #header div, simply add 20px of margin-bottom to your #header div. Do the same below the #main div to space the footer.
Summed up (without the footer at the bottom, for now) your CSS might read something like this:
body {
width: 100%
margin: 0px;
}
#header {
width: 100%;
height: 60px;
margin-bottom: 20px; /*here we space the header 20px from the next element*/
background-color: black;
}
#main {
width: 300px;
margin: 0 auto 20px auto; /*we append the margin to include 20px of spacing at the bottom*/
border:1px dotted black;
}
#footer {
width:100%;
height:40px;
background-color:black;
}
Example: http://jsfiddle.net/WEx3j/
If you want the footer to be 'sticky' (always be at the very bottom of your website), I advise you to employ this method.
I hope this clarified a few things.
I have 2 DIVs, one containing a map, this one is above the other one. It should take all space available, except for the footer, which is 25px high.
Currently I give the map 95% of the height, and the footer 25px. Problem is when the windows gets really big, the footer becomes enormousness, and when the windows becomes really small, scroll bars kick in.
However, this is not what I want, I want:
#map { height: <window_height - footer_height> }
#footer { height: 25px }
How could I achieve this using only CSS and HTML?
PS. I know there probably are some simple javascript solutions, but for educations sake, I want to know how to do this without javascript.
Have a look at this:
keeping footers at the bottom of the page
All the code is there.
Basically you do this in your HTML:
<html><body>
<div id="container">
<div id="map"></div>
<div id="footer"></div>
</div>
</body></html>
And then in your CSS:
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#map {
padding:10px;
padding-bottom:25px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:25px; /* Height of the footer */
}
There are other ways to achieve this and similar effects.
Let know if this is what you wanted.
Hope this helps.