I am working on a site with a text div which I have sized to 500px and am then floating a div containing an image to the right.

Because I am floating the div it does not exist in the height of the page, so the problem I was then getting is that not all the pages contained enough copy to have the post appear inside the copy region and so looked to be escaping from the content region, I thought this looked quite cool, but the gods decided otherwise. The content box needed to fit around the text but expand if there was not enough text to equal or dominate the size of the floating image.

So in the end, I dropped in a spacer image and using the jQuery library check the height of the content region and add some height to the spacer image if this was less than 400.

It works, but I was wondering if anyone has any alternative suggestions?

Cannot post an example I am afraid, but here is the materpage and the css (the first few lines are taken from the YUI project).

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!DOCTYPE HTML>
<html>
<head runat="server">
    <title>Company Conference</title>
    <link href="assets/css/reset.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="wrapper">
        <div id="border">
            <div id="header">
                <img src="assets/images/layout/header.jpg" alt="Company Conference 2010"
                    width="1000" height="99" />
            </div>
            <div id="navigation">
                <ul>
                    <li>links</li>
                    <li>links</li>
                </ul>
            </div>
            <form id="form1" runat="server">
            <div id="content">
                <div style="float: right; width: 450;">
                    <img src="assets/images/layout/postit.png" alt="Postit Note" width="450" />
                </div>
                <div id="text">
                   <div>
                    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                    </asp:ContentPlaceHolder>
                    </div>
                    <img src="assets/images/layout/spacer.gif" alt="" class="minHeight" width="0" />
                </div>
            </div>
            </form>
        </div>
        <div id="footer">
           Foot</div>
    </div>
    <script src="assets/js/jquery.1.4.2.js" type="text/ecmascript"></script>
    <script type="text/ecmascript">
        $(document).ready(function () {
            var height = 400 - $("#text").height();
            if (height > 0) {
                $(".minHeight").attr("height", height);
            }
        });
    </script>
    <asp:ContentPlaceHolder ID="JSFooter" runat="server">
    </asp:ContentPlaceHolder>
</body>
</html>
/* CSS in reset.css Sorry about this formatting, because it was all on one line it broke the code region I think*/
/*Reset*/


html{color:#000;background:#FFF;}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}

/*Base*/
body{font-family: arial,helvetica,clean,sans-serif;font-size: 75%;} select, input, button, textarea{font: 99% arial,helvetica,clean,sans-serif;} table{font-size: inherit;font: 100%;} pre, code, kbd, samp, tt{font-family: monospace;line-height:100%;} 
/*Font*/
h1{font-size: 138.5%;} h2{font-size: 123.1%;} h3{font-size: 108%;} h1, h2, h3{margin: 1em 0;} h1, h2, h3, h4, h5, h6, strong{font-weight: bold;} abbr, acronym{border-bottom: 1px dotted #000;cursor: help;} em{font-style: italic;} blockquote, ul, ol, dl{margin: 1em;} ol, ul, dl{margin-left: 2em;} ol li{list-style: decimal outside;} ul li{list-style: disc outside;} dl dd{margin-left: 1em;} th, td{border: 1px solid #000;padding: .5em;} th{font-weight: bold;text-align: center;} caption{margin-bottom: .5em;text-align: center;} p, fieldset, table, pre{margin-bottom: 1em;} input[type=text], input[type=password], textarea{width: 12.25em; *width:11.9em;} 
/*Custom*/

#wrapper
{
    width:1006px;
    text-align:left;
    margin: 0 auto;
}

#border
{
    border:solid 3px #0053a0;
}

#header
{
    width:1000px;
    border-bottom:solid 5px #0053a0;
}

#header img
{
    vertical-align:text-bottom;
}

#navigation
{
    border-bottom:solid 5px #0053a0;
}
#navigation ul li
{
    border-right:solid 1px #0053a0;
    display:inline;
}

#navigation ul li.last
{
    border-right:none;
}

#navigation ul li a
{
    padding:12px;
    color: #0053a0;
    font-weight:bold;
    text-decoration:none;
}

#navigation ul li a.Selected
{
    color: #ed1c24;
}

#navigation ul li a:hover
{
    text-decoration:underline;
}
#content
{
    padding:25px 0px 25px 25px;
    color:#211d70;
    background:#fff url('images/backgroundGradient.jpg') repeat-x bottom left;
}

.minHeight
{
}

#content #text
{
    width:500px;
    text-align:justify;
}
#content h1
{
    font-size:200%;
    color: #ed1c24;
    margin-bottom:5px;
}

#content h2
{
    margin-top:0px;
    font-size:160%;
    font-weight:normal;
}

#faq h2
{
    margin-bottom:0px;   
    font-size:120%; 
    font-weight:bold;
}

#footer
{
    text-align:right;
}
#footer a
{
    color:#666;
    font-size:90%;
}

1 answer

1
point
This was chosen as the best answer

if you give div#content overflow:hidden; it will shrink wrap the floated div within it and grow to whichever div is tallest.

if that's not what you're looking for, then could you try and post a live sample page.

Answered over 6 years ago by Tony Crockford
  • overflow:hidden did the trick thanks. Luke Duddridge over 6 years ago