SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jan 2009
    Location
    Visalia CA
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Three column Footer with XHTML/CSS

    Hi,

    I'm designing a skin for a DotNetNuke site and need to have 3 DIVs in my footer container DIV positioned left, right and middle. The left div contains some elements already as does the right div. The middle div will contain an image map that will be placed within a text/html module in that DIV after the skin is finalized.

    At this point, the footerRightPane and footerMidPane are not positioned correctly. Here's the CSS as it stands now:
    HTML Code:
    #footer
    {
        width: 960px;
        border: 1px;
    }
    #footerleftpane
    {
        width: 300px;
        float: left;
    }
    #footerRightPane
    {
        width: 300px;
        float: right;
    }
    #footerMidPane
    {
        padding:10px;
    }
    My home.ascx file contains this markup:
    HTML Code:
    <div id="footer">
        <div id="footerleftpane" runat="server">
            <dnn:LOGO id="dnnLogo" runat="server" />
            <h3>Driving business performance.</h3>
            <h3>Practical Sales and Operations Planning</h3>
            <h3>for medium sized businesses.</h3>
        </div>
        <div id="footerRightPane" runat="server">
            <dnn:COPYRIGHT id="dnnCopyright" runat="server" /><br />
            <dnn:PRIVACY id="dnnPrivacy" runat="server" />
            <dnn:TERMS id="dnnTerms" runat="server" />
            <br class="clear" />
        </div>
        <div id="footerMidPane" runat="server">
        </div> 
    </div>
    What changes are needed to ensure that the 3 divs align next to each other within the container div?

    Thanks,
    Sid

  2. #2
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Floats were never intended to build entire layouts, and there are better methods out there now. I'd recommend either inline blocks or CSS tables (emphasis on the CSS part, as HTML tables are for tabular data only) for something like this.

    CSS tables work well for columns because, like HTML tables, they don't allow wrapping, so it's pretty much guaranteed that they won't break.

    The only problem with these methods is browser support. I'm pretty sure IE8 and up supports both inline-blocks and CSS tables, so unless you're adamant on supporting browsers from prehistoric times, you should be fine.

  3. #3
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Spritanium View Post
    Floats were never intended to build entire layouts
    Dunno where you got that idea... I'd suggest whatever it was you ignore it.

    Quote Originally Posted by Spritanium View Post
    I'd recommend either inline blocks or CSS tables (emphasis on the CSS part, as HTML tables are for tabular data only)
    Given it's opposing alignments, and the lack of predictable behavior for table-cell and sizings... uhm... no...

    I'm stuck wondering why it isn't working for you.... float left, float right, no float. Should go right in no problems. Do you have an example/live page of it so we can see it failing? I suspect whatever is going wrong is probably

    Though... did you forget to add float:wrapping like overflow to the outer wrapper? Are you just asking why the parent #footer is only showing 0px tall with it's borders stacked behind the floats? If so, that's a lack of float clearing/wrapping. Add overflow:hidden to #footer, be done with it.

    Though I would suggest losing all the pointless fictional "runat" nonsense, but that's just ASP taking a whiz all over your markup. I'm also curious why you've got H3 there when none of them have content after them... since numbered headings are to indicate the start of a subsection, not just text you happen to want larger on a page.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    @webdbapps You might as well just float each of those columns, since the design is fixed width anyway. You'd just need to set a width on the middle column, too.

    Off Topic:

    Quote Originally Posted by Spritanium View Post
    Floats were never intended to build entire layouts ...
    As mentioned, that's arguable. Even from the earliest days, the W3C had a page that demonstrated their usefulness for page layout. (That page disappeared only a couple of years ago, sadly.)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •