CSS Just starting out, a little help please (architecture2 template)

I am just starting out playing around with websites and templates. As a learning experience I am trying to make a simple site for myself. I have downloaded the following template and began looking at the html and css files with it.

Architecture template

I like the way this template looks and have changed out some images. I have one problem though, I am trying to make the main body (the white part) bigger so that I can add more text and images to it. I have tried playing around with the CSS and HTML but have only succeeded in messing up the page.

I am basically just working off the sample files ive downloaded and havent really made any big changes. If one of you could show/help me with how to make the body bigger while keeeping the nice outline border around it I would appreciate it.

Thanks

 

Please read this post to see it will help you to set up a site using that template. Let me know more help is needed.

 

I assume you want to increase the main section horizontally. In terms of CSS you need to modify few entries (adding 100px).

1. Change the wrapper so it uses 878px
#wrapper {
text-align: left;
margin: auto;
width: 878px;
position: relative;
background: url(images/body_bg.gif) repeat-y;
}

2. Change the header so the image shifts to the right
#header {
position: absolute;
top: 0;
left: 343px;
width: 535px;
height: 279px;
background: url(images/header_2.jpg) no-repeat;
}

3. Change the main section to increasing its width by 100px
#right {
float: right;
width: 590px;
padding-right: 9px;
padding-top: 301px;
}

4. You need to modify the body_bg.gif in the images directory. Use your image editor increase the width of the image by 100px. (you can use the psd also for it)

You will end up with a white gap on the header. So here is what you can do. Take a slice of 1px wide and 152px height from the image header_2.jpg (left side just above the white section and to the right a bit where the background is solid). Now duplicate the header_2.jpg name paste the slice you taken in it, expand the slice so it compensates for the rest of white space horizontally. The copied header_2.jpg image should end up to be 635x279 pixels.

So now instead of doing step 4 where we placed the left to 343 put it back to 243 and change the width to 635px. That should align the header and cover for the earlier white gap. You should end up with the same template wider by 100px.

 

Please ignore my post above. I was referring to a different architecture template

 

OK, I got the right template and this is what I got by following enigma1’s instruction. Changing the header image is beyond me.

 

Actually sorry guys I should have been a little bit more specific. I was actually looking to see how I could make the white section taller not wider. Is this just a matter of adding more content to that section in the HTML document?

Like I said I am prett new to all this so if I just add more info to the sections I want in the HTML will the CSS automatically increase the body height?

 

Yes, just add more content - the height will increase automatically. You'll be able to put your content in the columns - or underneath both of them.
Geoff Tyrer

 

I guess it is very easy to make a mistake when we make assumption base on how we see thing. I too thought that you want it to be wider since most templates would adjust to height but not width. Note that some templates could adjust to both but that's another topic.

Yes, the sections will adjust to taller height if more contents were added. See here.

 

Wow thats awesome. Thank you so much I had no idea it could be that easy. Sometimes when were learning new things I guess we skip over the obvious.