Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Oct 2007
    Posts
    10
    Thanks
    2
    Thanked 1 Time in 1 Post

    Transitioning to 3 fixed column CSS

    I'm working on developing a standardized layout in HTML and CSS that will match the look-n-feel of this page, which as you can see makes extensive use of layout tables, and generally seems hacked together. We're rolling out a bunch of additional sites and I want to do it "the right way".

    I'm working on this new page, building on the static 3 column from Dynamic Drive.

    I'm completely blown away by how insanely different IE and Mozilla are rendering the page -- I'd read about the headaches but now that I'm actually wresting with it, it's shocking. I think I can figure out how to get the columns to stop at the same time down at the bottom of the page, so for now my question is:

    How can I get the 3 column "News/Announcements/Updates" section that you can see on the old site to appear below the left and center column on the new site? I haven't tried to wrap my brain around another whole set of nested DIVs, but is that even worth trying? Or am I headed for a migraine?

  • #2
    New Coder
    Join Date
    Oct 2007
    Posts
    49
    Thanks
    5
    Thanked 9 Times in 9 Posts
    add this line:
    Code:
    	</div>
    	</div>
    <div style = "clear:both;"></div>
      </div>
      
      <div id="footer">
    and you should be good!

  • Users who have thanked dcostalis for this post:

    jpm121 (10-31-2007)

  • #3
    New Coder
    Join Date
    Oct 2007
    Posts
    10
    Thanks
    2
    Thanked 1 Time in 1 Post
    Ah, most excellent. I've made the chance and and it evened up the columns.

    Did I just need something in there to break up the column format and stop the "even column" code from spilling down 10,000 pixels? (I'm actually trying to learn the "why" in addition to the how)...

    Next up is the embedded columns, which I think I can do with margins pretty easily, as long as it's inside the main container DIV. Further bulletins as events warrant.

  • #4
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Hi! there.

    In my signature at the bottom there is a URL with links to very many helpful sites. Maybe something useful there.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #5
    New Coder
    Join Date
    Oct 2007
    Posts
    10
    Thanks
    2
    Thanked 1 Time in 1 Post
    Okay. For the recond, I'd like to state that Microsoft's Web Expression is pretty awesome. I managed to mangle the layout that dcostalis helped me with earlier, and in a fit of frustration I loaded the 3 column template included with Expression. A few tweaks here and there, and everything came together -- passed the validator on the first try and looks good in all browser flavors I've tried so far. I think the key is a mixture of floats and fixed positioning (I really liked the thread posted here in this forum too).

    I wonder if anyone could take a quick look and see why there is a white bar at the bottom of the screen please? I'm getting better and figuring out all the border/padding/margin stuff, but this one has me stumped:

    http://www.jpmeredith.com/deerfieldp...ndation/test12

    Thanks!

  • #6
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    Code:
    #footer p { margin-top: 0; }
    should work

  • #7
    New Coder
    Join Date
    Oct 2007
    Posts
    10
    Thanks
    2
    Thanked 1 Time in 1 Post
    Thanks jlhaslip, that sure did it. I was focused on something above dangling down instead of something from below poking up.

  • #8
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    Firefox 2 with Firebug to inspect the elements on a page.

    Rarely disappoints me.

  • #9
    New Coder
    Join Date
    Oct 2007
    Posts
    10
    Thanks
    2
    Thanked 1 Time in 1 Post
    Yep, I installed it yesterday and it's a nice tool, I just found the thingie that lets you view borders/margins/padding. Nice!

  • #10
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by jpm121 View Post
    Yep, I installed it yesterday and it's a nice tool, I just found the thingie that lets you view borders/margins/padding. Nice!
    This may interest you. IE and Firefox on screen together.

    http://litmusapp.com/labs

    CSSVista

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

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