HTML / CSS content is always focused

Question

How to focus on the content of my page so that it focuses on each type of screen size? For example, in Allegorithmic , if I resized my browser, the contents of the center will move to the left until it reaches the browser window. There are some background elements that expand horizontally (dark gray on top, light gray in the middle, etc.). I can open this site on my laptop and on my iMac, and it is focused. I thought I could use absolute positioning to move the content x of the number of pixels to the left, but this will not work, because the 300 pixels that center the content on the small screen will not center it on the big screen.

So, essentially, I would like to duplicate the functionality of the Allegorithmic website, have backgrounds that are infinite horizontally, but have certain content that always remains “centered”.

Answer 1

If you want the elements to always be centered, use margin: 0 auto; in styles on it.

 #yourElement{ margin: 0 auto; } 

W3.org link to center objects using CSS

To get background elements to extend the entire length of the page, just give them a width of 100%, then create a child container inside and give them the same style as above. I bet the example you gave just uses 1px at some height with lines to get this view in the background.

Example

Example with bg image

Markup

 <div id="background"> <div id="content"> </div> </div> 

CSS

 #background{ width: 100%; } #content{ width: 960px; margin: 0 auto; } 

Answer 2

Try it -

 .center{ margin: 0 auto; position: relative; } 

auto should align the content of the page with the center, leaving space (left, right) depending on the size of the browser.

Answer 3

You can define containers with an inner div in them for each level.

 <div id="first" class="container"><div class="inner"> first content goes there </div></div> <div id="second" class="container"><div class="inner"> another content goes there </div></div> ... ... ... 

and create it with css, use the id for custom styles for each container (they are 100% wide, so they have full bg)

 .container { background: red; text-align: center; } .container > .inner { margin: 0 auto; width: 960px; text-align: left; } 

Answer 4

HTML

 <div id="wrapper"> <header> <nav> .... </nav> </header> <div id="main"> ..... </div> </div> 

CSS

 #wrapper { width: 960px /* whatever you wanted but there has to be a width*/ margin: 0 auto; } 

This will cover and center the entire content of your page.

Hope this helps.

Answer 5

I have a few examples that you can look at. The first (red box), I believe, is what you are looking for. http://jsfiddle.net/kYCWX/