CSS Fluid/Static Layout

Question

I have the following 2 column div layout. The left column needs to have a width of 75px to accommodate the image, but the right column needs should flow into all of its parent container.

This grid is in a user control that is being added to multiple sites/pages, each having a different layout so the parent container varies in width - some can be wider, some can be skinnier, hence I can't use %. If the % is too high it wraps. How can I make this flexible without going for the obvious table option?

<telerik:RadGrid 
        ID="ArticlesGrid" 
        AlternatingItemStyle-BorderStyle="None"
        AlternatingItemStyle-BackColor="Transparent"
        BorderStyle="None"
        PageSize="20" 
        runat="server" 
        AllowPaging="True"
        GridLines="None"
        >
        <PagerStyle Mode="NumericPages" BackColor="#FFFFFF" AlwaysVisible="false"  ShowPagerText="false" EnableSEOPaging="True"></PagerStyle>
        <MasterTableView AutoGenerateColumns="False" DataKeyNames="Id">

            <HeaderStyle BackColor="#FFFFFF" BorderStyle="None"  />
            <Columns>
                <telerik:GridTemplateColumn>
                    <ItemTemplate>
                        <div id="AllArticles_LeftColumn" style="float: left; width: 75px; margin-right: 40px;">
                            <a id="lnkArticleImage" runat="server">
                                <img runat="server" src='<%# Eval("ThumbnailImagePath")%>'  class="ArticleImage"
                                    alt='<%# Eval("ImageAltText")%>' id="imgArticle" />
                            </a>
                        </div>
                        <div id="AllArticles_RightColumn" style="float: left;">
                            <h1>
                                <asp:HyperLink CssClass="ArticleTitle" ID="lnkHeadline" runat="server" Text='<%# Eval("Headline")%>'></asp:HyperLink>
                            </h1>
                            <asp:Label ID="litContent" CssClass="ArticleBody" Text='<%# Eval("PreviewText")%>'
                                runat="server"></asp:Label><br />
                            <br />
                            <small>
                                <a id="lnkReadMore" class="ArticleReadMore" runat="server">
                                <%# Eval("LinkText")%></a>
                            </small>
                            <br />
                            <br />
                            <div>
                                <div style="float: left;" id="AllArticlePostedBy">
                                    <small><span class="ArticlePostedBy">Posted </a>
                                        on 
                                        <asp:Label ID="lblDatePosted" runat="server" Text='<%# String.Format("{0:MMMM dd yyyy}", Eval("PublicationUTC")) %>'></asp:Label>
                                    </span>
                                    </small>
                                </div>
                                <div id="AllArticleCommentCount" style="float:right;">
                                <asp:Panel ID="pnlCommentsDisabled" Visible="true" runat="server">
                                    <span style="color: #cccccc; text-align: right;">Comments Disabled</span>
                                </asp:Panel>
                            </div>
                            </div>
                            <div class="ArticleSeperator">&nbsp;</div>
                        </div>
                    </ItemTemplate>

                </telerik:GridTemplateColumn>
            </Columns>
        </MasterTableView>
        <ClientSettings EnableAlternatingItems="false"></ClientSettings>
    </telerik:RadGrid>

Answer 1

Hi,

without providing a ready-to-use solution, I'd like to give you some hints. Usually this problem is solved using a floating Pattern. The trick is to use fixed padding Values for the fixed column (like 75px) and no width at all for the main column, which will use up the existing space.

This quite old and pretty good article from some css pioneers explains how it is done: http://www.alistapart.com/articles/holygrail

Here is a quick extracted snipped (you'll need to read the article above, though, to be able to use it, i guess)

#container .column {
  position: relative;
  float: left;
}
#center {
  padding: 10px 20px;    /* CC padding */
  width: 100%;
}
#left {
  width: 180px;          /* LC width */
  padding: 0 10px;       /* LC padding */
  right: 240px;          /* LC fullwidth + CC padding */
  margin-left: -100%;
}

This should help you solving your Problem yourself :)

Best regards,

UPDATE: Yes i see that the example will provide a solution for a three-column layout, while only a two-column solution is needed. In fact, a two-column solution is even much easier to achieve. You'll have to work on it a bit, though.