CODEWITHSUNDEEP
htmlcss
user2555137
user2555137

Reputation: 1

Div Container with repeat background image and floating div

I've moved onto using divs rather than tables. I have a container with a repeat image as a background. It needs to auto size due to my dynamic content. The issue I'm having is I want to put two divs in this container side by side. When I float these divs this causes my auto container div to not expand with them. The only way I can solve the issue is by setting the container to a height which I can't do as this will be different on each dynamic page.

http://www.blockdesigns.co.uk/html5.php this is my example.

Code:

    <body>
    <div id="main_wrapper">
    <header id="top_header">
    </header>
    <div id="main_body">This part should go all the way down to the footer.<br>

    <div id="leftside">Float left div here</div>
    </div>
    <footer id="footer">
    </footer>
    </div>
    </body>

    CSS

    #main_wrapper{
    width:1000px;
    margin: 20px auto;
    text-align:left;
    }
    #main_body{
    background:url(Body1000.jpg);
    background-repeat:repeat;
    text-align:center;
    width:1000px;
    }
    #leftside{
    float:left;
    width:200px;
    height:300px;
    margin:10px;
    }

Upvotes: 0

Views: 1053

Answers (1)

bowlerae
bowlerae

Reputation: 944

Add overflow: hidden; to main_body

example

#main_wrapper {
    width: 1000px;
    margin: 20px auto;
    text-align: left;
}
#main_body {
    background: url(Body1000.jpg);
    background-repeat: repeat;
    text-align: center;
    width: 1000px;
    overflow: hidden;
}
#leftside {
    float: left;
    width: 200px;
    height: 300px;
    margin: 10px;
}

Upvotes: 3

Related Questions