I need help designing this layout

Popovich88 · February 24, 2010, 5:32pm

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.

!-- 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



#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;
  
}

RyanReese · February 24, 2010, 5:43pm

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

#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)

#main_content
{
    float:left;  
    min-height: 600px;
}
* html #main_content{height:600px;}

Popovich88 · February 24, 2010, 6:09pm

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.

RyanReese · February 24, 2010, 6:26pm

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 :).

Popovich88 · February 25, 2010, 9:48am

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

PaulOB · February 25, 2010, 11:52am

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.

Popovich88 · February 25, 2010, 3:29pm

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.

 #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.

Popovich88 · February 25, 2010, 4:42pm

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.

PaulOB · February 25, 2010, 4:53pm

You mean like this example. If you close the window the float does not drop.

PaulOB · February 25, 2010, 5:11pm

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[URL=“http://www.pmob.co.uk/temp/polygon.htm”] various methods of achieveing what you want.

Stomme_poes · February 25, 2010, 6:40pm

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 : )

RyanReese · February 25, 2010, 6:50pm

I think Paul meant that the float will shrinkwrap, though if it can it will try to expand all the way to 100% 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

Stomme_poes · February 25, 2010, 7:04pm

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.

PaulOB · February 25, 2010, 8:00pm

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.


<!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).

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.

Stomme_poes · February 25, 2010, 8:19pm

Thanks for the explanation, Paul and Ryan. : )

Popovich88 · February 26, 2010, 12:37pm

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?

PaulOB · February 26, 2010, 12:44pm

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.