cranebill Posted October 4, 2008 Share Posted October 4, 2008 Hi just a quickie. 3 div cloumns, too much text in a box (deliberate, I have no issue with this , as I am trying to work out how divs work)issue is with the center div, here is the coding for the 3 divsdiv.left{float: left;background-color:none;width:4cm;height:1000px; (please note, the center div goes below the left when the div height is set at 400px, when this div is set at 1000px the div goes below the right div but next to the left div)overflow: auto;border: 1px solid;padding: 12px 12px 12px 12px;}div.center{background-color:none;width:auto;Height: 400px;overflow: auto;border: 1px solid;padding: 12px 12px 12px 12px;}div.right{float: right;background-color:none;width:4cm;height:400px;overflow: auto;border: 1px solid;padding: 12px 12px 12px 12px;}when I set it to hidden No problem with spacingwhen I set it to auto, a scroll bar appears, but it seems to add the scroll bar to the wdith of the middle column (the width is set to auto, so it sizes itself against the floated left and floated right column, effect of this is the middle column, now situates itself under the first floated left column,can some one point me in the right direction as to what I should be looking at to cure this problem Not sure if this has any bearing, I don't think so, I have a header div and it is also all wrapped in a container divThanks Link to comment Share on other sites More sharing options...
jeffman Posted October 4, 2008 Share Posted October 4, 2008 So far, I cannot duplicate this effect in Firefox, Safari, Opera or IE7. I used a strict DTD and no DTD. I filled the center div to overflowing and also zero text.I also can't duplicate that 400px thing.I even added a container div 780px wide.I can imagine a problem with IE because I have had similar issues with scrollbars there. Is that the browser where you're experiencing this? The difference is, I've never had it with a fluid-width div, only with a fixed width, since I think IE adds the scrollbar to styled width instead of tucking it inside. With no assigned width, I'm at a loss.You better post more code. Or better yet, just a link? Link to comment Share on other sites More sharing options...
cranebill Posted October 5, 2008 Author Share Posted October 5, 2008 So far, I cannot duplicate this effect in Firefox, Safari, Opera or IE7. I used a strict DTD and no DTD. I filled the center div to overflowing and also zero text.I also can't duplicate that 400px thing.I even added a container div 780px wide.I can imagine a problem with IE because I have had similar issues with scrollbars there. Is that the browser where you're experiencing this? The difference is, I've never had it with a fluid-width div, only with a fixed width, since I think IE adds the scrollbar to styled width instead of tucking it inside. With no assigned width, I'm at a loss.You better post more code. Or better yet, just a link? hi entire css and htm code coming up ( the text in the centre of the div is just rubbish, text to fill the spaces)The issue is only in i.e BTW . thx for taking the time :)/* this is the div section for a header and 3 columns*/div.container{width: auto;height: 100%;margin: 0px 110px 0px 110px;border: 1px solid;}div.header{background-color:none;width:auto;height:100px;overflow: auto;border: 1px solid;padding: 10px;}div.left{float: left;background-color:none;width:4cm;height:400px;overflow: auto;border: 1px solid;padding: 12px 12px 12px 12px;}div.center{background-color:none;width:auto;Height: 400px;overflow: auto;border: 1px solid;padding: 12px 12px 12px 12px;}div.right{float: right;background-color:none;width:4cm;height:400px;overflow: auto;border: 1px solid;padding: 12px 12px 12px 12px;}/* Links section*/a{color:Purple;text-decoration: none;}a:hover {color:black}/*Font properties*/HTML CODE<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><link rel="stylesheet" type="text/css" href="testcss.css" /> <title>***</title></head><body><div class="container"><div class="header"><p> This is some text</p></div><div class="left"><p>Bridge Weekend</p><p><a href="index.html">Home</a></p><p><a href="costs.html">Costs</a></p><p><a href="format.html">Format</a></p><p><a href="http://www.hilton.co.uk/coventry"target="blank">Hotel</a></p><p><a href="faq.html">FAQ's</a></p><p><a href="apply.html">Apply</a></p><p><a href="mailto:wayne.mayer@btinternet.com">Contact us</a></p></div><div class="right"><p>Links</p><p><a href="http://www.bridgebase.com"target="blank">Bridgebase</a></p><p><a href="http://acolatbbo.org.uk"target="blank">BBOACOL</a></p><p><a href="http://www.prairienet.org/bridge/"target="blank">Prairienet</a></p><p><a href="http://www.acbl.org/teachers/materials.html"target="blank">ACBL learn</a></p></div><div class="center"><p> This is gobble de gook to fill up space..........................................l;asdf laskdjgflksdglkerjg'ke l'kgjeklong tester,long tester,klg lkefjgkerfkg ekrlglkerjgk'jerk'gghis is a very long testelsd;jf l;asdf laskdjgflksdl'kgjeklong tester,long tester,klg lkefjgkerfkg ekrlglkerjgk'jerk'gghis is a very long testelsd;jf l;asdf laskdjgflksdglkerjg'ke l'kgjekThis is a very long testelsd;jf l;asdf laskdjgflksdglkerjg'ke l'kgjekrlglkej gkldjkl defkgegjlkefj glk'jelkgjskefj klejfrkgeklg lkefjgkerfkg ekrlglkerjgk'jerk'gghis is a very long testelsd;jf l;asdf laskdjgflksdglkerjg'ke l'kgjeklong tester,l'kgjeklong tester,long'kgjeklong tester,long tester,klg lkefjgkerfkg ekrlglkerjgk'jerk'gghis is a very long testelsd;jf l;asdf laskdjgflksdl'kgjeklong tester,long tester,klg lkefjgkerfkg ekrlglkerjgk'jerk'gghis is a very long testelsd;jf l;asdf laskdjgflksdglkerjg'ke l'kgjekThis is a very long testelsd;jf l;asdf laskdjgflksdglkerjg'ke l'kgjekrlglkej gkldjkl defkgegjlkefj glk'jelkgjskefj klejfrkgeklg lkefjgkerfkg ekrlglkerjgk'jerk'gghis is a very long testelsd;jf l;asdf laskdjgflksdglkerjg'ke l'kgjeklong tester,l'kgjeklong tester,long tester,klg lkefjgkerfkg ekrlglkerjgk'jerk'gghis is a very long testelsd;jf l;asdf laskdjgflksdglkerjg'ke l'kgjekThis is a very long testelsd;jf l;asdf laskdjgflksdglkerjg'ke l'kgjekrlglkej gkldjkl defkgegjlkefj glk'jelkgjskefj klejfrkgeklg lkefjgkerfkg ekrlglkerjgk'jerk'gghis is a very long testelsd;jf l;asdf laskdjgflksdglkerjg'ke l'kgjeklong tester,glkerjg'ke l'kgjekThis is a very long testelsd;jf l;asdf laskdjgflksdglkerjg'ke l'kgjekrlglkej gkldjkl defkgegjlkefj glk'jelkgjskefj klejfrkgeklg lkefjgkerfkg ekrlglkerjgk'jerk'gghis is a very long testelsd;jf l;asdf laskdjgflksdglkerjg'ke l'kgjeklong tester, tester,klg lkefjgkerfkg ekrlglkerjgk'jerk'gghis is a very long testelsd;jf l;asdf laskdjgflksdglkerjg'ke l'kgjekThis is a very long testelsd;jf l;asdf laskdjgflksdglkerjg'ke l'kgjekrlglkej gkldjkl defkgegjlkefj glk'jelkgjskefj klejfrkgeklg lkefjgkerfkg ekrlglkerjgk'jerk'gghis is a very long testelsd;jf l;asdf laskdjgflksdglkerjg'ke l'kgjeklong tester,glkerjg'ke l'kgjekThis is a very long testelsd;jf l;asdf laskdjgflksdglkerjg'ke l'kgjekrlglkej gkldjkl defkgegjlkefj glk'jelkgjskefj klejfrkgeklg lkefjgkerfkg ekrlglkerjgk'jerk'gghis is a very long testelsd;jf l;asdf laskdjgflksdglkerjg'ke l'kgjeklong tester,<br>This is a very long tester,</br></p></div></div></body></html> Link to comment Share on other sites More sharing options...
jeffman Posted October 5, 2008 Share Posted October 5, 2008 Okay. I learned some things. All works well in Firefox, but in IE7 (all I have at home) the behavior is odd. When the window is as wide as my screen, no problem. But when I shrink the window by dragging the corner, there comes a point where the center div does drop below the outer divs. I did not check, but it could be that the POP point occurs somewhere below 800px, which is still a common screen width. For a user with 800 x 600 resolution, the page might open with the center div already popped. That seems to be your experience.A little experimentation revealed the principle behind the POP: it occurs when the center div, which is fluid, is as narrow as the width of the longest word in the text. So observation 1: all that random gobble de gook you put in as text made more of a difference than you thought. Some of your gibberish words were atypically long (you didn't hit the space bar often enough). So in practice, with real English words or some Lorem ipsum text, the center div should stay aligned down to a smaller width. Try this yourself simply by replacing your original gobble de gook with some Lorem ipsum. And this might be all the change you need.But I'm not really comforted. An unusually long word could still come your way. A chemical name, for instance, or a big ole German compound noun. We want something that's closer to POP-proof.The real source of the problem is the way you set up your container div. Forcing a 110px margin is a little unusual. Most pages that I see (and all that I have designed) either use the full width of the viewport or fit the document into fixed width, such as 780px. I took the latter course here and eliminated your problem. It also changes the appearance of your page somewhat.Anyway, if you replace your original div.container definition with this, you'll have something that works, even if it changes your design principles a bit. So you'll have to make a decision. body, html {text-align: center}div.container { text-align: left; width: 780; margin: 0 auto; height: 100%; border: solid 1px} Link to comment Share on other sites More sharing options...
cranebill Posted October 5, 2008 Author Share Posted October 5, 2008 A little experimentation revealed the principle behind the POP: it occurs when the center div, which is fluid, is as narrow as the width of the longest word in the text. So observation 1: all that random gobble de gook you put in as text made more of a difference than you thought. Some of your gibberish words were atypically long (you didn't hit the space bar often enough). So in practice, with real English words or some Lorem ipsum text, the center div should stay aligned down to a smaller width. Try this yourself simply by replacing your original gobble de gook with some Lorem ipsum. And this might be all the change you need.^Hi, thanks for checking it out, my apologys, I did realise it was an issue with word length, but failed to put that in my post(I was just playing about trying to see what my limitations would be and trying to understand how divs behave)Forcing the 110 margin, was just my attempt at making a page look like some of the other pages on the net, I quite like the white space aroung a page, I just assumed that was the easiest way of doing it.Please can I have a bit more help, I have no idea what you mean by POP? Link to comment Share on other sites More sharing options...
jeffman Posted October 5, 2008 Share Posted October 5, 2008 Please can I have a bit more help, I have no idea what you mean by POP?When I dragged the window so it got narrower, there was a point where the center div popped under the left and right divs. Just my word for the thing you wanted to get rid of. Link to comment Share on other sites More sharing options...
cranebill Posted October 6, 2008 Author Share Posted October 6, 2008 When I dragged the window so it got narrower, there was a point where the center div popped under the left and right divs. Just my word for the thing you wanted to get rid of.Thank god for that, I thought it was another acronym, I was going to have to remeber even if it changes your design principles a bitI have no principles according to my wife Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.