i've created a layout with the basic plan shown below...I've been trying to do a tableless css layout using div's but I just can't get it to work properly. First I tried doing margins to align all the pieces, which worked with no content in in, but once I put content in each section and it stretched vertically the content areas would not connect up with the footer and the nav panel. Then I tried floating everything. The floating worked fine for the header area(header/member login) but below that it would not line up side by side but rather on a line lower. I'm very new to css and am not quite sure how to best go about coding a layout with the properties of the one below to work. Also...
the only stretching parts would be the content sections the rest would be non repeating. Nothing is stretching horizontally only vertically. One more thing, when one of the contents stretches more than the other(more content) I want the other to stretch with it, rather than just stretching for its own content. (I hope this makes sense, I'm sure a lot of this is redundant but I'm just trying to explain it the best way I know how)




Also I have a common problem where the middle content area when expanded will "cut off" from the header and footer and not stay connected...I've tried margins and paddings but it never seems to work.

Any and all help would be greatly appreciated thank you.

just a link will do,

As Chris said link to your site would be great. But for start here are some advices:
Start your css file with:
* {
margin:0;
padding:0;
}
Place header and login in some container use float:left; for both of them and give them widths and heights,
After that clear them, <div style="clear:both;"></div>
for navigation and search input do the same.
Now put main content and right content in some container (main) use float:left; for both of them and give them widths.
Add background to that main container with repeat-y, that should fix vertical stretching.

Clear this float and go with footer....
This should help in most cases, but until I see the real page I cant tell you more.

* {
margin:0;
padding:0;
}

I wouldn't do that, IE7 has some issues with it. You do need to to a reset on margins and padding, but the approach above isn't the best way to do it.

LadynRed,
I dont see any advice from you, at least non of them explained.
From my experience what i said above, is good in 80% of cases with layout that Sryinex sent. I didn't go into many details ...
BTW
Well I am looking at your site from a signature, seems to me you didn't find a solution for this IE7 issues yet...Do you need some advice for your site so it could look the same in FF and IE7 al least?

I don't need any advice, and didn't ask, thank you, I'm quite capable of fixing things myself. I didn't put that site in my sig for anyone to critique, it's not open for discussion. I've checked the site in IE7, there are no problems. Believe me, if it was messed up, my client would have told me about it.

I explained why the * clearing wasn't a good idea, it causes problems. A better method, though longer, is explained by Eric Meyer: http://meyerweb.com/eric/thoughts/20...eset-reloaded/

Originally Posted by LadynRed

I don't need any advice, and didn't ask, thank you, I'm quite capable of fixing things myself. I didn't put that site in my sig for anyone to critique, it's not open for discussion. I've checked the site in IE7, there are no problems. Believe me, if it was messed up, my client would have told me about it.

I explained why the * clearing wasn't a good idea, it causes problems. A better method, though longer, is explained by Eric Meyer: http://meyerweb.com/eric/thoughts/20...eset-reloaded/

Well I am saying there is a huge difference between FF IE7 and IE6 for mentioned site.... I don't care if it is for critique or not, it is in your signature it is available for everyone to notice and certainly you are the webmaster....
Regarding the issue here, you didn't give any advice to the man started this thread so....

Regarding article you sent, that guy actually agreed with resetting all paddings and margins to zero...read the article first before you post it as some argument...

I am saying there is a huge difference between FF IE7 and IE6

Not on MY site there isn't. I tested that site, as I do every site, with Firefox, Opera, IE6, IE7, and use Browsershots for others. The actual "webmaster" for that site isn't me, I'm just the designer and set up the code. I can assure you, if that site were that badly broken, it would NEVER have gone live and my "client" would have noticed it, since he too uses different browsers.

Regarding article you sent, that guy actually agreed with resetting all paddings and margins to zero...read the article first before you post it as some argument...

Oh, trust me, I HAVE read it ! And while Eric does recommend setting margins and padding to zero, which I ALWAYS do and recommend people do it. YOUR method is NOT the recommended method.

I don't know who you think you are, but I've been building web sites for more than 10 years, and building CSS-only sites for the last 6 of them. I KNOW what I'm doing.

As for the site in my sig being up for discussion -- it's not. You can look all you want, as anyone can since I put it there, but I don't need any critique and I certainly don't need any "help".

My only question to you, then, is what OS are you using, screen resolutions etc, because there is NOTHING wrong with it in the 5 major browsers I tested it on!

Hello ... i need help .. am design some web site its html and my rosolution when am design is 800 * 600 so its work well but when am run the page and change the rosolution to 1024 * 800 i think ,,, the web site is not stretch with the explorer as i see the msn web site stretch and yahoo and other web sites

Originally Posted by LadynRed

Not on MY site there isn't. I tested that site, as I do every site, with Firefox, Opera, IE6, IE7

Originally Posted by LadynRed

Oh, trust me, I HAVE read it ! And while Eric does recommend setting margins and padding to zero, which I ALWAYS do and recommend people do it. YOUR method is NOT the recommended method.

Go read your first post here and tell me again how you recommend it!
Your words:
* {
margin:0;
padding:0;
}
I wouldn't do that, IE7 has some issues with it.

Originally Posted by LadynRed

I don't know who you think you are, but I've been building web sites for more than 10 years, and building CSS-only sites for the last 6 of them. I KNOW what I'm doing.

That is a shame since you still can't find the difference in browsers for your own site...The difference is in mostly in left menu, IE7 shows greater left margin then in FF....

Originally Posted by LadynRed

As for the site in my sig being up for discussion -- it's not. You can look all you want, as anyone can since I put it there, but I don't need any critique and I certainly don't need any "help".

Well if not, then why your next question?

Originally Posted by LadynRed

My only question to you, then, is what OS are you using, screen resolutions etc, because there is NOTHING wrong with it in the 5 major browsers I tested it on!

Here are the screen shots from IE7 and FF3 OS windows xp sp2, 1280x1024, hope it will help... I am not trying to get in fight with you of some sort, I just find it difficult to understand when someone is not giving advice, telling that the one who gave it is wrong and not telling why and then telling the opposite...and on top of it all she is a moderator....
IE7:


FF3:

That is a shame since you still can't find the difference in browsers for your own site...The difference is in mostly in left menu, IE7 shows greater left margin then in FF...

And that's IT???

Three posts whittering on about some SO insignificant????

I'm sorry, but I am NOT at all concerned with absolute pixel perfection, it's pointless and that is NOT what I consider "broken" as you seem to imply. Until ALL the browsers do everything EXACTLY the same thru the standards, I'm not going to kill myself over a few pixels. You go ahead and bang your head against that wall, I will not. As usual, FF is right in it's rendering, IE is off, but it works and very, very few people would ever notice the slight difference. The IMPORTANT thing is that everything WORKS - and it does.

As for 'advice', my comment about your zeroing method was only to let the OP know that using it could bring some unexpected results in some browsers. I have used that * method myself, and run into various problems, which is why I now avoid it. Yes, it's simple and it's easy, but that's not always the best.

*** Thanks Chris !!! You posted as I was writing ***

Originally Posted by LadynRed

I'm sorry, but I am NOT at all concerned with absolute pixel perfection, it's pointless and that is NOT what I consider "broken" as you seem to imply. Until ALL the browsers do everything EXACTLY the same thru the standards, I'm not going to kill myself over a few pixels. You go ahead and bang your head against that wall, I will not. As usual, FF is right in it's rendering, IE is off, but it works and very, very few people would ever notice the slight difference. The IMPORTANT thing is that everything WORKS - and it does.

As for 'advice', my comment about your zeroing method was only to let the OP know that using it could bring some unexpected results in some browsers. I have used that * method myself, and run into various problems, which is why I now avoid it. Yes, it's simple and it's easy, but that's not always the best.

*** Thanks Chris !!! You posted as I was writing ***

I never said it is broken, I said it is not the same...

Chris:Not insignificant, there were some points made, not justh it is not so good thing to do, deal with it by yourself, I told you enough.
As I said I am not here to fight, but to tell people if I have a solution for their problem, if not, well I tried....Isn't this the point of this forum or what?

So, don't take it personally if LnR says something you give as advice isn't the best way to do it. Zeroing out of margins and padding are best done on a wrapper div class or the body rather than on a "wild card", for the reasons she already mentioned. LnR has made the same kind of comments for advice I've given; given that 99.99999% of the time she's right, I take it in stride and usually learn something myself. In this business, if you're not constantly learning you're out of business.

tim

Originally Posted by serandfae

So, don't take it personally if LnR says something you give as advice isn't the best way to do it. Zeroing out of margins and padding are best done on a wrapper div class or the body rather than on a "wild card", for the reasons she already mentioned. LnR has made the same kind of comments for advice I've given; given that 99.99999% of the time she's right, I take it in stride and usually learn something myself. In this business, if you're not constantly learning you're out of business.

tim

Is there anyone that actually read what the guy who started this thread asked???? What is your advice to him??? Who gave him any help, any advice, any solution???? Luckily there are some folks here who needed help and said after: thanks man that worked for me, thanks for quick answer. If it isn't for that, I would be million miles from here only not to hear "mods" selling their wisdom packed in some arrogant-i-know-everything-who-do-you-think-you-are-mambo-jambo. If you wanna help, help, explain your reaspons or don't write a word....

Wow I didn't get this annoyed for a forum posts for a long time...hope this finishes here....for me it is...