I know this must be a very simple and easy to solve issue but i don’t know as i am new to programming.
I am using a default height of 300px but as more and more content is being added, instead of the wrapper expanding to fit the content, the content is going out of the content. And then i have a second container to the right side of the this wrapper which also drags down if the wrapper will expand to fit in the content. How can i fix this?
wrapper:
background-color: #FFFFFF;
margin:0 auto;
height: 300px;
width:60%;
font-family: "Lucida Grande", Verdana, "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
border:0px solid #FFFFFF;
margin-top:25px;
font-size:15px;
color: #222222;
margin-left:60px;
container1:
background-color: #000000;
margin:0 auto;
height: 80px;
width:20%;
border:0px solid #FFFFFF;
margin-top:25px;
font-size:15px;
color: #FFFFFF;
margin-left: 70%;
margin-top:-317px;
div#wrapper:
<?php echo $userposts;?>
div#container1:
Add a post
Add a picture
Update:
I fixed it by replacing the the position of the divs in the html
Well, if you set height of an element, then this element will always have this height. You can change the behavior of the element when overflowed by adding overflow:hidden or overflow:hide. However as far as I understand what you actually want is to set a minimal height. So instead of height:300px put min-height:300px this will ensure that when content of the wrapper exceeds 300px, wrapper will grow together with it’s content.