Note: problem resolved: you can view the post: http://www.webmaster-talk.com/css-fo...tml#post749770 courtesy of LadynRed - Thanks!

Hi

So I decided to jump on the web designing after years of just graphic design. I use to build websites on tables but the whole CSS compliant thing scared me off but now that I'm serious about my I.T. career again, I've decided to learn CSS and here I am building my first CSS/XHTML layout.

I've spent all day sunday on this problem and still no luck. Checked out many CSS sites and found various methods but none work.

I have a container and in this container is:

#cntr {
    width:780px;
    height:780px;
    position:relative;
    margin:0 auto;
    padding:0;
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;;
}

Website to look at is: thai fight dot n e t

The homepage: It goes 780px down (the white borders) which is nearly correct and could be amended by adjusting the 780px to 790px but the problem here is that if you click on GALLERY (top navigation) you will see that 790px will not resolve the problem on this page.

Now, I researched on the net and tried replacing the 780px value with 100% but that didn't work. I read that the 100% value needs to be a slave value to the BODY's height value so I added a height value of 100% to the body's selector but this didn't work either, the borders simply disappeared.

I tried going to csszengardens and having a look at layouts which may have a left-right border so I can see the code but found nothing.

Any idea?

Thanks

Well, credit to you for attempting the transition away from tables, although you appear to still be using tables inside the divs. You also have fallen into trying to re-create a table-based layout using divs, making far more work for yourself than is necessary.

If laid out properly, you won't need that huge margin to to put the footer where you have it.

You've used floats - now learn to CLEAR your floats. Your #cntr isn't 'containing' anything because you have not cleared your floats.

Hi

Yes, I used tables for the Schedule and also the training schedule on the training.html page. I thought that tables would be fine for this sort of thing as it is sort of tabular data (time+description etc). It all validates fine so surely it isn't a compliant/functional problem but just a personal preference when you pointed this out? I can't shut out my beloved tables altogether, could I?

As for clearing the divs; I gave that a try and applied it to a few divs but it only worked for #cntr - everything else messed up.

I tried varying it by clear:left; right; etc. where appropriate - this layout seems like it doesn't want to be cleared anywhere.

So having the container contain the cleared floats mean that the border would go reach as far as the contained items are concerned?

You also have fallen into trying to re-create a table-based layout using divs, making far more work for yourself than is necessary.

sorry, I don't understand? I'm doing something wrong with the DIVs?

Thanks for your help.

Ok, I guess when I was looking at the code I missed that the table was a calendar. Tables are fine for things like that

So having the container contain the cleared floats mean that the border would go reach as far as the contained items are concerned?

Yes, it should.

I'm doing something wrong with the DIVs?

Not exactly, just making it a bit more complicated than it needs to be. You might want to have a read thru this: http://css-discuss.incutio.com/?page=CssLayouts, particularly the Float Layouts section.

Originally Posted by The Conqueror

I researched on the net and tried replacing the 780px value with 100% but that didn't work. I read that the 100% value needs to be a slave value to the BODY's height value so I added a height value of 100% to the body's selector but this didn't work either, the borders simply disappeared.

Any idea?

Delete the height value from #cntr completely. Then the borders will be as long as each individual page. If you don't want the footer to have borders (like it is on your start page) just close the container div before your footer section.

#cntr {
    width:780px;
    position:relative;
    margin:0 auto;
    padding:0;
      border-left: 1px solid #fff;
    border-right: 1px solid #fff;
}

Hope this helps.

Originally Posted by LadynRed

You might want to have a read thru this: http://css-discuss.incutio.com/?page=CssLayouts, particularly the Float Layouts section.

Oh yes..!! You just saved me from going craz...ier..

http://www.complexspiral.com/publica...aining-floats/

Is what did it by pointing out the physics of floats (if you will) and basically to close by using div clear before the closing CONTAINING tag which will bring it back down.

There is a small 5px gap but I can live with that... for now..

anyway Thank you so much - I can now move onto another CSS project.. (going to go through all my past tabled layouts and redo them in XHTML/CSS)

Originally Posted by Johnnie Walker

Delete the height value from #cntr completely. Then the borders will be as long as each individual page. If you don't want the footer to have borders (like it is on your start page) just close the container div before your footer section.

#cntr {
    width:780px;
    position:relative;
    margin:0 auto;
    padding:0;
      border-left: 1px solid #fff;
    border-right: 1px solid #fff;
}

Hope this helps.

Hi, yeah, I tried that but the border would disappear altogether... - thanks though

Great, glad it helped CSS-Discuss is a great resource, and all the folks on the list are really helpful if you decide to give it a try.