Yahoo Answers is shutting down on May 4th, 2021 (Eastern Time) and beginning April 20th, 2021 (Eastern Time) the Yahoo Answers website will be in read-only mode. There will be no changes to other Yahoo properties or services, or your Yahoo account. You can find more information about the Yahoo Answers shutdown and how to download your data on this help page.
Trending News
html / css problem - 3 divs in a container div?
I'm Trying to put 3 divs inside of one container div, but only the first goes in, and the other 2 get wrapped to the next vertical level, which is outside of the container. I've been trying everything I can think of, plus Googling everything I can find, but still no relief on this issue. I've been on it for 3 days now. Here's a brief synopses of my code...
<style type="text/css">
#container {
position: relative;
top: -30px; /* necessary for layout */
background-color: #0000ff;
border-bottom-color: #00ff00;
height: 800px;
width: 100%
}
#box1 {
position: relative;
top: 5px;
left: 0%;
background-color: #00006f;
height: 99%;
width: 12%;
}
#box2 {
position: relative;
top: 5px;
float: left;
/*left: 12%; */
background-color: #0055FF;
height: 99%;
width: 58%;
}
#box3 {
position: relative;
top: 5px;
float: left;
/* left: 77%; */
background-color: #3f003f;
height: 99%;
width: 12%;
}
</style>
</head>
<body>
<div id="container">
<div id="box1">
</div>
<div id="box2">
</div>
<div id="box3">
</div>
</div> <!-- Ends (container) -->
</body>
Any help greatly appreciated !!!
container width has no ";" in question, but that's just a typo in the question...
A X : I tried both, but changing the 800px to 100% made the entire container disappear. Changing the height to 90% just made the wrapped lower level come up higher on the container level about 40px.
Matt: That's because they are side by side, not vertical 100% & 3 @ 99%, which I have reduced to 95%.
Ron, you hit it right on the head, as usual ! :-) I have been able to place everything inside of those sub divs, just as I wished to do, that's why I took so long responding.
Thanx very much to all 3 of you for your help! :-)
3 Answers
- A XLv 79 years ago
Untested suggestion... Try changing the height of the three boxes to 90%. If that works, then you had a conflict with box height and available pixels due to your use of -30 pixels for layout purposes.
If that's not it, leave boxes at 90% and set container height to 100% rather than 800px.
I forget whether height is relative to screen or to any container. If to screen, you have a height conflict in your CSS.
Any chance the boxes are inheriting the "left" setting from container?
Good luck.
- Matt AnonymousLv 59 years ago
you have percentages set as the height for you're inner divs also the combined total of these percentages = 297% not 100%
