CODEWITHSUNDEEP
asp.nethtmlcss
user1638362
user1638362

Reputation: 579

ASP.Net CSS MasterPages Main Content Area Not Auto Increasing With <Span> Tags

I have a master page which creates a ContentPlaceHolder for each page where my main content/information goes. Around this i have created a div tag called main.

<div id="Main">
    <asp:ContentPlaceHolder ID="MainContent" runat="server">
    </asp:ContentPlaceHolder>
</div>

#Main
{
    background-color:White;
    padding: 15px 20px 15px 20px;
    margin: 0px 100px 10px 100px;
    border-radius: 4px 4px 4px 4px;
}

So essentialy the contentplaceholder is a nice white space where information can go into. If i go onto a page and write some stuff into the content with p tags the white space auto expands.

However i'm trying to create 2 span tags on the same line where i can add pane on the left and a datagrid on the right. but for the moment ive filled these span tags with just text. However the white space does not auto expand, ive changed the height of the span tag but it goes over into the footer. Any ideas?

<asp:Content ID="SearchContent" ContentPlaceHolderID="MainContent" runat="server">

<span id="SearchLeftPanel" class="SearchDivs">
leftleftleftleft
leftleftleftleft
leftleftleftleft
leftleftleftleft
leftleftleftleft
leftleftleftleft
leftleftleftleft
leftleftleftleft
leftleftleftleft
</span>

<span id="SearchRightPanel" class="SearchDivs">
RightRightRightRightRightRight
RightRightRightRightRightRight
RightRightRightRightRightRight
RightRightRightRightRightRight
RightRightRightRightRightRight
RightRightRightRightRightRight
RightRightRightRightRightRight
RightRightRightRightRightRight
</span>


.SearchDivs
{
   display:inline;
}
#SearchLeftPanel
{
    clear:both;
    float:left;
    width:25%;
    height:100px;    
}
#SearchRightPanel
{
   float:right;
   width:67%;
   height:100px;   
}

Upvotes: 0

Views: 1765

Answers (1)

Sowmya
Sowmya

Reputation: 26969

Remove the height:100px from your css nad give height:auto

If you need default height to be 100px then you can write like this 

#SearchRightPanel
{
   float:right;
   width:67%;  
min-height:100px; 
height:auto
}

Check the demo http://jsfiddle.net/YUTTh/1/

Updated demo http://jsfiddle.net/YUTTh/2/

Upvotes: 1

Related Questions