2 replies [Last post]
dcdomain
dcdomain's picture
Offline
Regular
Last seen: 17 years 11 weeks ago
Timezone: GMT-5
Joined: 2003-07-06
Posts: 32
Points: 0

I've been reading up on CSS (learning and applying as I design) on and off since the summer (still a total newbie). After two and a half days, I think I finally got my layout to work (yes that's correct it took me two and a half days to get this simple layout). Trying to center stuff with CSS is a total pain, was going to use a table first and then place the divs within it, but that defeats the point of using CSS in the first place, I also saw other people use frames on either side to center the divs in the center frame, that is also not something I want to do. Anyway, I'm using the one of two known hacks to center it by placing the border/content div in the middle and then offsetting it.

At first I created three separate divs with borders then after running into some problems I decided to ditch the borders and create a large content div, use that as the border and then placing three smaller divs (left, center, right) without borders within it.

That seems to have worked now until I placed a smaller div to hold some more content within the left div. I was making this post asking for help when I finally looked back at the code and realized I had placed an extra </div> that basically closed the overarching content div causing the center and right divs to position themselves from the page rather than from the content div.

Basically, the left and right content div will be allowed to scroll vertically, but the center div will be the menu and remain static. All content will exist within the overarching border/content div.

Anyway, to make a long story short, I'm not a programmer, simple html and css gives me the fits, I wish I was just doing the design and had someone else to put all this together... using tables I could have done this in a few minutes, but it wouldn't be as elegant huh?

I'm posting this up to ask all of you to quickly glance at it to offer any suggestions as to what I should change to prevent problems in the future (as I add more divs/content). If any of you can lend a hand, thanks in advance.

"What I had, I gave today. What I saved, I lost forever."

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 16 years 44 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

3 column layout (CENTERED) is killing me... (NOOB)

At the bottom of this page is a css layout generator link.

Layouts are the hardest thing to start with, I think. It is better to use someone elses and then play with it a bit. If you need this quickly then use a simple table to start off with your 3 columns, and then stick to CSS within that 1 table. Will give you time to learn and you will not have half the problems with compatibility. But if time is not an issue, have a close look at the 3 column CSS layout generator.

Regards
Day

The only way to learn is to do it yourself

dcdomain
dcdomain's picture
Offline
Regular
Last seen: 17 years 11 weeks ago
Timezone: GMT-5
Joined: 2003-07-06
Posts: 32
Points: 0

3 column layout (CENTERED) is killing me... (NOOB)

Thanks, I wish I had taken a look at the forums before I started, that generator is very useful. I was able to generate the two files:
http://www.csscreator.com/version2/newfiles/dcdomain5347.html and http://www.csscreator.com/version2/newfiles/dcdomain5347.css which immediately pointed out that I had made a math error in my original template Shock .

Anyway, the only thing left to do now with these generated layouts is to create the border effect. Since there seems to be a lot of NN hacks to hide the borders, I think it would be wise to just create a large DIV under everything rather than using borders correct?

I placed the Left, Center and Right DIVs on Zindex2, and created a larger DIV underneath them, I haven't started worrying about the vertical placement of the three smaller DIVs to get the top and bottom border, but I think I already broke something as the DIVs are no longer centered and doing what I want...

[UPDATE]: I've moved on with the original one I made (without all the browser hacks/ browser compatibility) and started to add the smaller divs for content. Updated the original file attached in the first post.

"What I had, I gave today. What I saved, I lost forever."