Centering content without divs - html

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>

Related

How to leave white space on both sides of page?

My client wants the background to have white spaces on sides(weird?), but I couldn't find the solution.
Basically I want to have a background and white on sides for wide screens.
NOTE AND IMPORTANT: I need this on body.
How can I do this?
Try something like this CSS on your body
body { width: 974px; margin: 0 auto; }
The margin statement means that you give your body a top- and bottom-margin of 0. The auto-value means that however much horizontal space remains after you've used up 974px, will be evenly split to add the whitespace on each side of the body.
If you don't have a wrapping container like <header>, <section> that you can apply this width to, you might find yourself a little restricted when it comes to placing content like background-images and such that should display on the sides of the body. You will be left with only the html-element as a parent to the body so that doesn't offer a lot of layers or hooks where you can add advanced styling for decoration and such... just a word of caution :)
You give your container a width (say, 1000px), and then use margin: auto on it.
Demo
HTML
<body class="outerwrapper">
<div id="innerwrapeer" class="innerwrapeer">
</div>
</body>
CSS
body {
width:1024px;
height:auto;
background-color:white;
}
.innerwrapeer {
width:800px;
height:auto;
background-color:red;
}

Force whitespace to appear between fixed-width div and the right side of page

I have a question for the front-end web development experts out there which is stumping me.
On my page, I have a sidebar which is fixed on the right side of the page, and then a large block of content (fixed-width) that takes up more than the width of the browser window. The problem is, the content on the far right side of the div can't be seen because it's behind the fixed sidebar.
Here is a super stripped down example of my issue in jsFiddle.
EDIT: Here is a more complete example of my issue.
I thought that simply applying padding-right: "width of sidebar"px to either the body or to a wrapper div, or applying margin-right: "width of sidebar"px to the content div should fix the issue, but neither works. I don't want to resort to putting in a filler div unless there is no way to accomplish this effect with CSS.
I did a search for the issue on google and so, but all I found were questions about how to remove whitespace from the right side, which is the opposite of what I want to do.
Thanks to anyone who can solve this stumper!
EDIT: After seeing a multiple questions about why I can't simply set things up differently, I thought I'd clarify by showing a more in-depth example of what I'm trying to accomplish. You can see that here. The columns in the table must be fixed-width, and I want to be able to see the full contents of the last column. Hope that helps clarify things!
I know you already came up with a jquery solution, but I think you could get by with a simple css rule:
tr td:last-child { padding-right: 100px; }
It just sets padding on the last td in each tr, equal to the fixed right sidebar width.
I made the wrapper position absolute with a left 0 and right of 110px, which you also can put on the content div instead of the wrapper. Just to give you a hint... See http://jsfiddle.net/aHKU5/98/
#wrapper {
position: absolute;
left: 0px; right:110px;
border: 1px solid red;
}
Edit
I also create a version with a max-width that makes sure the content will never exceed 900px, but if there is less room it will respect the sidebar as well... http://jsfiddle.net/aHKU5/102/
#wrapper {
position: absolute;
left: 0px;
max-width: 900px;
margin-right: 110px;
border: 1px solid red;
}
I know you wanted fixed width, but this works how you want I believe without worrying about user screen resolution. I just added float:right and width:100%; to the content div and it looks good to me. Try this code:
#content {
border: 1px solid #444;
background: #aaa;
height: 400px;
width: 100%;
float:right;
}
So I figured out a solution to my issue. I simply used jQuery to set the width of the body to the width of the table plus the width of the right sidebar. Worked like a charm.
Here's the code I used if future developers stumble upon this page with the same question:
$('body').css('width', $('table').width() + 150 + 'px');
Where 150 is the width of the sidebar.

css margin left and right issues

i want to get the bit at the top of some websites that really thin and right at the top. which looks like facebooks blue banner at the top of their website.
the code i have tried for the above is:
<div style="height:20px; background-color:grey; margin-top:-10px; "></div>
and it works apart from theres just a little bit of white space at the right and left sides of the grey.
Does anyone know what i am doing wrong?
It sounds like you haven't cleared the padding/margin on the body element. Give this a go:
html, body
{
padding: 0px;
margin: 0px;
width: 100%;
}
Also, give your div a width of 100%:
div
{
width: 100%;
}
I've probably gone a bit overboard with the CSS, but it will make sure everything works.
Additionally, make sure there is an HTML doctype defined - this can cause some other problems later one, such as :hover not working.
You need to use margin:0 on the html and body tags. This will allow your div to take up all the available horizontal space, and put it right at the top instead of having a small space.

Centering entire page with CSS

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);'

How do I keep a DIV from expanding to take up all available width?

In the following HTML, I'd like the frame around the image to be snug -- not to stretch out and take up all the available width in the parent container. I know there are a couple of ways to do this (including horrible things like manually setting its width to a particular number of pixels), but what is the right way?
Edit: One answer suggests I turn off "display:block" -- but this causes the rendering to look malformed in every browser I've tested it in. Is there a way to get a nice-looking rendering with "display:block" off?
Edit: If I add "float: left" to the pictureframe and "clear:both" to the P tag, it looks great. But I don't always want these frames floated to the left. Is there a more direct way to accomplish whatever "float" is doing?
.pictureframe {
display: block;
margin: 5px;
padding: 5px;
border: solid brown 2px;
background-color: #ffeecc;
}
#foo {
border: solid blue 2px;
float: left;
}
img {
display: block;
}
<div id="foo">
<span class="pictureframe">
<img alt=''
src="http://stackoverflow.com/favicon.ico" />
</span>
<p>
Why is the beige rectangle so wide?
</p>
</div>
The right way is to use:
.pictureframe {
display: inline-block;
}
Edit: Floating the element also produces the same effect, this is because floating elements use the same shrink-to-fit algorithm for determining the width.
The beige rectangle is so wide because you have display: block on the span, turning an inline element into a block element. A block element is supposed to take up all available width, an inline element does not. Try removing the display: block from the css.
Adding "float:left" to the span.pictureFrame selector fixes the problem as that's what "float:left" does :) Apart from everything else floating an element to the left will make it occupy only the space required by its contents. Any following block elements (the "p" for example) will float around the "floated" element. If you "clear" the float of the "p" it would follow the normal document flow thus going below span.pictureFrame. In fact you need "clear:left" as the element has been "float:left"-ed.
For a more formal explanation you can check the CSS spec although it is beyond most people's comprehension.
Yes
display:inline-block is your friend.
Also have a look at: display:-moz-inline-block and display:-moz-inline-box.
The only way I've been able to do picture frames reliably across browsers is to set the width dynamically. Here is an example using jQuery:
$(window).load(function(){
$('img').wrap('<div class="pictureFrame"></div>');
$('div.pictureFrame').each(function(i) {
$(this).width($('*:first', this).width());
});
});
This will work even if you don't know the image dimensions ahead of time, because it waits for the images to load (note we're using $(window).load rather than the more common $(document).ready) before adding the picture frame. It's a bit ugly, but it works.
Here is the pictureFrame CSS for this example:
.pictureFrame {
background-color:#FFFFFF;
border:1px solid #CCCCCC;
line-height:0;
padding:5px;
}
I'd love to see a reliable, cross-browser, CSS-only solution to this problem. This solution is something I came up with for a past project after much frustration trying to get it working with only CSS and HTML.