SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    @alexstanford Alex's Avatar
    Join Date
    Apr 2004
    Location
    Jacksonville, Florida
    Posts
    757
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Floating layout issues!

    Hello everyone,

    I'm working on a project that is classified, so I cannot show the actual results of my code to you. I can explain that the right column is simply dropping and the left content column is 100% of the viewing area.

    I'm trying to implement a floated 2 column fluid layout into an existing site using tables for this. If someone could help me get this solution, which is mostly comprised through Paul O'Brien's ideas, working, then I could probably get my boss to use it a lot easier. :-P

    Anyway, here is the current CSS I've written to make this work. I've left out the markup as it is self-explanatory.

    Code:
    /* @group Alex's Floating Layout Alternative */
    
    html, body {
    width: 100%;
    }
    
    #outer {
    min-height: 100%;
    margin-right: 180px;
    }
    
    * html  #outer {
    height: 100%;
    }
    
    html>body #outer {
    height: auto;
    }
    
    #left {
    float: right;
    position: relative;
    width: 100%;
    }
    
    #right {
    width: 180px;
    float: right;
    position: relative;
    margin-right: 179px;
    }
    
    * html #right {
    margin-left: -3px;
    }
    
    .outerwrap {
    float: left;
    width: 100%;
    position: relative;
    margin-right: -1px;
    }
    Edit: Actually, here is an example of the markup:

    Code:
    <div id="outer">
    <div class="outerwrap">
    <div id="left">
    content
    </div>
    </div>
    <div id="right">
    sub-navigation
    </div>
    </div>
    Last edited by Alex; May 28, 2008 at 11:25. Reason: Added markup...
    Alex Stanford @alexstanford tumblog about.me in fb G+ K
    TechTalkin The Premier Community for Technology Enthusiasts and Professionals
    Full Ambit Media Zero Sacrifice Web Design & Development; Made in the USA @fullambit in fb G+ K

  2. #2
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I get the picture right. Just to give the idea to start, the use of margins can be reconsidered for IE; The float need to come before in code to sit right of the #outer. If you move the div #right first in html both divs can have min-height 100&#37;. The css accordingly adjusted:
    Code:
    html, body {
    margin:0;
    padding:0;
    height: 100%;
    }
    #outer {
    min-height: 100%;
    margin-right: 180px;
    }
    * html  #outer {
    height: 100%;
    }
    html>body #outer {
    height: auto;
    }
    #left {
    float: right;
    position: relative;
    width: 100%;
    }
    #right {
    width: 180px;
    min-height: 100%;
    float: right;
    position: relative;
    }
    * html #right {
    margin-left: -3px;
    }
    .outerwrap {
    float: left;
    width: 100%;
    position: relative;
    margin-right: -1px;
    }
    Code:
    <div id="right">
    sub-navigation
    </div>
    <div id="outer">
    <div class="outerwrap">
    <div id="left">
    content
    </div>
    </div>
    </div>
    Happy ADD/ADHD with Asperger's

  3. #3
    @alexstanford Alex's Avatar
    Join Date
    Apr 2004
    Location
    Jacksonville, Florida
    Posts
    757
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by erik.j View Post
    If I get the picture right. Just to give the idea to start, the use of margins can be reconsidered for IE; The float need to come before in code to sit right of the #outer. If you move the div #right first in html both divs can have min-height 100&#37;. The css accordingly adjusted:
    Code:
    html, body {
    margin:0;
    padding:0;
    height: 100%;
    }
    #outer {
    min-height: 100%;
    margin-right: 180px;
    }
    * html  #outer {
    height: 100%;
    }
    html>body #outer {
    height: auto;
    }
    #left {
    float: right;
    position: relative;
    width: 100%;
    }
    #right {
    width: 180px;
    min-height: 100%;
    float: right;
    position: relative;
    }
    * html #right {
    margin-left: -3px;
    }
    .outerwrap {
    float: left;
    width: 100%;
    position: relative;
    margin-right: -1px;
    }
    Code:
    <div id="right">
    sub-navigation
    </div>
    <div id="outer">
    <div class="outerwrap">
    <div id="left">
    content
    </div>
    </div>
    </div>
    Thank you Eric, I'll give that a try here in a little bit.

    If you could, take a look at my other thread, where I could use your expertise: http://www.sitepoint.com/forums/show...43#post3836943
    Alex Stanford @alexstanford tumblog about.me in fb G+ K
    TechTalkin The Premier Community for Technology Enthusiasts and Professionals
    Full Ambit Media Zero Sacrifice Web Design & Development; Made in the USA @fullambit in fb G+ K


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
  •