Currently, I am engaged in a project aimed at enhancing my understanding of Spring MVC practices. As part of this endeavor, I have embarked on the development of a simplified version of Twitter. Essentially, users can log in, share brief updates, and view a timeline featuring their own posts along with those of their followers.
The layout consists of a background image spanning the entire page, with a central container sporting a light blue backdrop for housing the post update section and the timeline display. The light blue background extends only to the bottom of the initial viewport; if the timeline exceeds one-page length, it halts at the original visible area upon loading.
Here's how my page is structured: The div class=blurb encompasses individual blurbs within the timeline.
<div id="container">
<div id="mainPanel">
<div id="timeline">
<div class="class="blurb"">
<span class="user">test</span> <span
class="displayName">Test User</span> <span class="bodytext">This is a small blurb.</span>
<span class="timestamp">1 hours ago</span>
</div>
<div class="blurb">
<span class="user">admin</span> <span
class="displayName">Test admin</span> <span class="bodytext">This is another small blurb.</span>
<span class="timestamp">1 hours ago</span>
</div>
</div>
</div>
</div>
Below is the CSS style pertaining to the container.
#container {
width: 650px;
height: 100%;
margin: 0 auto;
padding: 10px;
background-color: #DDEEF6;
}
Is there a way to adjust the container CSS dynamically to match the expanding timeline? Each new blurb added increases the size of the timeline.
Screenshot illustrating height defined as 100%
Screenshot displaying undefined height
UPDATE: Upon further investigation, the issue seems to be linked to the floats. Special thanks to the two individuals who commented below. The #socialPanel styling appears as follows:
#socialPanel {
width: 250px;
float: right;
}
Furthermore, using Chrome's developer tools indicated that clearing the float causes the social panel to drop below the blurbs/tweets, subsequently extending the light blue background down the list of blurbs.
If you have any suggestions on potential solutions or areas to explore enabling the socialPanel to remain floated left at the top while ensuring the light blue background utilizes all available vertical space, your input would be greatly appreciated!
UPDATE TWO:
I managed to address the problem by combining the techniques recommended in the response below. Incorporating a div with class clearer assigned clear:both; and eliminating height: 100%; from the #container styling successfully resolved the issue.
NOTE:
Adding overflow:hidden; to the container's styling led to the page cutting off after the light blue section instead of extending it downwards.
A heartfelt thank you to everyone who contributed! Your assistance has been invaluable to my learning process!