Help copying a simple CSS design template

DezUk · 1 Mar 2012 at 14:32

I have been tasked at work with coming up with a simple job ad template using HTML/CSS. I found this.

But when downloading the HTML and looking at the code it seems way over complicated for what it is. Was hoping someone could point me in the right direction to get a simple design like above, where the advert is centralised and in a box.

I'm sure this can been coded quickly and easier than the example I've shown?

Much appreciated

kingbal · 1 Mar 2012 at 15:13

something like:

html
<div id="container">
..your content here
</div>

css
#container{
width:900px;
margin:auto;
}

should do the trick.

Riddell · 1 Mar 2012 at 16:50

I agree, that site's code looks unnecessarily complex.

DcD · 1 Mar 2012 at 23:52

HTML:

Code:

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

	</div>
	<div id="content">
		<p>Split this area into divs and paragraphs for content.</p>
	</div>
</div>
</body>

CSS:

Code:

body { background-color: #f7f7f7; text-align: center }
#wrapper { margin: 0 auto; width: 750px; text-align: left; background-color: #ffffff; border: 3px solid #d1d1d1; padding: 20px }
#content { padding: 20px; }
p { font-family: Helvetica, sans-serif; font-size: 12px; line-height: 18px }

Enjoy! Should set you on your way.

DezUk · 2 Mar 2012 at 12:54

Thanks for the help guys, well on my way now, any more questions I will let you know.

Cheers