tags:

views:

856

answers:

4
Q: 

CSS problem, my div tag is not resizing when i put text in it

Hi, I have a simple css layout, with a container and some backgrounds, and a three column design. Fixed width.

<body>
    <form id="form1" runat="server">
    <div id="BGContainer">
        <div id="PageContainer">
        </div>
        <div id="Content">
            <div id="MainContent">
                <asp:ContentPlaceHolder ID="MainAreaContentPlaceholder" runat="server">
                </asp:ContentPlaceHolder>
            </div>
        </div>
        <div id="Bottom">
            <div id="Copyright">
                Copyright</div>
        </div>
    </div>
    </form>
</body>

in another file i have the content of the contentplaceholder

<asp:Content ID="Content1" runat="server" ContentPlaceHolderID="MainAreaContentPlaceholder">
    <div id="Heading">
        Overskrift</div>
    <div id="LeftColumn">
        test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />
        test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br /></div>
    <div id="CenterColumn">
        center</div>
    <div id="RightColumn">
        right</div>
</asp:Content>

my problem is that my div with id "MainContent" is not resizing in height, it stays the same height, and i cannot see why?

Here is the css

html
{
    height:100%;
}

body
{
    margin:0;
    width:100%;
    height:100%;
    font-family: Verdana, Sans-Serif;
    background-image:url(../Gfx/Design/bg.png);
    background-repeat:repeat;
}

#BGContainer
{
    margin:0px;
    background-image:url(../Gfx/Design/Background-top-gradient.png);
    background-repeat:repeat-x;
    height:210px;
    width:100%;
}

#PageContainer
{
    background-image:url(../Gfx/Design/top-gradient.png);
    background-repeat:no-repeat;
    height:100%;
    width:1016px;
    margin-left:auto;
    margin-right:auto;
}

#Bottom
{
    background-image:url(../Gfx/Design/Bottom.png);
    background-repeat:no-repeat;
    height:32px;
    width:964px;
    margin-left:auto;
    margin-right:auto;
}

#Content
{
    background-color:#FFFFFF;
    background-image:url(../Gfx/Design/content-background.png);
    background-repeat:no-repeat;
    width:1000px;
    height:100%;
    margin-left:auto;
    margin-right:auto;
}

#MainContent
{
    width:980px;
    height:100%;
    margin-left:auto;
    margin-right:auto;
    background-color:#FFFFFF;
}

#Copyright
{
    color:#000000;
    font-size:xx-small;
    text-transform:uppercase;
    margin-left:50px;
    padding-top:5px;
}

#LeftColumn
{
    width:311px;
    margin-left:10px;
    border: 1px solid gray;
    min-height:400px;
    float:left;
}

#CenterColumn
{
    width:311px;
    margin-left:10px;
    border: 1px solid gray;
    min-height:400px;
    float:left;
}

#RightColumn
{
    width:311px;
    margin-left:10px;
    margin-right:10px;
    border: 1px solid gray;
    min-height:400px;
    float:right;
}

Hope someone out there can see this one, really starting to annoy me, thx in advance

+1  A: 

The three columns (#LeftColumn, #CenterColumn, #RightColumn) are all floats, so they will not increase the height of #MainContent. Try putting a div (which can be empty) just after those three with clear: both. That will force it to sit below the three columns, and #MainContent will be at least tall enough to include this new div.

If your problem is instead that #MainContent is too tall, note that it has height: 100%, which you could remove (and then apply the above fix). Hope that helps.

Chris Boyle  2009-08-17 10:28:37
A: 

You need to clear the floated content.

Insert as follows:

<div id="MainContent">
  <asp:ContentPlaceHolder ID="MainAreaContentPlaceholder" runat="server">
  </asp:ContentPlaceHolder>
  <div class="clear"></div>
</div>

... and the CSS:

.clear{clear:both}
Jayx  2009-08-17 10:29:06
A: 

Probably because you have a height set on the #BGContainer - if you remove this you might find that the box expands with the text

matpol  2009-08-17 10:29:37
#BGContainer is not the problem and removing its height will not fix the issue.Another fix would have been to set the height of #MainContent, but then you'd have to adjust that value to suit the height of its content.
Jayx  2009-08-17 10:34:19
This actually fixed my problem, or at least a part, i put the clear:both in my stylesheet as well. now everything isrking as intended :-)
H4mm3rHead  2009-08-17 10:40:35
+2  A: 

To clear the floats without any additional markup use overflow:hidden

#MainContent {overflow:hidden;zoom:1;}

The zoom:1 will invoke hasLayout in ie6 so the float will clear in ie6.

Emily  2009-08-17 10:40:50

related questions

IE7 HTML/CSS margin-bottom bug.
IE7: header above menu
How to create an all browser-compatible hanging indent style in CSS in a span
How can you customize the numbers in an ordered list?
style.display not working in Firefox, Opera, Safari - IE7 OK
Best WYSIWYG CSS editor?
How important is W3C XHTML/CSS validation when finalizing work?
Solve the IE select overlap bug
IE8 overflow:auto with max-height
Autosizing Textarea
What is the best way to create rounded corners using CSS?
FF3 WinXP != FF3 Ubuntu - why?
Is there a business reason for striving for pure CSS layout?
How to set up a CSS switcher in ASP.NET
Setting a div's height in HTML with CSS
Wrapping lists into columns
CSS Background Color in Javascript
How can I make the browser see CSS and Javascript changes?
What sites offer free, quality web site design templates?
Can you recommend a good CSS online resource or book?
Html CSS Editor
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?