Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Wrapper? Confusion in css template

Featured Replies

Right, I have often seen this and it bugs me, can not find any logical explanation to this:

 

I have a template downloaded from the web, w3c confomity. It is from CSS free templates and is called sandstone.

 

Here is the wrapper in the css

 

/* Wrapper */

 

#wrapper {

}

 

as you can see, ZILCH, Nothing, Empty.

 

Here is the XHTML dialogue:

 

<div id="wrapper">

<div id="header">

</div>

<!-- end div#header -->

<div id="menu">

</div>

<div id="splash">

</div>

<!-- end div#menu -->

<div id="page">

</div>

<!-- end div#page -->

 

Question. Where is the logic? It makes no sense. there is no parameter written for a div called wrapper, so why have it in the html? I have seen this before, but now I am understanding things better whoops comes along another web page to confound you.

 

I see when using firebug that it is redundant? It is empty. yet I see it often in html's without any values given to it in the css. So why bother using it?

 

When I disable the wrapper div by editing it out of the css, it has absolutely no Visible effect whatsoever.

 

Thankyou in advance for your insightful correction or comments on this one.

People usually use #wrapper and #container divs to centre web pages on the monitor. Is your website currently aligned to the left of your monitor?

 

If you so if you add the following to your #wrapper and it should centre - making it more pleasing to the eye.

 

#wrapper {

width: 900px;

margin: 0px auto;

text-align: left;

}

 

I can only think the reason it is there is to allow you to easily centre the page.

Generally a wrapper is used to center the content on the page.

If it's left empty then I guess for someone to edit in case they want to make modifications, otherwise it's completely useless.

 

There's no real need to have any empty declaration in the CSS.

 

EDIT: Just noticed Chris@nbatDigital's post. Posted at same time :)

  • Author

Hi, thanks, I thought that was the case but had to ask, got so many things wrong recently. To the other chris, no it was aligned in the centre, I think then because it was a template, (which i use to learn from, my determination to master all this stuff will not allow me to copy), I think that they put it there for that very reason. thankyou guys.

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.