[Solved] Left Floated <DIV> within Tab collapses height

[Philip Senechal]

Can't seem to figure out why this is happening. My website is based on the Grid960 layout method. Within each tab, I'm placing content within two divs that are floated left so the content appears side by side...one is 140px wide, the other is 700px wide. When I do this, the height of the tab content area doesn't cover my content...it shrinks up like there is not content in the tab. If I remove the float:left from the divs, then the tab content area covers my content.

I'm guessing this is CSS issue...I can see in the Computed Style that the height is getting set to 0. If I add a style entry
#tabStripName .t-content
{
min-height: 400px;
}

it resolves the issue. Can you point in the direction of a possible work-around to prevent the height from getting set to 0 when I define left floated divs in the tab content?

In brief, the layout looks somewhat like this

<div class="grid_12">
    <tabs>
        <tab1>
            <div class="grid_2">
                CONTENT
            </div>
            <div class="grid_9">
                CONTENT
            </div>
        </tab1>
    </tabs>
</div>

[Atanas Korchev]

Hi Philip Senechal,

 Can you provide a runnable version of your project? We need that in order to reproduce this problem.

Greetings,
Atanas Korchev
the Telerik team

[Michael]

I was just about to post the same question:

View:

tabstrip.Add()
               .Text("Upcoming Races")
               .ImageUrl("~/Content/Images/grn_runner_sml.png")
               .Content(@<text>
   <div id="twocols">
       <div id="maincol">
           <ul>
               @foreach (var raceVM in Model.UpcomingRaces)
               {
                   <li>@Html.ActionLink(raceVM.FullRaceDescription, "Index", new { id = raceVM.RaceID })
                   </li>
               }
           </ul>
       </div>
       <div id="rightcol">
           @Html.Partial("_RaceDetailView", Model.SelectedUpcomingRace)
       </div>
   </div>
   </text>);

and the offending CSS

#twocols
{
    width: 100%;
    float: left;
}

#rightcol
{
    width: 200px;
    float: left;
    margin-left; -200px;
    position: relative;
}

#maincol
{

    float: left;
    position: relative;
    margin-right: 200px;
}

sorry for butting in!!

[Michael]

OK

try clearing the css out before and after (Source CSS Creator)

.clearfix:after
{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix
{
    display: inline-block;
}

all sorted in my project