html5 + CSS3 center page text by header banner

I am trying to move from old html styled with tables, to html5 styled with CSS, but I have problems:

codepen Demo

You can see that, text is aligned to the edge of the page, and I want it aligned to the edge of the header banner.

I cant figure out, how to do that? without using tables.

Also, please note, that the .article:nth-child(odd) CSS selector, somehow aligns the odd elements to the left, and not to the right... I dont understand why.

Thanks!

Answers


Your content have the same width as a header, but you have image inside header which have a little less width than 100% of site, so what u need to do is add some width for article something like this:

.article {
   display: block;
   margin: auto;
   width: 900px;
}

codepen Demo


The best way to create a fixed width website is to add a containing div:

Simply add a fixed width div around all your current code.

#Wrap{width:1024px;}

.

<body>
  <div id="Wrap">
    ...
    /* rest of website */
    ...
  </div>
</body>

codepen Demo


CLEAN EXAMPLE

HTML

<div id="Wrap">
  <div id="Head"></div>
  <div id="Body"></div>
  <div id="Foot"></div>
</div>

CSS

#Wrap{
  width:1024px; /*Your desired page width*/
  margin:0 auto; /*Center your wrapper on the page*/
}
#Head{
  width:100%; /*Fill the width of the wrapper*/
}
#Body{
  width:100%; /*Fill the width of the wrapper*/
}
#Foot{
  width:100%; /*Fill the width of the wrapper*/
}

For example

codepen Demo

.article {
     width: 1024px;
}

To center the .articles you need to set a width. Also you might want to consider getting rid of

<div align="center">

It's deprecated in html5


you need to write css to style the page correctly:

codepen Demo

div {
  text-align: center;
}

Need Your Help

PL/SQL Trigger Update or Delete

oracle plsql triggers

I have two table where their output looks like:

Stop the looping at the end of the selector list in WP7 looping selector

c# windows-phone-7 wpf-controls windows-phone-7.1

My doubt is, is there any way to stop the looping selector from looping when it reaches the end of the list. Suppose the List has 10 items may be 1,2,3,4...10, so when after scrolling once u reach ...