Hi, first post here. I couldn't find a solution by searching, so here is my problem:
I have a page with several div's in each other. Trouble appears when one div contains a lot of text. In IE it shows ok, but in Mozilla the div "bleeds" through the main design.
I have a sketch of it: <!-- m --><a class="postlink" href="http://strang.endofinternet.net/div/bleed.gif">http://strang.endofinternet.net/div/bleed.gif</a><!-- m -->
The CSS is as follows:
div#wrapper {
width: 800px;
border-right: 1px solid #d0d0d0;
border-bottom: 1px solid #d0d0d0;
}
div#maincontents { /* ie can see me */
margin: 10px 0 10px 0;
padding: 40px 0 10px 15px;
width: 785px;
height: 424px;
}
head:first-child+body div#maincontents { /* ie can't see me */
height: 0%;
min-height: 424px;
height: auto;
}
div#mainsquare { /* ie can see me */
float: left;
border: 1px solid #d0d0d0;
width: 543px;
height: 380px;
padding: 10px 20px 10px 10px;
}
head:first-child+body div#mainsquare { /* ie can't see me */
height: 0%;
min-height: 380px;
height: auto;
}
div#imagesquare {
float: right;
width: 170px;
height: 195px;
margin-right: 15px;
border: 1px solid #d0d0d0;
}
div#newssquare {
float: right;
width: 170px;
margin-right: 15px;
margin-top: 8px;
min-height: 195px;
height: 195px;
border: 1px solid #d0d0d0;
background-color: #fff;
}
Is there a solution to this problem. First I had trouble getting IE to understand that I needed a min-height of the squares, and now this in Mozilla...What do you want to happen? You have all your heights and widths specced. If there's too much text it has to go somewhere, either boxes get bigger, or they bust out of where you want them, or you get scrollbars in areas. Which do you want?
BTW, If you're designing for 800x600, do not make your outer DIV 800. People have all kinds of junk in their browsers eating up that space.
designing for various resolutions (<!-- m --><a class="postlink" href="http://hotwired.lycos.com/webmonkey/99/41/index3a_page2.html?tw=design">http://hotwired.lycos.com/webmonkey/99/ ... ?tw=design</a><!-- m -->)If you have a div with a definite height and overflow: auto then that may solve your problem.
And by junk TimeBandit means little things like scrollbars and favourites columns...I realize I wasn't too precise in my question...
What I want is for the wrapper and maincontents to follow the mainsquare. I've set a minimum-height because the maincontents has a background-image.
In Internet Explorer the wrapper and maincontents follows mainsquare as it grows, but in Mozilla it doesn't. I don't want to hav eny scrollbars inside the page, but if that's what it takes to get the page working, I suppose I have no choice.
The problem seems to be that I have two div's floating to the right and the mainsquare-div floating to the right...
DaveSW: which div should have overflow: auto. I think I tried it with no luck.I think the best solution would be for you to give us the html as well as the css. Either zip up the full file set, or upload them. Then we could work out the answer properly rather than guessing.
Regards
DaveOk, I've uploaded the page to:
<!-- m --><a class="postlink" href="http://strang.endofinternet.net/div/">http://strang.endofinternet.net/div/</a><!-- m -->
About the 800 width, I'll be taking 30 pixels off of that to make it work, but this is still a work-in-progress.Looking at it I think you need an empty element at the bottom of the page with clear: both in it.
<p style="clear: both"> </p>
This should be inside the bottom of the div that isn't stretching.Originally posted by DaveSW
Looking at it I think you need an empty element at the bottom of the page with clear: both in it.
<p style="clear: both"> </p>
This should be inside the bottom of the div that isn't stretching.
Wow, thanks. That was simple
What a relief. Thank you just doesn't seem enough...
/PatrickLOL
It's caught me out a few times too, but it's quite logical when you think it through!
You can use that space to insert a footer as well.Originally posted by DaveSW
And by junk TimeBandit means little things like scrollbars and favourites columns...
You got it!
FYI, I think the current "safe" 800x600 design size is 744x410, something like that. but I think we do actually use a slightly different size. Now *that's* living on the edge!
I have a page with several div's in each other. Trouble appears when one div contains a lot of text. In IE it shows ok, but in Mozilla the div "bleeds" through the main design.
I have a sketch of it: <!-- m --><a class="postlink" href="http://strang.endofinternet.net/div/bleed.gif">http://strang.endofinternet.net/div/bleed.gif</a><!-- m -->
The CSS is as follows:
div#wrapper {
width: 800px;
border-right: 1px solid #d0d0d0;
border-bottom: 1px solid #d0d0d0;
}
div#maincontents { /* ie can see me */
margin: 10px 0 10px 0;
padding: 40px 0 10px 15px;
width: 785px;
height: 424px;
}
head:first-child+body div#maincontents { /* ie can't see me */
height: 0%;
min-height: 424px;
height: auto;
}
div#mainsquare { /* ie can see me */
float: left;
border: 1px solid #d0d0d0;
width: 543px;
height: 380px;
padding: 10px 20px 10px 10px;
}
head:first-child+body div#mainsquare { /* ie can't see me */
height: 0%;
min-height: 380px;
height: auto;
}
div#imagesquare {
float: right;
width: 170px;
height: 195px;
margin-right: 15px;
border: 1px solid #d0d0d0;
}
div#newssquare {
float: right;
width: 170px;
margin-right: 15px;
margin-top: 8px;
min-height: 195px;
height: 195px;
border: 1px solid #d0d0d0;
background-color: #fff;
}
Is there a solution to this problem. First I had trouble getting IE to understand that I needed a min-height of the squares, and now this in Mozilla...What do you want to happen? You have all your heights and widths specced. If there's too much text it has to go somewhere, either boxes get bigger, or they bust out of where you want them, or you get scrollbars in areas. Which do you want?
BTW, If you're designing for 800x600, do not make your outer DIV 800. People have all kinds of junk in their browsers eating up that space.
designing for various resolutions (<!-- m --><a class="postlink" href="http://hotwired.lycos.com/webmonkey/99/41/index3a_page2.html?tw=design">http://hotwired.lycos.com/webmonkey/99/ ... ?tw=design</a><!-- m -->)If you have a div with a definite height and overflow: auto then that may solve your problem.
And by junk TimeBandit means little things like scrollbars and favourites columns...I realize I wasn't too precise in my question...
What I want is for the wrapper and maincontents to follow the mainsquare. I've set a minimum-height because the maincontents has a background-image.
In Internet Explorer the wrapper and maincontents follows mainsquare as it grows, but in Mozilla it doesn't. I don't want to hav eny scrollbars inside the page, but if that's what it takes to get the page working, I suppose I have no choice.
The problem seems to be that I have two div's floating to the right and the mainsquare-div floating to the right...
DaveSW: which div should have overflow: auto. I think I tried it with no luck.I think the best solution would be for you to give us the html as well as the css. Either zip up the full file set, or upload them. Then we could work out the answer properly rather than guessing.
Regards
DaveOk, I've uploaded the page to:
<!-- m --><a class="postlink" href="http://strang.endofinternet.net/div/">http://strang.endofinternet.net/div/</a><!-- m -->
About the 800 width, I'll be taking 30 pixels off of that to make it work, but this is still a work-in-progress.Looking at it I think you need an empty element at the bottom of the page with clear: both in it.
<p style="clear: both"> </p>
This should be inside the bottom of the div that isn't stretching.Originally posted by DaveSW
Looking at it I think you need an empty element at the bottom of the page with clear: both in it.
<p style="clear: both"> </p>
This should be inside the bottom of the div that isn't stretching.
Wow, thanks. That was simple
What a relief. Thank you just doesn't seem enough...
/PatrickLOL
It's caught me out a few times too, but it's quite logical when you think it through!
You can use that space to insert a footer as well.Originally posted by DaveSW
And by junk TimeBandit means little things like scrollbars and favourites columns...
You got it!
FYI, I think the current "safe" 800x600 design size is 744x410, something like that. but I think we do actually use a slightly different size. Now *that's* living on the edge!