How to center content

**egturnkey** · 04-10-2009, 01:47 PM

Hello Guys,

Problem looks littel strange but i'm sure the following image will explain it

- As seen in image, i want the blue box become 770px in size so that for screen of 770px width it fit it at all
( the black bacground should shrink when the blue box become more wide )

Now for screen of 1024px i want the
blue box still with fixed width 770px and
the black background is the one who expand to fit the screen

here is the following code

Code:

<html>
<head>
<title>TITLE BLAH BLAH</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">


<style type="text/css">
body{padding: 20px;background-color: #000;}

div#nifty{ margin: 0 10%;background: #9BD1FA}

b.rtop, b.rbottom{display:block;background: #000}
b.rtop b, b.rbottom b{display:block;height: 1px;
    overflow: hidden; background: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
</style>


</head>
<body>


<div id="nifty">

<b class="rtop">
<b class="r1"></b>
<b class="r2"></b>
<b class="r3"></b>
<b class="r4"></b>
</b>



blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah



<b class="rbottom">
<b class="r4"></b>
<b class="r3"></b>
<b class="r2"></b>
<b class="r1"></b>
</b>


</div>


</body>
</html>

Yours,
egturnkey
thanks you all and god leads you to best

**Snookerman** · 04-10-2009, 02:50 PM

Add this to your CSS code:

Code:

div#nifty {
margin: 0 auto;
width: 770px;
}

You will also need a doctype so add this at the very top of the page, before the <html> tag:

HTML Code:

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

Good luck!

**egturnkey** · 04-10-2009, 03:42 PM

Originally Posted by Snookerman

Add this to your CSS code:

Code:

div#nifty {
margin: 0 auto;
width: 770px;
}

You will also need a doctype so add this at the very top of the page, before the <html> tag:

HTML Code:

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

Good luck!

Thank you so much admin Snookerman, it works now so perfect

**Snookerman** · 04-10-2009, 04:30 PM

You're welcome, glad to help!

Good luck with your site!

Thread: How to center content

Thread Tools

Search Thread

How to center content

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions