View Full Version : DIV Position

Dec 16th, 2006, 07:19 AM

My website is http://thebuffalonetwork.com

I have having problems with DIV positioning. At first, is was I couldn't get my website to center itself automatically no matter what the width of the browser's window was. I fixed that. Now, I'm having problems with height positioning, specifically two things. 1) When I write up a post, my auto DIV height makes itself longer, which throws off all the other DIVs height position because they are all relative. 2) I'm having problems of my site lenthening itself automatically when I create a new post, which makes my site longer. As you can see at the bottom, it runs out of space. Please take a look at my site's source code and help! Any advice on anything would be highly appreciated.

I taught myself how to create websites through trial and error. Any advice would be helpful.

[email protected]

Dec 16th, 2006, 10:50 AM
At first it isn't nice to double or cross post. That's just waisting the time of those who wanna help.
Secondly: You've made a good start but there are several things to consider when creating a CSS based website. At first view your site with Firefox and switch off styles ("View > Website style > No style"). And then go to http://csszengarden.com, do the same thing, and tell me what's different. Learn from this website how to apply images as background images (if they ae supposed to be background images or images that aren't of absolute importance for the understanding of the content of your website).
All this - separating structure from presentation - is part of semantic web development (http://brainstormsandraves.com/articles/semantics/structure/) which you should be aware of and practice before you start styling with CSS. And believe me, styling websites with CSS is a lot easier with clean, valid (http://validator.w3.org), and semantic code.

After that, again, look at how the guys on csszengarden.com have styled the pages and learn from them. And for some basic tutorials on how to create different layouts Bon Rouge's website (http://bonrouge.com) might be helpful.

Hope that helps? Good luck.

Dec 16th, 2006, 05:38 PM
Thanks for the help. I will check it out.

Sorry for double posting. It didn't look like anyone was going to answer this one. :( This is my first time posting on here, thanks for the help!

Dec 16th, 2006, 05:59 PM

I like your website's layout. It's kinda what I was aiming for, except with a little column on the right for my archives and things. Is there any where that will teach the technique you used? I will continue to look for it on Bon Rogue's site. Thanks!

Dec 16th, 2006, 06:32 PM
Bon Rouge's website is the right place to look at. There is a link further down in the menu that reads "CSS LAYOUTS". This is where you find all kinds of layouts and explanations on how to create them. What you are looking for is a 2 column layout.
The good thing is that it just takes a few changes in the CSS to switch columns from left to right if desired.

Dec 16th, 2006, 07:43 PM
Thanks again.

Dec 16th, 2006, 08:37 PM

I just put my blogger DIV at the bottom of all the DIVs, so no matter how long it becomes, it does not have an influence on the other DIV's positions.

I just need an easy solution on how to stretch my background DIV to have it auto fit my blogger's DIV. I can not think of a solution or find one other than manually doing it every time I post something, which would be an extreme hassle.

Dec 16th, 2006, 09:50 PM
Hello stlboi,
I couldn't sleep last night so I was looking for a project...

I sure hope you don't mind... I rewrote your website and thought you might like to use some it. See it at buffalo demo (http://www.nopeople.com/buffalo/The%20Buffalo%20Network%20-%20Once%20a%20Buffalo,%20Always%20a%20Buffalo!.htm)

It's not perfect, still doesn't validate, but it might be a good start. If nothing else you can take it apart and see what makes it work. Feel free to take the whole thing or just a snippet.

Dec 16th, 2006, 09:54 PM
I just looked at that in IE6.
I hate IE6.

Looks good in IE7 and FF...

Dec 17th, 2006, 02:28 AM
I don't mind at all. Thanks for the help! I will check it out.

Dec 17th, 2006, 02:37 AM
That is actually really good and what I was looking to do. Just have to figure out how to get that shading around the whole thing right on both sides. But it's definitely a start.

Now, what did you focus on and how did you go about doing it? I wish I could of sat behind you and watched you change it.

Dec 17th, 2006, 06:45 PM
I just tried to make the page work without any positioning. I also like to trim the CSS as much as possible.
The shadow down the side will be easy for you to fix. Right now it's just a slice from a screencap that I put as the background set to repeat-y. Just make yourself a better slice than I did.

Dec 17th, 2006, 07:57 PM
Could you hightlighte which part in the source code that deals with that shading on the sides? Thanks!

Dec 17th, 2006, 09:47 PM
In your CSS look at

#content {
width: 774px;
background-image: url(The%20Buffalo%20Network%20-%20Once%20a%20Buffalo,%20Always%20a%20Buffalo!_files/bgx_bottom.jpg);
background-repeat: repeat-y;
background-color: #FFFF00;

bgx_bottom.jpg is the slice I made from a screenshot of your webpage. All you need to do is edit that picture or make another one.

Dec 18th, 2006, 02:41 AM
Thanks bud.

Dec 18th, 2006, 06:51 PM
Slight prob, I can't seem to get the alignment right or something. Can you tell on the very edges, it's a little off. You can notice just above the blogger and to the left, and just below the pics slideshow on the se corner edge and a bit sw corner as well. Any idea how to align this?

Any help would be great, thanks!