I am attempting to center my entire page using only CSS and it is proving more complicated than i first expected. Currently my code works in IE but not in Firefox which makes a change. The page can be seen here. Below is the code portion involved:
#wrap {
width: 960px;
margin: 0 auto;
padding: 6px;
background: #FFFFFF;
}
The structure of my HTML is:
<body>
<div id="wrap">
Gubbins in here.
</div>
</body>
It seems that in Firefox everything following the wrap div is be created outside of it. This is problem is resolved if i add a 'float: left' to the wrap div but then obviously everything floats left rather than center.
Any help would be greatly appreciated.
Change your markup to
<body>
<div id="wrap">
Gubbins in here.
</div>
</body>
EDIT: Looking at the link, you've already done that. You'll want to either add overflow:auto; to #wrap or add a clearing div at the end just before the closing tag on the wrap div.
Also, on your example page, the wrap div is missing its closing tag.
Use this CSS:
body { text-align:center;}
#wrap {text-align:left; margin: 0 auto; width:960px;}
Then, let's examine this statement from your question:
everything following the wrap div is be created outside of it
That's kind of the way it works. Don't put anything outside of your wrap div. Think of it as a surrogate body.
If you know the width of your page - and it's fixed, you can use the following methodology.
Contain your page content with a div (which will act as a wrapper)
Give this 'wrapper' div a width of 'W'
Position the wrapper div using 'left: 50%;'
now, utilising the fact that it's possible to have a negative margin...
Pull back the positioning of the wrapper div using 'margin-left: -(W/2);'
Related
https://jsfiddle.net/17nc164k/1/
I've been searching all evening and had no luck finding what I'm after, so I've resorted to asking the community here!
I'm currently developing a Wordpress plugin that adds a fixed newsletter signup bar at the bottom of the page. As this is position:fixed it's taken out of the flow, and as such the issue is that it overlaps the bottom of the page. To fix this I've added this code which creates some space after the body tag:
body:after {
content:'';
display:block;
height:52px;
width:100%;
}
This works well, but when testing with different themes I noticed for some reason on some of them the <body> tag is collapsed, it has no height whatsoever. As a result the body:after is right at the top and not doing its job adding a space at the bottom. My thoughts are to fix this is to get the <body> tag to expand and contain it's children, that however seems easier said than done.
Nearly all the suggestions I've seen say this:
html { height:100%; }
body { height:100%; min-height:100%; }
Currently on this theme the <html> element is fine, and contains the whole page (838px height) but if I add html { height:100%; } it goes to the height of the viewport. But without adding that the body { height:100%; } code does nothing.
There are a tonne of questions out there about expanding the <body> to fit the viewport, but I've not found anything that solves this yet. Totally happy to be proven wrong as I'm sure it's addressed somewhere but after a couple of hours of head banging and no light at the end of the tunnel I've resorted to asking here.
The min-height should apply to both the body and the html:
body, html { min-height: 100% }
This way, both will take up at least the viewport height, but will expand more if the content is more than the viewport height.
Update: if the body has no height because it's contents are floated, you can set clear: both on your :after element.
Don't use the :after pseudo element. Just give the <body> tag some padding at the bottom. It will be much more cooperative and also has better browser support.
body {
padding-bottom: 52px
}
If the html element has the correct height, you could set the body element to:
body{
height:inherit;
}
This should set it to have the same height as the html.
I'm currently creating a website and I came across a strange thing: I have a content div that's 950 width and centered on the page. Inside that I have a header div, a menu div and some other content div. I would like the menu div and that other content div to be right next to each other so I thought about using float:left on both divs. However, when I use this float:left on the menu div, it's getting pushed to the right and I can't figure out why. I think some other element is pushing it to the right.
I'm using a custom Drupal theme, a subtheme of Zen to create the page by the way.
Here's the HTML I'm using to create the page (without the header):
<div id="root">
<div class="content">
<div class="left-menu">
<ul>
<li><p>Camera</p></li>
<li><p>Audio</p></li>
<li><p>Licht</p></li>
<li><p>Lenzen</p></li>
<li><p>Grip</p></li>
<li><p>Accessoires</p></li>
<li><p>Recorders</p></li>
<li><p>Transport</p></li>
<li><p>Edit suits</p></li>
<li><p>Crew</p></li>
</ul>
</div>
<div class="products-overview">
This is some other content that I want to the right of the menu.
</div>
</div>
And here are some CSS properties I've set on left-menu and products-overview:
.left-menu {
margin-top: 10px;
background-color: #BBB;
width: 150px;
float: left;
}
.products-overview {
background-color: #BBB;
float: left;
}
Could anyone please explain me why the left-menu is being pushed to the right?
Hmm, I believe this is a result of the normalize.css stylesheet you're using.
The problem stems actually from the .header element, which has a table within it. The normalizing stylesheet has a margin-bottom:1.5em applied to the table, which translates into a margin on the .header element (since it has no padding/border), which in turn sends the .left-menu to the right (since the margin causes there to be no space for it to fit on the left).
Adding to your current .header table definition can fix this, with a simple:
.header table{
margin-bottom: 0;
}
I hope this is what you were looking for! If not, let me know and I'll be happy to help further. Good luck!
I tried to replicate your problem. I did and found a solution that should work. Just set the products-overview class to float:none. See this fiddle. http://jsfiddle.net/shaansingh/yj4Uc/
In Mozilla Firefox it looks ok to me. From your code, I can only see that you need a width for the content div. and watch the dimensions, especially left/right padding and borders.
I recently ran across this "article" that explains how to center content with only the use of the html and body tag. But what I can't not figure out is how to make a full width header and footer while still having my content centered using this method. Any suggestions?
I don't think you can, if you use the body tag as a div, then any other divs inside it will only have the width of the body tag. So
body {
width: 200px;
margin: 20px auto;
padding: 20px;
border: 1px solid black;
}
will make any divs have a maximum width of 200px.
see this jsfiddle.
this article explains, that you can center content with
margin: 20px auto;
you need to give the footer and the header the same css.
at least, it would be easier, more readable and structured, if you use div-blocks. that is, what div-blocks are for...structure your website.
EDIT: I mis-read the question and rewrote my answer as this:
There are two ways to accomplish what you want. First is to absolutely position the element which will take it out of the flow and allow you to expand the width outside of the body but this can complicate some elements. The second is to use negative margins. I'm being pulled away but I'll try and give an example later if no one else does.
EDIT: Slapped this together real quick.
<!doctype html>
<style>
body{width:980px;margin:0}
p{position:absolute;width:100%;background:#ccc;}
</style>
<p>One</p>
I want to make a header like http://www.chacha.com (doesn't move, is about that wide and that height, and able to fit divs inside it and also has to be an image)
I am starting off with a blank html document and a blank css page, so there I haven't currently written any code.
I've been trying two days straight to do this now so I would really appreciate any help anyone can provide.
I have gimp so if anyone could also give me image dimensions for a perfect header and perfect background size I would appreciate it even more.
CSS:
#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 10px;
background: url(yourimage.png) repeat-x;
}
<!--html -->
<div id="header"></div>
That should give you a starting place, I can't tell you more without seeing exactly what the layout's supposed to be.
The CSS property you're looking for is position: fixed which will position the element relative to the viewport. This is good breakdown of positioning: https://developer.mozilla.org/en-US/docs/CSS/position
In this specific case, what you've got is an element with styles roughly along these lines:
#header_id {
position: fixed;
width: 100%;
height: 35px;
}
You don't have to set the height, but unless there is content in the fixed element, it will collapse if there is no height specified. They also appear to have put a drop-shadow on the element toget the neat floating effect.
If you want to have an image inside, you can just put the <img> inside the header element, or use it as the background-image url in the CSS and position it with background-position (see also: https://developer.mozilla.org/en-US/docs/CSS/background-position although the compatability table at the bottom is important if you want to do anything too specific with this property).
You can do this with any block-level element (or any element with display:block set on it). In your example they are using the HTML5 <header> tag; a <div> would work, too, if <header> wasn't appropriate for your page.
I would recommend using the Firebug addon with Firefox (or similar developer consoles with other modern browsers) -- you can right click on an element on the page and select 'Inspect element' from the dropdown menu and get a breakdown of both the markup and styling to see how other websites are constructed. Very useful for when you're browsing the internet and you see something and think, 'that's a neat trick, how does it work?'
FOR FULL WIDTH FIXED HEADER
header {
width:100%;
background:green;
height:60px;
margin:-8px;
position:fixed;
}
FOR NONFULL WIDTH FIXED HEADER
Create a div and set width and height (you can also set it left or right by float:left, float:right)
then in this div put the code above but without margin:-8px; and change the width to the width that your div has.
Here is a test
I would like to have a border around the entire body of my web page.
I have created a layout that has a body with several div tags inside of it. I added CSS that I assumed would put a border around all content. Unfortunately the last two divs in my layout are, for some reason, being placed outside of the border.
This is the CSS I am using for the body:
body
{
position:relative;
top:5px;
width:1024px;
background-color: #f7f7f7;
padding: 5px;
border:1px solid #151515;
margin:auto;
font-family:Calibri;
}
I suspect that the reason the border is not displaying as I wish has nothing to do with this CSS. You can view the site here if you would like to see the complete CSS/HTML: http://sprocket-tools.com/
I won't bloat this post by including the verbose HTML/CSS. If you need more details on the HTML/CSS aspect please visit the link.
You have floated your DIVs, which causes the parent element to collapse. You need to have an element below them that clears, forcing the parent element to not behave this way.
<div style="height:0px; clear:both;"></div>
Put that above your </body>. That should do.
See this: http://css-tricks.com/all-about-floats/ Start with the section, "The Great Collapse"