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"
Related
I have a html structure given like below :
I am trying to place the highlighted div after the div#content
A bit of background:
I have the below style rule :
html,body{
position:relative;
top:0;
height:100%;
left:0;
width:100%;
}
Also there are two nodes inside the div#content ie div#node-1 & div#node-2 and I have height:100% for both these elements. The idea
is to use these divisions as pages in the website which can be accessed
by scrolling down.
On applying the style rule, I get the below page.
I wanted to position the highlighted div at the very last ie after all the div#content stuff (The idea is to change it to footer later) but currently it is overlapping div#content (shown by the arrow). It appears between div#content div#node-2 & div#content div#node-1.
I have no idea why this is happening. Any suggestions are appreciated.
Edit:
See the sample jsfiddle here.
I am trying to position a footer under #cont, but inside the #container.
I tried making it so that when there is more content in #content, it would keep the footer inside the div, and allow me to scroll the page, but I got lost. Any idea how I should do it?
http://jsfiddle.net/a9jv7/
As you can see, more content will push it down(because it's not inside the other div, but if it's not inside, I can't set the footer to always be on the bottom of the page)
You can change the floating elements to display: inline-block, so you have more control over them and the container will adapt to their height.
#footer {
background-color:#FFA500;
text-align:center;
max-width:960px;
width: 100%;
}
The example: http://jsfiddle.net/frapporti/TPbCG/
EDIT:
In general, I'd really like to advice you against the use of floating elements for layout, as they were pushed beyond they original intended use from the very beginning, and now we have flex who does magic :)
http://html5hub.com/after-float/
http://jsfiddle.net/Cerebrl/ZkQnD/
If I understood what you want to achieve correctly, than this is one way to do it:
http://jsfiddle.net/a9jv7/1/
On #container add:
border-bottom:30px solid transparent; // used to add spacing bottom
margin-bottom:-30px; // used to add spacing bottom
overflow:hidden; // to give the container height, because it has none since the elements inside it are float-ed; (google clear-float).
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've set a style on <html>:
html {
background: #ECECEC;
border: 1px solid #FFFFFF;
}
If the contents of the page are wider than the page, why does the border stop, but the background keep going?
Here's a fiddle that show the problem : http://jsfiddle.net/rPGyc/3
html is a proper block-level element, just like body, p, div, etc — it therefore observes all the same overflow rules as other block elements do.
However, the reason why the background of html bleeds past its border when content overflows its width (or when its width is less than 100% of the browser window, or viewport), is because the background color is propagated to the viewport, which is the canvas containing html and all its contents that are rendered. The border remains part of the html element, however, so the element doesn't expand when the content overflows. This behavior is very similar to how applying a background to body, but not html, causes the body background to propagate to the root element anyway, as described in this answer which cites this section of the spec.
As Alohci notes in a comment under the answer, the same applies to html with respect to the viewport:
Note that html behaves with respect to the viewport in much the same way as body behaves with respect to html, with the background escaping beyond the confines of the html element. See http://jsfiddle.net/GmAL4/4/ to see what I mean.
Here's a little fix using jquery
$("html").width($(document).width());
$("html").css("border", "1px solid black");
I know it's lame that css alone don't seem to work fine but at least we can have the wanted result with jquery.
here'S the fiddle : http://jsfiddle.net/rPGyc/5/
A way to prevent that is using the css3 word-wrap property. Jsfiddle here
Simply add:
html{
background-color: lightgrey;
border: 1px solid #fff;
padding:0px;
margin:0px;
width:100%;
height:100%;
/*The important bit*/
word-wrap: break-word;
}
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);'