SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Location
    Porto,Portugal
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    I need help designing this layout

    I need to design a layout like this. http://img714.imageshack.us/img714/9859/layouts.png

    The top bar and footer are ok but i am having troubles with main content.
    Menu and header are also fine in big resolutions. If i resize the window,the content will push the sidebar to bottom. Also having troubles to put the main content into the container. If it is too big it is also pushes to bottom.

    Here is my last code.
    I have made a lot of expierences so it will probably have lots of things wrong.

    Code HTML:
    !-- Main Container -->
          <div id="page_wrapper">
     
              <!-- Top Bar -->
              <div id="top_bar">
                  <div id="info_bar">
                  </div>
     
                  <div id="user_info">
                      <ul>
                          <li></li>
                          <li></li>
                          <li></li>
                      </ul>
                  </div>
              </div>
     
              <!-- Content wrapper -->
              <div id="inside">
                 <div id="main_content">
                    <div id="header">
                      <div id="logo">Logo</div>
                    </div>
     
                    <div id="main_menu">
                      <ul>
                          ...
                      </ul>
                    </div>
     
                     <div id="content">
                        <div id="left_bar">Left bar</div>
                        <div id="content_main">Content</div>
                     </div>
                </div>
     
                <div id="sidebar">
     
                </div>
     
                  <div class="clear"></div>
              </div>
     
              <!-- End content wrapper -->
     
     
              <!-- Footer -->
              <div id="footer">
                  <div id="footer_links">
                    <ul>
                      ...
                    </ul>
                  </div>
              </div>
          </div>
      </body>
    </html>


    Important css
    Code CSS:
     
    #page_wrapper {width: 100&#37;;}
     
    #page_wrapper #inside
    {
      //Paddings and margins - not set by now.
    }
     
    #top_bar
    {
        background-color: #bfbfbf;
        width: 100%;
        height: 40px;
    }
     
    #main_content
    {
        float:left;  
        min-height: 600px;
        height:auto !important;
        height: 600px;
    }
        #header
        {
          margin-top: 15px;
          height: 100px;
          padding-bottom: 5px;
        }
            #header #logo
            {
                margin-left: 40px;
                width: 330px;
                height: 100px;
            }
       #main_menu
       {
          border-bottom: 2px solid #ffc000;
       }
            #main_menu li
            {
                background-color: #d9d9d9;
                font-weight:bolder;
                text-align: center;
                width: 120px;
                height: 32px;
                display:inline-block;
                padding-right: 5px;
                -moz-border-radius: 7px 7px 0px 0px;
                -webkit-border-radius: 7px 7px 0px 0px;
            }
     
     
        #content #left_bar
         {
            border-right: 2px solid orange;
            width: 180px;
            float:left;
            min-height: 600px;
            height:auto !important;
            height: 600px;
         }
     
         #content #content_main
         {        
            float:right;
            min-height: 600px;
            height:auto !important;
            height: 600px;
         }
     
    #sidebar
    {
        background-color: #FFF;
        border-left: 1px #d9d9da solid;
        width:180px;
        min-height: 600px;
        height:auto !important;
        height: 600px;
        float:right;
        display: inline;
        padding-left: 10px;
    }
     
    #footer
    {
       background-color: #7f7f7f;
       font-size: 10px;
       color:#4d4047;
       width: 100%;
       height: 35px;
     
    }

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,762
    Mentioned
    13 Post(s)
    Tagged
    0 Thread(s)
    You could set a min-width on the parent that totals the column widths that way it will be fluid but it will not get any smaller then the min-width . Also, I notice this
    Code:
    #main_content
    {
        float:left;  
        min-height: 600px;
        height:auto !important;
        height: 600px;
    }
    min-height/height/height hack. That may seem like it is working, however, you shouldn't do taht way . IE breaks with ti. Just do this (you will need to change all your examples to this)
    Code:
    #main_content
    {
        float:left;  
        min-height: 600px;
    }
    * html #main_content{height:600px;}
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Location
    Porto,Portugal
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Does the min-width works in ie?

    It will be useful but wont solve all my problems. I still having troubles setting the widths of the floated collumns. If the content is too big it pushes the sidbars or content to bottom.

    I could try max-width them but i am thinking there might be better solutions.
    As i said i am sure my code can be widely improved and have missing things.

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,762
    Mentioned
    13 Post(s)
    Tagged
    0 Thread(s)
    min-width doesn't work in IE6 but it does in IE7/8.

    If you're worrying about it pushing down, then you can move the #main-content div after sidebar and then unfloat the #main-content. Then give it a 191px right margin.

    Then the parent can have a min-width to whatever you set .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Location
    Porto,Portugal
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the unfloat main content tip. It does what i want.


    A last question not related to this project: Lets say i have 2 floated collumns,main content fluid and sidebar fixed.
    Is there any way that if the fluid content is too big creates a scroller bar instead of pushing the sidebar down?


    Many thanks for the help

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Popovich88 View Post

    A last question not related to this project: Lets say i have 2 floated collumns,main content fluid and sidebar fixed.
    Is there any way that if the fluid content is too big creates a scroller bar instead of pushing the sidebar down?
    Hi,

    You'll need to qualify that with a basic code example as I can see a number of ways that your request could be interpreted.

    Are you talking about horizontal scrolling or vertical scrolling for a start.

    When you say two floated columns with one a fixed width and one a fluid width - how are you making the fluid width floated element exactly?

    In both cases to effect a scrollbar would of course mean limiting the dimensions and setting overflow somwehere. Of course you can't really make one element react to scroll dependent on the size of the other which is why I'd like t see a rough example of what you mean before posting any code.

  7. #7
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Location
    Porto,Portugal
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    You'll need to qualify that with a basic code example as I can see a number of ways that your request could be interpreted.

    Are you talking about horizontal scrolling or vertical scrolling for a start.

    When you say two floated columns with one a fixed width and one a fluid width - how are you making the fluid width floated element exactly?

    In both cases to effect a scrollbar would of course mean limiting the dimensions and setting overflow somwehere. Of course you can't really make one element react to scroll dependent on the size of the other which is why I'd like t see a rough example of what you mean before posting any code.
    I mean having two collumns side by side. The main one set in % width floated left and the sidebar with fixed with floated right.
    If i make my browser window smaller the main collumn might push the fixed collumn down. I wish to add a horizontal scrollbar to the main collumn instead of pushing the sidebar down.



    In the meantime i keep designing my site and it looks pretty good in all browsers. Just some small problems in ie6.

    if the content of the main collumn is bigger than the height of sidebar it starts "invading" the left collumn like there is only one collumn.

    Code CSS:
     #content #left_bar
            {         
                border-right: 2px solid orange;
                width: 220px;
                float:left;
                margin-right: 10px;
                padding: 15px;
                min-height: 500px;
            }
            #content #content_main
            {          
                padding:15px;
                overflow:auto;
                margin-right: 10px;
     
            }

    And my top bar like duplicates its size. The bar itself is correctly displayed
    but ie6 created a "double" grey bar below.

  8. #8
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Location
    Porto,Portugal
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have removed overflow:auto and it looks great in ie6 but now the most recent browsers
    have the old ie6 problem.

    Also i would prefer to have the content stays in the middle collumn instead of adding scrollbar.

    I am sure there is something about the floats.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Popovich88 View Post
    I mean having two collumns side by side. The main one set in &#37; width floated left and the sidebar with fixed with floated right.
    If i make my browser window smaller the main collumn might push the fixed collumn down. I wish to add a horizontal scrollbar to the main collumn instead of pushing the sidebar down.
    You mean like this example. If you close the window the float does not drop.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Popovich88 View Post
    I mean having two collumns side by side. The main one set in % width floated left and the sidebar with fixed with floated right.

    Hi,

    That's why I asked how you were doing this because you can't have 2 floated columns side by side where one is floated with a fixed width and the other one has no width. The float with no width will always try to be 100% wide and therefore is not suitable for fluid content.

    You can't use percentage dimensions for one and px for the other because that will never add up to 100%.

    What you need to do is float one column and then leave the other column unfloated with either a margin to clear the float or overflow:hidden and haslayout added so that it forms a rectangular block to the side. remember though that the float html has to come first in context. If you want to use source order then you would need to float with 100% width and use complicated negative margin techniques to achieve it. However you would still get a float drop in IE6 unless you used a min-width routine to stop the layout shrinking before it dropped.

    You should not be setting heights at all just to make things equal as that will never work. Have a look through the 3 col sticky thread for various methods of achieveing what you want.

  11. #11
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    The float with no width will always try to be 100% wide and therefore is not suitable for fluid content.
    What?

    I thought they'd shrink-wrap to content, and that shrink-wrapping isn't exactly the same cross-browser if the content is wrappable text. If I could get floats to try to be 100% wide it would solve some issues I have : )

  12. #12
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,762
    Mentioned
    13 Post(s)
    Tagged
    0 Thread(s)
    I think Paul meant that the float will shrinkwrap, though if it can it will try to expand all the way to 100&#37; wide, if said element has enough content '

    Just make a page with a floated <p>. With a lot of text. That's it, oh and a border to see it..it will go 100% wide if enough text is in it
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  13. #13
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Depends on the browser.

    I had someone asking me what the difference was between IE and FF on a page where there was a widthless float with text.

    IE let the whole line of text go without wrapping, so it made the float as wide as the person (not really a client of mine) wanted. But FF wrapped the text pretty quickly, making the box too narrow for the person's liking.

    *edit I should mention this was a page where there was some set-width sidebar and the widthless float was next to it.

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by mallory
    I thought they'd shrink-wrap to content, and that shrink-wrapping isn't exactly the same cross-browser if the content is wrappable text. If I could get floats to try to be 100&#37; wide it would solve some issues I have : )
    You misunderstood what I meant

    It's as Ryan said and although a float will shrinkwrap its content it will just keep on expanding with that fluid content until it reaches 100%.

    You can't put a widthless float next to a fixed width float and expect it to only fill the available space. It will try and be 100% wide if it has fluid content pushing it wide and eventually it will displace the other float as it seeks to take up all 100% of the space.

    However in IE6 and IE7 the widthless float will fill only the remaining space if it is the second float in sequence on that line.

    e.g.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    .left {
        float:left;
        background:red
    }
    .right {
        float:right;
        width:300px;
        background:blue
    }
    </style>
    </head>
    <body>
    <div class="right">
        <p>Lorem ipsum text Lorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum text ipsum text Lorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum text </p>
    </div>
    <div class="left">
        <p>Lorem ipsum text Lorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum text  text Lorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum text ipsum text Lorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum textLorem ipsum text </p>
    </div>
    </body>
    </html>
    In all browsers except Ie6 and 7 the widthless float will have dropped down to a new line. IE6 and 7 let the widthless float fill the space up to the other float (which is incorrect behaviour.)

    If the html is reversed of course then the widthless float just goes to 100% wide everywhere (assuming the text is as wide as the monitor of course).


    Quote Originally Posted by popovich88
    I am sure there is something about the floats.
    I have put up an example here that shows one way of doing the layout you wanted and achieving equal columns (just view source). However it is a little complicated and source dependent and has a caveat in that the header and top bar must be a fixed height because I have pulled the right column upwards by the header height.

    I also added the min-width fix for IE6 to stop it breaking.

    An easier solution would be to imitate the equal columns with background images on nested containers. Or use the absolute overlay method shown here.

    You can find more about equal columns here.

  15. #15
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Thanks for the explanation, Paul and Ryan. : )

  16. #16
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Location
    Porto,Portugal
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks all for the help. Just one more question. I have divided my main content into 2 collumns. One floated left and one unfloated. But if my content is too big it passes below the footer. only ie6 works fine. What could be the problem?

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Popovich88 View Post
    Thanks all for the help. Just one more question. I have divided my main content into 2 collumns. One floated left and one unfloated. But if my content is too big it passes below the footer. only ie6 works fine. What could be the problem?
    We'd need to see your code to debug properly.

    Have you cleared your floats?

    Have you set heights and then exceeded them?

    It could be many things and we'd need to see you revised code to debug properly - do you have a current link.

    In case you missed it I actually made you a demo that matches your drawing exactly.


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
  •