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.

I cannot center my site (CSS elements)

Featured Replies

Hi, I've just sort of finished my first website (www.k2m.si) and now decided I want it to be centered (not on the left). I've tried all I could find on this forum about centering websites, but nothing helped. I would also love any suggestions how to improve the html code, I'm sure it's a total mess as I've been using dreamweaver designer.

Should i post the entire html code here?

Hi, I've just sort of finished my first website (www.k2m.si) and now decided I want it to be centered (not on the left). I've tried all I could find on this forum about centering websites, but nothing helped. I would also love any suggestions how to improve the html code, I'm sure it's a total mess as I've been using dreamweaver designer.

Should i post the entire html code here?

 

Are you using CSS?

 

Post your code for both if you can

The centred part needs to have a fixed width with the CSS

margin: 0 auto;

 

Obviously it doesn't need to have 0 at the top it could be 10px or whatever :)

 

EDIT: and yes, your code is a bit of a mess. I would suggest to ditch dreamweaver and start learning to hand code from scratch. Its the only way!

Have you used a wysiwig for this?

 

What you need to do is add a div at the top of allyour other divs, for example: <div id="wrap">

then place this inside the CSS: #wrap {width:900px; margin:0 auto;}

Change to whatever you website width is.

 

Hope that helps.

To center all my divs I set up a class called container and as Huw has said above, set your width (I use 960px) and margin: 0px auto.

 

If you're still struggling, if you post your code we'll be able to help

Add this at the very top of your html file (before the <html> tag):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"     
"http://www.w3.org/TR/html4/strict.dtd"> 

 

Add this into your style tag in the head section:-

#wrap { width: 960px; margin: auto; position: relative; }

 

Add this as the first item in the body, after the <body> tag and before the first p tag:-

<div id="wrap">

 

Add this after all the page content, just before the <script>...</script> tag section at the bottom:-

</div>

To center all my divs I set up a class called container and as Huw has said above, set your width (I use 960px) and margin: 0px auto.

 

If you're still struggling, if you post your code we'll be able to help

This is what I do. should work 100%

  • Author

Add this at the very top of your html file (before the <html> tag):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"     
"http://www.w3.org/TR/html4/strict.dtd"> 

 

Add this into your style tag in the head section:-

#wrap { width: 960px; margin: auto; position: relative; }

 

Add this as the first item in the body, after the <body> tag and before the first p tag:-

<div id="wrap">

 

Add this after all the page content, just before the <script>...</script> tag section at the bottom:-

</div>

 

Thank you, this kind of worked, but it messed a lot of CSS elements on the site (it moved banner about 20px down and a few css elements up to 200px down the site).

I didn't expect it to be the complete answer, but it is the correct way to begin, more or less as mrchristoph and mrsminkie also explained.

 

I guessed the width for #wrap; you need to add up the total widths of your divs including side margins, side padding and side borders and edit to the correct width.

 

Any position: absolute divs inside my #wrap div will probably need their top and left sizes edited.

 

The addition of a doctype, which is also a necessary item, may mean that some margins need editing.

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.