Title: Div wrapper with background color
Last modified: August 31, 2016

---

# Div wrapper with background color

 *  [k80skinner](https://wordpress.org/support/users/k80skinner/)
 * (@k80skinner)
 * [10 years, 1 month ago](https://wordpress.org/support/topic/div-wrapper-with-background-color/)
 * Hello,
 * I am trying to convert a pure HTML site into WordPress.
 * I am using the blank theme from html5blank.com.
 * Here is the original site: [http://www.reinekeconstruction.com/index.html](http://www.reinekeconstruction.com/index.html)
 * Here is my conversion so far: [http://test.reinekeconstruction.com/](http://test.reinekeconstruction.com)
 * The one thing i can’t figure out is how to get that gray background and that 
   white container. I’m wondering if i’m not calling it in the correct place?
 * Here’s my CSS:
 *     ```
       <style type="text/css">
       body {
   
       	background: #666666;
       	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
       	padding: 20;
       	text-align: left; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
   
       }
       .oneColElsCtr #container {
       	width: 46em;
       	background: #FFFFFF;
       	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
       	border: 1px solid #000000;
       	text-align: left; /* this overrides the text-align: center on the body element. */
       	color: #333
       }
   
       .oneColElsCtr #mainContent {
       	padding: 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
       	font-family: Georgia, "Times New Roman", Times, serif;
       	color: #333;
       	text-align: center;
       	font-size: 80%;
       }
       .oneColElsCtr #container #mainContent p {
       	font-size: 90%;
       	font-style: italic;
       }
       #bullet_list {
       	font-family: Georgia, "Times New Roman", Times, serif;
       	font-size: small;
       	color: #333;
       	text-align: left;
       	height: 225px;
       	width: 275px;
       	line-height: 110%;
       	float: left
       	margin-left: 400px;
       	clear: none;
       	float: right;
       	padding-top: 40px;
       	padding-right: 80px;
       }
       #navigation_bar {
       	font-family: Georgia, "Times New Roman", Times, serif;
       	text-transform: uppercase;
       	color: #333;
       	background-color: #CCC;
       	position: relative;
       	text-align: center;
       	width: 600px;
       	float: left;
       	padding-top: 0px;
       	padding-right: 30px;
       	padding-bottom: 0px;
       	padding-left: 30px;
       	top: 5px;
       	left: 18px;
       	vertical-align: middle;
       	height: 30px;
       	line-height: 200%;
       }
       a:link {
       	color: #333;
       	text-decoration: none;
       }
       a:visited {
       	text-decoration: none;
       	color: #333;
       }
       a:hover {
       	text-decoration: underline;
       	color: #333;
       }
       a:active {
       	text-decoration: none;
       	color: #333;
       }
       #about_text {
       	font-family: Georgia, "Times New Roman", Times, serif;
       	color: 333;
       	text-align: justify;
       }
       .Name1 {
       	font-family: Arial, Helvetica, sans-serif;
       }
       .oneColElsCtr #container #mainContent table tr th {
       	font-size: small;
       	font-family: Verdana, Geneva, sans-serif;
       }
       .oneColElsCtr #container #bullet_point_container table tr th pre {
       	font-weight: bold;
       	font-family: "Times New Roman", Times, serif;
       	font-size: small;
       }
       </style>
       ```
   
 * Thanks for your time!

Viewing 4 replies - 1 through 4 (of 4 total)

 *  [paulwpxp](https://wordpress.org/support/users/paulwp/)
 * (@paulwp)
 * [10 years, 1 month ago](https://wordpress.org/support/topic/div-wrapper-with-background-color/#post-7251269)
 * Hi, The HTML markups need to be simpler, now there are two div with id #mainContent
   and there are also a few other things too. So we need to fix the markup first.
 * but anyway this code will do what you what with current markup.
 *     ```
       body { background: gray; }
   
       #mainContent {
       	background: white;
       	margin: 0 auto;
       	max-width: 900px;
       }
       ```
   
 * I would just use TwentySixteen theme as a base theme, either make a new theme
   out of it or use it as parent and create a child theme. It’s way easier to get
   the site look like the original one.
 *  Thread Starter [k80skinner](https://wordpress.org/support/users/k80skinner/)
 * (@k80skinner)
 * [10 years ago](https://wordpress.org/support/topic/div-wrapper-with-background-color/#post-7251542)
 * Thank you for the response!
 * Where should i put that piece you gave me? I tried to edit it out in a few places
   but nothing seemed to make the difference. Or, is there something else i need
   to do first before it will show?
 * Thanks again!
 *  [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/)
 * (@crouchingbruin)
 * [10 years ago](https://wordpress.org/support/topic/div-wrapper-with-background-color/#post-7251543)
 * Did the theme’s style.css file start off as empty? Take out the first line, which
   has the opening style tag, and the last line, which has the closing style tag.
   You don’t need them because the link already indicates that it’s pointing to 
   a stylesheet.
 *  [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/)
 * (@crouchingbruin)
 * [10 years ago](https://wordpress.org/support/topic/div-wrapper-with-background-color/#post-7251544)
 * By the way, you may want to reconsider your choice of themes. I know your objective
   is to convert from HTML over to WordPress, but a secondary objective should be
   to make the site mobile-friendly as well. That is, the current HTML site is not
   mobile friendly, because users currently have to zoom in on the site, and/or 
   scroll sideways, when viewing on a mobile device. A mobile friendly site will
   rearrange itself depending upon the screen width. You can see this on a desktop
   browser: try changing the screen widths when you visit different sites and notice
   how the menu changes, and the site elements rearrange themselves.
 * Many of the newer WordPress themes are responsive. There are quite a few in the
   [WordPress theme repository](https://wordpress.org/themes/). While you can make
   the Blank theme responsive, it will take you a lot of work, especially coding
   the menu so you get a mobile friendly drop-down list or a hamburger menu. Plus
   you’re going to have to write all of the media queries that make the site responsive.
 * If you want a recommendation for a responsive theme, I like [Montezuma](https://wordpress.org/themes/montezuma/),
   especially if you already know HTML & CSS. There’s a bit of a learning curve,
   but you can read more about it in my write-up [here](http://montezuma.inrgee.com/about-montezuma/).
 * But bottom line is that you should plan from the start to go with a responsive
   design, don’t build a fixed width layout and then try to make it responsive. 
   Many, if not most, of your users are going to be accessing the site through a
   mobile device, and Google will [downgrade non-mobile friendly sites](https://support.google.com/adsense/answer/6196932?hl=en)
   in its search rankings.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Div wrapper with background color’ is closed to new replies.

## Tags

 * [containers](https://wordpress.org/support/topic-tag/containers/)
 * [div](https://wordpress.org/support/topic-tag/div/)
 * [html](https://wordpress.org/support/topic-tag/html/)

 * 4 replies
 * 3 participants
 * Last reply from: [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/)
 * Last activity: [10 years ago](https://wordpress.org/support/topic/div-wrapper-with-background-color/#post-7251544)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics