2

The solution has been found. The code is below. Thank you to everyone who helped.

The Solution was to clear the float, the code below fixed it for me.

.div#content:after {
content:"";
display:table;
clear:both;
}

Thanks Again.

Original Question

I have 2 Divs, one being "Content" where all the content of my site is in. And another div named "updates". I want the div "content" to resize its height so that all the divs inside of it and fit. Here's an image explaining my problem easier Imgur Link, Not high enough rep to post image directly.

Here's my full source code (html) (along with the css of content div and updates div.

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/reset.css">
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <title>MCSocial</title>
        <script type="text/javascript" src="src/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="src/jquery.tinycircleslider.js"></script>

    </head>
    <body>

      <div id="container">
        <div id="content">
            <nav>
                <ul class="nav">
                    <li class="left">MCFish</li>
                     <li><a href="#">Home</a></li>
                     <li><a href="http://social.minecraft.uk.to/news/">News</a></li>               
                     <li><a href="#">Members</a></li>
                     <li><a href="#">Media</a></li>
                </ul>
            </nav>

            <a href="#"><div id="block">
                <img src="img/mojang.jpg" height="200px" width="850px">
            </div></a>

            <a href="#"><div id="block">
                <img src="img/minecraft.jpg" height="200px" width="850px">
            </div></a>

            <div id="updates">
                <img src="img/update.png" height="48px" width="140px">
                <!--post updates here-->
                <h3 class="sub-title">Update 1.5</h3>
                <p class="list">Added a new homepage! More simple to navigate! Enjoy!<br>Please send me some feedback <a href="#" class="sub-link">here!</a></p>

                <h3 class="sub-title">Update 1.4</h3>
                <p class="list">Cleaned up code!</a></p>

                <h3 class="sub-title">Update 1.3</h3>
                <p class="list">Added new themes! Check them out!</a></p>

                <h3 class="sub-title">Update 1.2</h3>
                <p class="list">Renamed Site: from MinecraftFishing to MCFish!</a></p>

                <h3 class="sub-title">Update 1.0</h3>
                <p class="list">Site goes LIVE!</p>
                <!--end post updates-->
            </div>

            <div id="twitter">
                <img src="img/twitter.png" height="48px" width="140px"><br><br>
                <a class="twitter-timeline" href="https://twitter.com/FluffyRabbitzZ" data-widget-id="544642022154723328">Tweets by @FluffyRabbitzZ</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
            </div>



            <div id="footer">
                <p>&copy;2014. MCSocial. All Rights Reserved.</p>
            </div>
        </div>
      </div>



    </body>
</html>

and the CSS;

div#content {
width: 900px;
margin-left: auto;
margin-right: auto;
background-color: #fff;
height: auto;
border-radius: 2px;
min-height: 100%;
position: relative;
}

div#updates {
float: left;
margin-left: 2.6%;
}

Thanks for any help.

Captain Obvlious
  • 19,754
  • 5
  • 44
  • 74
MyNameIsNotSoCool
  • 133
  • 3
  • 14
  • 1
    As others have mentioned, you'll need to clear the `float`. The floated element has been removed from the document flow and no longer pushes other elements down. See this article for various methods: [Clearing Floats](http://www.sitepoint.com/clearing-floats-overview-different-clearfix-methods/). – showdev Dec 16 '14 at 00:54

2 Answers2

2

You should clear the float.

  • Add overflow CSS property (for example :auto) to the div#content.

  • A solution for modern browsers :

    .div#content:after {
       content:"";
       display:table;
       clear:both;
    }
potashin
  • 44,205
  • 11
  • 83
  • 107
1

You have to clear the floating content:

<div style="clear:both"></div>

before closing yout div.content.

Verhaeren
  • 1,661
  • 9
  • 10