SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Where am I going wrong? ;-(

    I thought I had made a 'liquid' layout, but When I narrow the browser window, the #content dives under the left hand column.

    Here is the page ...

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>myindex.html</title>
    <style type="text/css">
    <!--
    #header {
    background-color: #EDF8CB;
    height: 80px;
    width: 100%;
    }
    #logo {
    background-color: #FFF;
    float: left;
    height: 80px;
    }
    #bannerfloatright {
    background-color: #D4BFFF;
    float: right;
    height: 80px;
    width: 60%;
    }
    #menu {
    background-color: #E10000;
    height: 30px;
    width: 100%;
    border: thin solid #000;
    }
    #body {
    background-color: #FFF;
    width: auto;
    }
    #bar_left {
    background-color: #FCF;
    padding: 10px;
    float: left;
    width: 160px;
    }
    #bar_right {
    padding: 10px;
    float: right;
    width: 15%;
    background-color: #FCF;
    }
    #content {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #000;
    background-color: #FFF;
    padding: 10px;
    float: left;
    width: 60%;
    }
    #footer {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
    font-weight: bold;
    background-color: #A0FEC6;
    text-align: center;
    clear: both;
    height: 20px;
    width: 100%;
    font-style: italic;
    }
    #container {
    background-color: #FFF;
    width: 100%;
    }
    #wrapper {
    float: left;
    }


    </style>
    </head>
    <body>
    <div id="container">
    <!--header wrapper -->
    <div id="header">
    <div id="logo">logo Goes Here</div>
    <div id="bannerfloatright">Content for id "bannerfloatright" Goes Here</div>
    </div>
    <!--header wrapper end-->
    <div id="menu">Content for id "menu" Goes Here</div>
    <!--body wrapper -->
    <div id="body">
    <!--bar_left -->
    <div id="bar_left">Content for id "bar_left" Goes Here
    <ul>
    <li>Working through a top-down, bottom-up approach</li>
    <li>The vitality of conceptual synergies is of supreme importance</li>
    </ul>
    </div>
    <!--end bar_left -->
    <!--wrapper -->
    <div id="wrepper">
    <!--bar_right -->
    <div id="bar_right">Content for id "bar_right" Goes Here
    <p>Eu fugiat nulla pariatur. Quis nostrud exercitation sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Excepteur sint occaecat qui officia deserunt ullamco laboris nisi. Ut aliquip ex ea commodo consequat.</p>
    <p>Ut aliquip ex ea commodo consequat. Excepteur sint occaecat mollit anim id est laborum. Duis aute irure dolor ut labore et dolore magna aliqua. Velit esse cillum dolore sunt in culpa quis nostrud exercitation.</p>
    </div>
    <!--end bar_right -->
    <!--content -->
    <div id="content">Content for id "content" Goes Here
    <p>Maximization of shareholder wealth through separation of ownership from management the strategic vision - if indeed there be one - is required to identify by adopting project appraisal through incremental cash flow analysis. Working through a top-down, bottom-up approach, to experience a profound paradigm shift, taking full cognizance of organizational learning parameters and principles. Organizations capable of double-loop learning, whether the organization's core competences are fully in line, given market realities. The balanced scorecard, like the executive dashboard, is an essential tool in a collaborative, forward-thinking venture brought together through the merging of like minds.</p>
    <p>An important ingredient of business process reengineering presentation of the process flow should culminate in idea generation, highly motivated participants contributing to a valued-added outcome. Building flexibility through spreading knowledge and self-organization, an investment program where cash flows exactly match shareholders' preferred time patterns of consumption the components and priorities for the change program. That will indubitably lay the firm foundations for any leading company through the adoption of a proactive stance, the astute manager can adopt a position at the vanguard. The three cs - customers, competition and change - have created a new world for business from binary cause and effect to complex patterns, the strategic vision - if indeed there be one - is required to identify.</p>
    </div>
    <!--end content -->
    </div>
    <!--end wrapper -->
    </div>
    <!--body wrapper end-->
    <!--footer -->
    <div id="footer">Copyright &copy;2010 blah blah blah...</div>
    <!--footer end-->
    </div>
    </body>
    </html>

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,746
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    I didn't test to see if there was anything else wrong with your code but in your HTML you have this
    Code:
    <div id="wrepper">
    Make that "wrapper"

    PS-If it still isn't working a link would be preferable for debugging
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just a quick mock up that prevents the drop. It seemed to me you also had some needless containers (#wrapper, #body...). See if this gets you further:

    Code CSS:
    #header {
    background-color: #EDF8CB;
    height: 80px;
    width: 100&#37;;
    }
     
    #logo {
    background-color: #FFF;
    float: left;
    height: 80px;
    }
     
    #bannerfloatright {
    background-color: #D4BFFF;
    float: right;
    height: 80px;
    width: 60%;
    }
     
    #menu {
    background-color: #E10000;
    height: 30px;
    width: 100%;
    border: thin solid #000;
    }
     
    #bar_left {
    background-color: #FCF;
    padding: 10px;
    float: left;
    width: 160px;
    }
     
    #bar_right {
    padding: 10px;
    float: right;
    width: 15%;
    background-color: #FCF;
    }
     
    #content {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #000;
    background-color: #FFF;
    padding: 10px;
    margin-left:180px;
    margin-right:20px;
    }
     
    #footer {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
    font-weight: bold;
    background-color: #A0FEC6;
    text-align: center;
    clear: both;
    height: 20px;
    width: 100%;
    font-style: italic;
    }
     
    #container {
    background-color: #FFF;
    width: 100%;
    overflow:hidden;
    min-width:600px;
    }

    Code HTML4Strict:
    <body>
    <div id="container">
    <div id="header">
    <div id="logo">logo Goes Here</div>
    <div id="bannerfloatright">Content for id "bannerfloatright" Goes Here</div>
    </div>
    <div id="menu">Content for id "menu" Goes Here</div>
     
     
    <div id="bar_left">Content for id "bar_left" Goes Here
    <ul>
    <li>Working through a top-down, bottom-up approach</li>
    <li>The vitality of conceptual synergies is of supreme importance</li>
    </ul>
    </div>
     
    <div id="bar_right">Content for id "bar_right" Goes Here
    <p>Eu fugiat nulla pariatur. Quis nostrud exercitation sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Excepteur sint occaecat qui officia deserunt ullamco laboris nisi. Ut aliquip ex ea commodo consequat.</p>
    <p>Ut aliquip ex ea commodo consequat. Excepteur sint occaecat mollit anim id est laborum. Duis aute irure dolor ut labore et dolore magna aliqua. Velit esse cillum dolore sunt in culpa quis nostrud exercitation.</p>
    </div>
    <div id="content">Content for id "content" Goes Here
    <p>Maximization of shareholder wealth through separation of ownership from management the strategic vision - if indeed there be one - is required to identify by adopting project appraisal through incremental cash flow analysis. Working through a top-down, bottom-up approach, to experience a profound paradigm shift, taking full cognizance of organizational learning parameters and principles. Organizations capable of double-loop learning, whether the organization's core competences are fully in line, given market realities. The balanced scorecard, like the executive dashboard, is an essential tool in a collaborative, forward-thinking venture brought together through the merging of like minds.</p>
    <p>An important ingredient of business process reengineering presentation of the process flow should culminate in idea generation, highly motivated participants contributing to a valued-added outcome. Building flexibility through spreading knowledge and self-organization, an investment program where cash flows exactly match shareholders' preferred time patterns of consumption the components and priorities for the change program. That will indubitably lay the firm foundations for any leading company through the adoption of a proactive stance, the astute manager can adopt a position at the vanguard. The three cs - customers, competition and change - have created a new world for business from binary cause and effect to complex patterns, the strategic vision - if indeed there be one - is required to identify.</p>
    </div>
     
    <div id="footer">Copyright &copy;2010 blah blah blah...</div>
    </div>
    </body>

    IE might need some extra tweaks but this should get you ahead. There might also be other solutions and i'm sure some one will post them.

    Any problems, questions.... just ask
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,746
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Hi, Ie6 needs min-width helped in there, so either use an expression'
    Code:
    * html #container { 
       width: expression( document.body.clientWidth < 601 ? "600px" : "auto" );
    }
    Or use a few extra elements as shown here (quiz 3). The expressions can be resource intensive so if you do want to not use an expression you should defiantely look into the extra markup
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, forgot to mention that IE6 doesn't do min-width. I used to have those xpression for it but it slows things down. Now i use the solution from the quiz .... much better. And to get around the IE6 border problem, the OP could be better off using paddings as shown in that quiz. Saves an extra element
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,746
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Yes it does though IE6's limit is 960 on borders and he is doing 600 so he can use either . You only need a 2nd element with a border if it exceeds 960
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  7. #7
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Yes it does though IE6's limit is 960 on borders and he is doing 600 so he can use either . You only need a 2nd element with a border if it exceeds 960
    If the OP will be keeping the 600 Future reference never hurts lol
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,746
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Agreed
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  9. #9
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help folks, I will try the advice/instructions out this evening.

    Quote Originally Posted by RyanReese View Post
    I didn't test to see if there was anything else wrong with your code but in your HTML you have this
    Code:
    <div id="wrepper">
    Make that "wrapper"
    That's what happens when ...
    a. new to this stuff
    b. tired
    c. changed the code 20 times to try to get it working
    d. etc., etc.,


  10. #10
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by emerald_sp View Post
    Thanks for the help folks, I will try the advice/instructions out this evening.


    That's what happens when ...
    a. new to this stuff
    b. tired
    c. changed the code 20 times to try to get it working
    d. etc., etc.,

    We all went down that road
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need


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
  •