CSS to control page width?

Log in to stop seeing adverts
This page may contain links to companies such as eBay and Amazon. As an affiliate of these sites I may earn commission if you click the link and make a purchase

Status
Not open for further replies.
spionfox

spionfox

Well-Known Member
Anyone help?

Got a website that is set up to be as wide as the persons screen/browser width. I want to limit the content to say 800px with a coloured border at either side.

I know how to do this with putting the content into tables (table width="800" etc..) but CSS is better I think. I use CSS but only for font styling.

Is there an easy way to do this? I'm hoping I can just wrap a CSS command around my existing content for ease.

Thanks.
 
spionfox said:
Anyone help?

Got a website that is set up to be as wide as the persons screen/browser width. I want to limit the content to say 800px with a coloured border at either side.

I know how to do this with putting the content into tables (table width="800" etc..) but CSS is better I think. I use CSS but only for font styling.

Is there an easy way to do this? I'm hoping I can just wrap a CSS command around my existing content for ease.

Thanks.
Click to expand...

CSS is the way forward spion, do not use tables for layout, use tables for tables. End of.


<body style="text-align:center;">
<div style="margin:0px auto; width:800px;">

page content here

</div>
</body>



This will centre the content in the page.
 
Last edited:
Macky said:
<body style="text-align:center;">
<div style="margin:0px auto; width:800px;text-align:left;">

page content here

</div>
</body>



This will centre the content in the page.
Click to expand...

Forgot to add that bit.
The text-aligns are a hack to make it centre in IE
 
Macky said:
Forgot to add that bit.
The text-aligns are a hack to make it centre in IE
Click to expand...

Thanks Macky, that's great - just got to work out how to have a different colour in the page outside of the 800px bit now.
 
<body style="text-align:center;background-color:#cccccc">
<div style="margin:0px auto; width:800px;background-color:#ffffff">

Change the cccccc and ffffff to colors that you want
 
spionfox said:
Thanks Macky, that's great - just got to work out how to have a different colour in the page outside of the 800px bit now.
Click to expand...

Place this into the <head> of the html file:

<style>
body {
background-color: #hex-code-of-the-colour; }
</style>
 
beighton155 said:
<body style="text-align:center;background-color:#cccccc">
<div style="margin:0px auto; width:800px;background-color:#ffffff">

Change the cccccc and ffffff to colors that you want
Click to expand...

Macky said:
Place this into the <head> of the html file:

<style>
body {
background-color: #hex-code-of-the-colour; }
</style>
Click to expand...

Thanks Beights and Macky - I'll give it a go once I have got the thoughts of today out of my head.
 
Status
Not open for further replies.
Log in to stop seeing adverts

P Pld Pts
1Liverpool1639
2Chelsea1735
3Arsenal1733
4Nottm F1731
5Bournemouth1728
6Aston Villa1728
7Manchester C  1727
8Newcastle1726
9Fulham1725
10Brighton1725
11Tottenham 1723
12Brentford1723
13Manchester U1722
14West Ham1720
15Everton1616
16Palace1716
17Leicester1714
18Wolves1712
19Ipswich1712
20Southampton176

Latest posts

Back
Top