Wrappers and containers

**cgacfox** · Jan 29, 2010 21:51

I am ready for help on the next step of my site. Wrappers and containers are confusing to me. I need to have the site centered and when the browser is minimized all the background images still show properly when I use the bottom scroll bar. I know this is achieved by wrappers and containers but I am not sure what to put in these or if both are required. My current site is www.foxdenwebsolutions.com which is done in Flash so I need the content to look the same on all pages but the portfolio page...I am completely changing that one. Any help with these elements would be greatly appreciated.

**markbrown4** · Jan 29, 2010 22:58

Hi,

All you need to center a block level element horizontally is a width and left and right margins of auto.

Code:

#wrapper {
  width: 780px;
  margin: 0 auto;
}

<body>
<div id="wrapper">
</div>
</body>

Is that what you were after?

**cgacfox** · Jan 29, 2010 23:21

Yes, thanks mark. So I don't need to use containers as well? If someone could explain what a wrapper and a container are, maybe I will understand their use better.

**RyanReese** · Jan 29, 2010 23:26

Wrapper and container are interchangeable words. It just is a container/wrapper of something

. Normally columns (that's where the word is used most but it c an be used anywhere)

**Paul O'B** · Jan 30, 2010 05:29

As Ryan said wrapper, container , outer etc are just words and nothing to do with css/html

It's just a common way of describing "an element" (usually a div) that will contain many elements.

Most people use the above words to mean a page-wrapper that holds all the content on the page and therefore centring all the page content by centring that one element instead of centring every element on the page in some way.

Divs are used to create divisions of content and to organise,structure and control your page more easily. Many times you may have multiple elements in the same context (such as floated column content) and then you wrap the content in a div to control all the children more easily.

When someone says "add a wrapper" then that just mean contain those elements within a parent (usually a div) and it will make things easier to control and to address.

For the future html5 does introduce some new elements for grouping content such as "section". There's a short article here about naming conventions that you might find useful.

**cgacfox** · Jan 30, 2010 14:55

Thank you Paul for your explanation. It is much appreciated.

I have added a page container so everything is centered now. I have changed the header to include all elements in it (i.e. logo, and text image as well as the background image). I got the footer text the way I want it. My husband (software and web QA guy) wanted the background of the page not to contain the textured background as he said it was distracting so I just have the background texture in the container and the background page colored to match but not be distracting.

Now I am working on adding content. If you go to my current website www.foxdenwebsolutions.com (Flash site) I have text in the upper left content area, then next to it have an image. Below the upper left text is another image and next to that is more text. I want to keep this layout in CSS and HTML. I figured I would have to use containers for this as well. Am I correct or is there another way to get the layout I want?

**markbrown4** · Jan 30, 2010 15:35

Hi,

Something like this will work for aligning media to one side and content on the other:

Code css:

.media {
  clear: both;
  padding-right: 200px;
}
.media img {
  float: right;
  margin-right: -200px
}
.media-alt {
  clear: both;
  padding-left: 200px;
}
.media-alt img {
  float: left;
  margin-left: -200px
}

Code html4strict:

<div class="media">
  <img src="#">
  <h2>Why?</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="media-alt">
  <img src="#">
  <h2>Mission</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

You give the wrapper

padding to the side to prevent the text from going over and then drag the image out to the side with a negative margin. The clear property makes sure that each media block is below the floated images above.

This is just one way to achieve it, there are many.
Another more popular way to do it would be to use margin on the text because the float will sit on top of the margin:

Code:

.media, .media-alt {
  clear: both;
}
.media img {
  float: right;
}
.media h2,.media p { margin-right: 200px }
.media-alt img {
  float: left;
}
.media-alt h2,.media-alt p { margin-left: 200px }

Or if you want to be able to use other elements in your content it might be easiest just to add another div for the content:

Code css:

.media, .media-alt {
  clear: both;
}
.media img {
  float: right;
}
.media .side { margin-right: 200px }
.media-alt img {
  float: left;
}
.media-alt .side { margin-left: 200px }

Code html4strict:

<div class="media">
  <img src="#">
  <div class="side">
    <h2>Why?</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>
<div class="media-alt">
  <img src="#">
  <div class="side">
    <h2>Mission</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>

Hope that gives you a few ideas.

**cgacfox** · Feb 6, 2010 12:16

I tried to work with Mark's examples but could not get things to work the way I wanted. I had to add blank lines to get the bottom text and image to not interfere with the footer text. I have attached a mockup showing 4 equal boxes within the middle div. They need to expand or contract depending on the amount of text or size of image and not interfere with the footer. I tried setting up 4 separate containers but it didn't work right...I probably didn't do it right. Is there any way to do what I am trying to do? Also this format needs to change for every page since I have different amounts of text and images on them. Maybe setting up the content area as 2 column?

**cgacfox** · Feb 6, 2010 13:01

I think I did it. Go to www.foxdenwebsolutions.com/CSS_site/index.html. I set up 2 columns and have the upper left text and lower left image in left column and upper right image and lower right text in right column. Now I have to test if I can have more text or larger images and it will still work.

Just tested in Firefox and it doesn't work. IE8 handles it fine but not Firefox...ok need advice.

**cgacfox** · Feb 6, 2010 13:19

IE 7 also renders it correctly but Safari does not. I don't have margins or padding set...not sure that will help.

**cgacfox** · Feb 6, 2010 13:46

Just checked my how my code is rendering in browsers through DW CS4 and it says I have an expanding box problem. I added overflow:hidden but that didn't work either. However, it did clear the error!

**cgacfox** · Feb 6, 2010 13:56

I added overflow:hidden to the incorrect element. I originally put it in the left_content and right_content elements and it didn't work. I added it to the content_mdl and now it works. YAY!!!

**RyanReese** · Feb 6, 2010 13:59

Sorry we weren't able to assist you (your thread was the last one on my tab lol) but I'm glad you found a solution for yourself

.

**cgacfox** · Feb 6, 2010 14:08

Thanks Ryan...sometimes just posting here helps me figure things out on my own. I hope it also helps others with similar problems.

**cgacfox** · Feb 19, 2010 14:21

I just wanted to let everyone know that my new site is finished and I wanted to thank all that helped me with all the little details that I was having problems with. You can view the site at www.foxdenwebsolutions.com. Again thanks to everyone that helped me out!

**RyanReese** · Feb 19, 2010 16:30

If you want you can go to the reviews section of htis forum to get it reviewed by professionals

User Tag List

Thread: Wrappers and containers

Thread Tools

Display

Wrappers and containers

Bookmarks

Bookmarks

Posting Permissions