CODEWITHSUNDEEP
cssheight
H4mm3rHead
H4mm3rHead

Reputation: 573

Div is not resizing when text is inserted

I have a simple CSS fixed width layout with a container and some backgrounds, and a three column design.

<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 a different file, I have the content for the ContentPlaceHolder

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

The problem is that #MainContent is not resizing in height. It always stays the same height

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;
}

Upvotes: 1

Views: 5578

Answers (5)

jacob
jacob

Reputation: 1

use the <p> tag and your text will resize depending on content needs

<div style="width:400px; border-bottom:1px solid teal; padding:20px;">

<p>your text or database field here</p>

</div>


I use the

tag when i want a div height to change depending on the amount of text inside. This example will give you a nice results list when querying from database that places a border in-between results.

Upvotes: 0

Emily
Emily

Reputation: 10088

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.

Upvotes: 3

matpol
matpol

Reputation: 3074

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

Upvotes: -1

Jayx
Jayx

Reputation: 3966

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}

Upvotes: 0

Chris Boyle
Chris Boyle

Reputation: 11551

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.

Upvotes: 1

Related Questions