At the moment I have this (standard) code which gives me a full-width background but constrains the header to centered 960px:
<div style="background-color: #222">
<header style="width: 960px; margin: 0 auto;">
<h1>Site Title</h1>
</header>
</div>
Is there a way I can apply those to a single element in CSS, and avoid the div altogether? I considered this jQuery hack to calculate and set left and right padding on header but a pure CSS solution would be better.
Desired HTML:
<header>
<h1>Site Title</h1>
</header>
It might not be possible but thought I'd ask before dismissing it!
You can ditch the div wrapper in favor of :before and :after. Here's an article on it: http://css-tricks.com/9443-full-browser-width-bars/
The end of the article has a link to information on which browsers support :before and :after. For those that don't, you could use a javascript polyfill.
if it's for the whole page you can set the background on the <body> otherwise I think you'll need to use a <div> like you have.
Would something as this simple work?
header {
background-color: #222;
display: block;
width: 100%;
}
header h1 {
background: #fcc;
color: #000;
margin: 0 auto;
width: 960px;
}
Edit this jsFiddle: http://jsfiddle.net/t6wBv/2/
I take it this is HTML5 you're working with? There's no need to wrap a div around a header. This is one of the beautiful things about HTML5!
What I would do is give this particular header an ID, and stylize from there. For instance:
Your CSS file (or included CSS):
#title {
background-color: #222;
margin: 0 auto;
width: 960px;
}
Your HTML:
<header id=#title>
<h1>Site Title</h1>
</header>
This link kind of does the same thing you're looking to do!
Actually it is possible using just a single element. Thanks to the fact that padding in percentage refers to parent's width.
In fiddle I used div but it should work with header as well.
Related
Sometimes, I need to restrict section of a page to a fixed width. But the background should extend all the available space.
With CSS2 I used to do something like this (jsfiddle: http://jsfiddle.net/fniwes/wwVp4/)
css:
#container { background-color: #ddd; }
#content { width: 300px; margin: 0 auto; }
html:
<div id="container">
<div id="content">All the content inside container should be limited to 300px but the background should cover all the screen width</div>
</div>
The content here is just a plain text, but it is usually something more complex.
Is there a better way to accomplish the same result without the extra #content tag? I don't mind using CSS3 or something that is only supported by Chrome or Firefox.
Just for clarification. I want to remove #content tag. I want the markup to be
<div id="container">
All the content bla bla
</div>
(and I want to style no tag other than #container.. maybe it is not possible, but maybe there is something new in CSS3 or other proposal that I don't know)
There is the calc() function in css3, you can use that like this:
#container { background-color: #ddd; padding-left: calc(50% - 150px); padding-right:calc(50% - 150px);}
is there any specific reason you are against using a container div? You could do:
#content { background-color: #ddd; width: 100%; margin: 0; padding: 0 50%; }
But I wouldn't reccomend it and the best solution is still to use containers
I have a bunch of "strips" of images that all add up to one image. Now I need to border the completed image and put that box in the middle of a html page.
No matter what I try, I can't seem to center the <div> that contains the multiple <img> tags. I'm looking for a purely CSS solution with as little text as possible (as I need to create a bash script that produces this page).
Thanks,
Milan
edit:
Apparently i need to provide code, eventhough it's very simple:
<html><head>
<style>div{font-size:0px; border: 5px solid red; display:inline-block;}</style>
</head><body>
<img ...><img ...><img ...><img ...>
</body></html>
div{
width: 50%;
margin: 0 auto;
}
or, if you just want everything centered, use text-align: center; on the body.
<div style="text-align:center">
<div>This is the text to be centered</div>
</div>
To center horizontally, you can use the margin: auto; attribute in css
html, body { margin: 0; padding: 0; }
#centeredDiv { margin-right: auto; margin-left: auto; width: 100%;}
I made a CodePen that I think will solve this issue. Basically you're going to want to use
style="text-align:center"
on the container div
http://cdpn.io/IhLBK
Consider the following 2 cols html structure:
<div id="container">
<div class="left">some text</div>
<div class="right">some text</div>
</div>
CSS:
#container { overflow: hidden; }
.left { float: left; width: 200px; background: red; }
.right { overflow: hidden; background: green; }
The same code in jsFiddle - http://jsfiddle.net/vny2H/
So we have 2 columns. The left column width is fixed, the width of the right one is liquid.
If we remove the left column from html, the right column stretches to 100% of parent #container width.
The question is: can we change the order of the left and right columns?
(I need it for SEO)
<div id="container">
<div class="right"></div>
<div class="left"></div>
</div>
Thanks.
Added
There's one interesting method to reach what I want, but fixed column becomes not removable. The method is based on negative margin. http://jsfiddle.net/YsZNG/
HTML
<div id="container">
<div id="mainCol">
<div class="inner">
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
</div><!-- .inner end -->
</div><!-- .mainCol end -->
<div id="sideCol">
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
</div><!-- .sideCol end -->
</div><!-- #container end -->
CSS
#container { overflow: hidden; width: 100%; }
#mainCol { float: right; width: 100%; margin: 0 0 0 -200px; }
#mainCol .inner { margin: 0 0 0 200px; background: #F63; }
#sideCol { float: left; width: 200px; background: #FCF; }
So we have 2 ways:
Using "float" for the fixed column and "overflow: hidden" for the liquid. Fixed column becomes removable. But liquid one goes second in code.
Using negative margin. Liquid column goes first in code. But fixed one is not removable.
Is there a third way, when fixed column is removable and liquid one is the first in code?
Added
Half-decision has been suggested by #lnrbob. The main idea - using table-like divs. http://jsfiddle.net/UmbBF/1/
HTML
<div id="container">
<div class="right">some text</div>
<div class="left">some text</div>
</div>
СSS
#container { display: table; width: 100%; }
.right { display: table-cell; background: green; }
.left { display: table-cell; width: 200px; background: red; }
This method is suitable, when a fixed column is placed to the right in a site. But if we need it to the left - it seems to be impossible to do this.
Consider the semantics of the content you are marking up before anything else, that will almost always lead to a solution that has both decent markup and is search engine friendly.
For instance, is .right the main content of the page, and .left some supplementary information or navigation? In that case, mark it up as such and the search engines will do a good job of interpreting it the way you want them to. HTML5 provides many elements for just this purpose:
<div id="container">
<nav>
<ul>
<li>Home</li>
<li>etc.</li>
</ul>
</nav>
<article>
<h1>My nice, juicy content</h1>
<p>Cool stuff, huh?!</p>
<article>
</div>
Or for supplementary content you might consider <aside> or simply <div role="supplementary">.
Google will happily scrape that and recognise the difference between the navigation and the actual content, the idea that source order is important no longer applies to SEO in the same way it did a few years ago.
Because your elements have same height you can do this:
#container { overflow: hidden; position:relative; }
.left { float: left; width: 200px; height: 200px; background: red; position:absolute; top:0; left:0; }
.right { overflow: hidden; height: 200px; background: green; margin-left:200px;}
Fiddle page: http://jsfiddle.net/Ptm3R/9/
I still think that this is a rather pointless endeavour, because the only reason to try is for dubious SEO benefits. But, I've been dragged back to this question so many times that I'm going to bring something to the table.
If I was forced on pain of death to come up with a pure CSS solution, this is it - but I don't recommend it:
http://jsfiddle.net/RbWgr/
The magic is transform: scaleX(-1);. That's applied to .container to flip the visual order, and then also to the child divs so that the content of each div is not flipped.
It won't work in IE7, because I'm using display: table-cell.
It's not so hot in IE8 - any text looks horrible, as is usual with filters. But, it does work.
Extra div wrappers were required to make it work in Opera - and the text doesn't look perfect.
It works fantastically in other modern browsers (IE9, Chrome, Safari, Firefox), but applying transforms to a parent of "every element" might have unforeseen consequences.
To be honest, I'm not sure why you're boiling it down to having to use only two id's ( [#left / #right] OR [#mainCol / #sideCol] )...
Would it not be far easier to use the mainCol/sideCol solution you had in JSFiddle at http://jsfiddle.net/YsZNG/ and introduce a third class that could be applied to the main div in the absence of the sideCol programmatically.
As in http://jsfiddle.net/biznuge/aAE3q/4/
Sorry. I may well have missed the point of all this, but I've had previous gut wrenching agony with trying to work in fluid/fixed mixture sites so just thought I'd share my own feelings on the matter...
UPDATE
I provided a second answer to this now that I think works. Sorry to double answer but it seemed sufficiently different from my initial response that I thought it would stand on its own two feet.
Depends on your browser support requirements. For IE8 and above (and all modern browsers) you could use display: to set a table layout (still using your <div />'s of course.)
Here is an example -I've only added javascript so you can toggle whether the element is hidden or not easily :)
How about putting the left col inside the right one at the bottom?
http://jsfiddle.net/vny2H/32/
http://jsfiddle.net/biznuge/aAE3q/12/
this seems to satisfy the brief I think. Works in FF anyway, but I'm unsure how other browsers might react to the table type display attributes.
UPDATE
Have tested this in FireFox(4), IE(9), Opera(11), Safari(5)[Win] and Chrome(12) and the layout seems to be robust across all browsers.
Rather surprising really...
UPDATE FOLLOWING CLARIFICATION
thanks to #thirtydot for that
http://jsfiddle.net/biznuge/aAE3q/19/
Works ONLY in Firefox 4 as far as I can tell, after some brief checking... But it's a start...
I have heard a lot of my friends talk about using wrappers in CSS to center the "main" part of a website.
Is this the best way to accomplish this? What is best practice? Are there other ways?
Most basic example (live example here):
CSS:
#wrapper {
width: 500px;
margin: 0 auto;
}
HTML:
<body>
<div id="wrapper">
Piece of text inside a 500px width div centered on the page
</div>
</body>
How the principle works:
Create your wrapper and assign it a certain width. Then apply an automatic horizontal margin to it by using margin: 0 auto; or margin-left: auto; margin-right: auto;. The automatic margins make sure your element is centered.
The best way to do it depends on your specific use-case.
However, if we speak for the general best practices for implementing a CSS Wrapper, here is my proposal: introduce an additional <div> element with the following class:
/**
* 1. Center the content. Yes, that's a bit opinionated.
* 2. Use `max-width` instead `width`
* 3. Add padding on the sides.
*/
.wrapper {
margin-right: auto; /* 1 */
margin-left: auto; /* 1 */
max-width: 960px; /* 2 */
padding-right: 10px; /* 3 */
padding-left: 10px; /* 3 */
}
... for those of you, who want to understand why, here are the 4 big reasons I see:
1. Use max-width instead width
In the answer currently accepted Aron says width. I disagree and I propose max-width instead.
Setting the width of a block-level element will prevent it from stretching out to the edges of its container. Therefore, the Wrapper element will take up the specified width. The problem occurs when the browser window is smaller than the width of the element. The browser then adds a horizontal scrollbar to the page.
Using max-width instead, in this situation, will improve the browser's handling of small windows. This is important when making a site usable on small devices. Here’s a good example showcasing the problem:
/**
* The problem with this one occurs
* when the browser window is smaller than 960px.
* The browser then adds a horizontal scrollbar to the page.
*/
.width {
width: 960px;
margin-left: auto;
margin-right: auto;
border: 3px solid #73AD21;
}
/**
* Using max-width instead, in this situation,
* will improve the browser's handling of small windows.
* This is important when making a site usable on small devices.
*/
.max-width {
max-width: 960px;
margin-left: auto;
margin-right: auto;
border: 3px solid #73AD21;
}
/**
* Credits for the tip: W3Schools
* https://www.w3schools.com/css/css_max-width.asp
*/
<div class="width">This div element has width: 960px;</div>
<br />
<div class="max-width">This div element has max-width: 960px;</div>
So in terms of Responsiveness, is seems like max-width is the better choice!-
2. Add Padding on the Sides
I’ve seen a lot of developers still forget one edge case. Let’s say we have a Wrapper with max-width set to 980px. The edge case appears when the user’s device screen width is exactly 980px. The content then will exactly glue to the edges of the screen with not any breathing space left.
Generally, we’d want to have a bit of padding on the sides. That’s why if I need to implement a Wrapper with a total width of 980px, I’d do it like so:
.wrapper {
max-width: 960px; /** 20px smaller, to fit the paddings on the sides */
padding-right: 10px;
padding-left: 10px;
/** ... omitted for brevity */
}
Therefore, that’s why adding padding-left and padding-right to your Wrapper might be a good idea, especially on mobile.
Or, consider using box-sizing so that the padding doesn’t change the overall width at all.
3. Use a <div> Instead of a <section>
By definition, the Wrapper has no semantic meaning. It simply holds all visual elements and content on the page. It’s just a generic container. Therefore, in terms of semantics, <div> is the best choice.
One might wonder if maybe a <section> element could fit this purpose. However, here’s what the W3C spec says:
The element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline.
The <section> element carries it’s own semantics. It represents a thematic grouping of content. The theme of each section should be identified, typically by including a heading (h1-h6 element) as a child of the section element.
Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site's home page could be split into sections for an introduction, news items, and contact information.
It might not seem very obvious at first sight, but yes! The plain old <div> fits best for a Wrapper!
4. Using the <body> Tag vs. Using an Additional <div>
Here's a related question. Yes, there are some instances where you could simply use the <body> element as a wrapper. However, I wouldn’t recommend you to do so, simply due to flexibility and resilience to changes.
Here's an use-case that illustrates a possible issue: Imagine if on a later stage of the project you need to enforce a footer to "stick" to the end of the document (bottom of the viewport when the document is short). Even if you can use the most modern way to do it - with Flexbox, I guess you need an additional Wrapper <div>.
I would conclude it is still best practice to have an additional <div> for implementing a CSS Wrapper. This way if spec requirements change later on you don't have to add the Wrapper later and deal with moving the styles around a lot. After all, we're only talking about 1 extra DOM element.
You don't need a wrapper, just use the body as the wrapper.
CSS:
body {
margin:0 auto;
width:200px;
}
HTML:
<body>
<p>some content</p>
<body>
<div class="wrapper">test test test</div>
.wrapper{
width:100px;
height:100px;
margin:0 auto;
}
Check working example at http://jsfiddle.net/8wpYV/
The easiest way is to have a "wrapper" div element with a width set, and a left and right margin of auto.
Sample markup:
<!doctype html>
<html>
<head>
<title></title>
<style type="text/css">
.wrapper { width: 960px; margin: 0 auto; background-color: #cccccc; }
body { margin: 0; padding: 0 }
</style>
</head>
<body>
<div class="wrapper">
your content...
</div>
</body>
</html>
a "wrapper" is just a term for some element that encapsulates all other visual elements on the page. The body tag seems to fit the bill, but you would be at the mercy of the browser to determine what displays beneath that if you adjust the max-width.
Instead, we use div because it acts as a simple container that does not break. the main, header, footer, and section tags in HTML5 are just div elements named appropriately. It seems that there could (or should) be a wrapper tag because of this trend, but you may use whichever method of wrapping you find most suitable for your situation. through classes, ids and css, you can use a span tag in a very similar way.
There are a lot of HTML element tags that we do not use often or possibly even know about. Doing some research would show you what can be done with pure HTML.
Are there other ways?
Negative margins were also used for horizontal (and vertical!) centering but there are quite a few drawbacks when you resize the window browser: no window slider; the content can't be seen anymore if the size of the window browser is too small.
No surprise as it uses absolute positioning, a beast never completely tamed!
Example: http://bluerobot.com/web/css/center2.html
So that was only FYI as you asked for it, margin: 0 auto; is a better solution.
Centering content has so many avenues that it can't really be explored in a single answer. If you would like to explore them, CSS Zen Garden is an enjoyable-if-old resource exploring the many, many ways to layout content in a way even old browsers will tolerate.
The correct way, if you don't have any mitigating requirements, is to just apply margin: auto to the sides, and a width. If your page has no content that needs to go outside those margins, just apply it to the body:
body {
padding: 0;
margin: 15px auto;
width: 500px;
}
https://jsfiddle.net/b9chris/62wgq8nk/
So here we've got a 500px wide set of content centered at all* sizes. The padding 0 is to deal with some browsers that like to apply some default padding and throw us off a bit. In the example I do wrap the content in an article tag to be nice to Screen Readers, Pocket, etc so for example the blind can jump past the nav you likely have (which should be in nav) and straight to the content.
I say all* because below 500px this will mess up - we're not being Responsive. To get Responsive, you could just use Bootstrap etc, but building it yourself you use a Media Query like:
body {
padding: 0;
margin: 15px;
#media (min-width: 500px) {
margin: 15px auto;
width: 500px;
}
}
Note that this is SCSS/SASS syntax - if you're using plain CSS, it's inverted:
body {
padding: 0;
margin: 15px;
}
#media (min-width: 500px) {
body {
margin: 15px auto;
width: 500px;
}
}
https://jsfiddle.net/b9chris/62wgq8nk/6/
It's common however to want to center just one chunk of a page, so let's apply this to only the article tag in a final example.
body {
padding: 0;
margin: 0;
}
nav {
width: 100%;
box-sizing: border-box;
padding: 15px;
}
article {
margin: 15px;
#media (min-width: 500px) {
margin: 15px auto;
width: 500px;
}
}
https://jsfiddle.net/b9chris/62wgq8nk/17/
Note that this final example also uses CSS Flexbox in the nav, which is also one of the newer ways you could center things. So, that's fun.
But, there are special circumstances where you need to use other approaches to center content, and each of those is probably worth its own question (many of them already asked and answered here on this site).
/******************
Fit the body to the edges of the screen
******************/
body {
margin:0;
padding:0;
}
header {
background:black;
width:100%;
}
.header {
height:200px;
}
nav {
width:100%;
background:lightseagreen;
}
.nav {
padding:0;
margin:0;
}
.nav a {
padding:10px;
font-family:tahoma;
font-size:12pt;
color:white;
}
/******************
Centered wrapper, all other content divs will go inside this and will never exceed the width of 960px.
******************/
.wrapper {
width:960px;
max-width:100%;
margin:0 auto;
}
<!-------- Start HTML ---------->
<body>
<header>
<div id="header" class="wrapper">
</div>
</header>
<nav>
<div id="nav" class="wrapper">
</div>
</nav>
</body>
like:
<body>
<div></div>
<div></div>
</body>
How can I make all the DIVs at the center of the webpage?
I mean in the browser.
HTML:
<div class="center"></div>
CSS:
div.center { margin: 0 auto; }
Of course, if you have other things outside of those divs, they might interfere.
Depends on the exact page, but either text-align: center or margin: 0 auto will probably be what you need. See CSS Centering for general information about centering and CSS Selectors so you know how to target the proper elements.
Either create a CSS class or put a style in your DIV element:
margin:0px auto;