I still don't get faux columns.

pdk · May 17th, 2007, 11:54 PM

hi, I've posted about this before, and I've been given some links, but I still can't for the life of me figure it out.

http://pdk.lolmaha.com/design/

I want to make the middle two columns (sidebar and main content) the same length down. Apparently this is really easy, but I'm retarded or something, I guess.

if someone could explain what I need to add, I'd really appreciate it.

BonRouge · May 18th, 2007, 03:05 AM

For that design/layout, faux columns might not be the answer. You could possibly try something like this: http://bonrouge.com/~equalheightcss or maybe even some javascript: http://bonrouge.com/~fixH

Lchad · May 18th, 2007, 09:09 AM

PDK you are so funny!

:laughbounce3:Your alt tags are hysterical.

Let me see if I can explain this to you. Since you are right, you don't quite understand it yet.

With faux columns you must have a wrap div. The wrap div will have an image applied to it as the background. (see attachment on left)

That's where you would nest your side div and main div within the wrap div. Using margins, padding you can put the two nested div's right over the top.

Or you could use this second attachment the sliced up image as the wrap div's background and repeat-y.

So your side div and menu div do not get and colors or background images applied. You just enter text into those areas.

Is that better or more confusing?

Ryan Fait · May 18th, 2007, 07:46 PM

Code:

<div class="wrap">
  <div class="content">
    <p>Content. Content. Content.</p>
  </div>
  <div class="side">
    <p>Side content.</p>
  </div>
</div>

Code:

.wrapper {
  width: 700px;
  background: #000; /* The background color of the side bar assuming the sidebar will always be shorter than the content div. */ 
}
.content {
  width: 500px;
  background: #666;
  float: right;
}
.side {
  width: 200px;
  float: left;
}

pdk · May 18th, 2007, 10:03 PM

I'm still really lost. I do have a wrap div, unless I'm doing it wrong.

here's my style.css

Code:

<style type='text/css'>
                body {
                   margin: 0;
                   padding: 5px;  
		   text-align: center; 
	         }
		body {
		 background: #660000 url('background.png'); repeat-y 50% 0; 

		}
		
                div {
                    font: 18px sans-serif;
                    color: white;
                    border: 1px solid black;
                    background: #660000;
                    height: 200px;
                    padding: 5px;
                
    		}

		div#wrap {
		margin: 20px auto;
		height: auto;
		width: 780px;
		text-align: left;
		background: transparent;	

		}		

		div#header {
		    height: auto;
		    width: 767px;
                    margin: 0 5px 5px 0;
                
		}
		div#column1 {
		    float: left;   
                    height: auto;
		    width: 150px;
                    margin: 0 5px 5px 0;
		
                }
                div#column2 {
                    
		    width: 600px;
		    margin: 5px 5px 5px 167px;
		 
                }
                div#footer {
                    height: 35px;
                    width: 767px;
		    margin: 0 0 0 0;
                    clear: both;
		
                }

</style>

Lchad · May 19th, 2007, 06:11 PM

Give me a little time and I'll try to make sense of this for you.. sorry to leave you hanging some how I missed this post.

Lchad · May 20th, 2007, 03:17 PM

Here is a working faux columns example for you. If you copy and paste this into your program, it will work in Firefox. Did not text on other browsers.

Here is the css

Code:

body{
        margin: 0;
        text-align: center;
        background: #660000;
             }
        
  p {
        color: #FFFFFF;
        font: 14px Verdana, Arial, Helvetica, sans-serif;
        }    
  div#wraptop {
    margin: 0 auto;
    width: 780px;
    background: url(top.jpg) no-repeat;
    height: 19px;        

        }
  div#wrapmiddle {
    width: 780px;
    margin: 0 auto;
    background: url(middle.jpg) repeat-y;
    overflow:hidden;
        }    
  div#wrapbottom {
    width: 780px;
    margin:0 auto;
    background: url(bottom.jpg) no-repeat;
    height: 19px;
        }    

  div#header {
        height: auto;
        width: 780px;
        margin: 0 auto;
                
        }
   div#column1 {
        float: left;   
         height: auto;
         width: 146px;
         margin: 5px 10px 5px 20px;
         padding: 2px;
        
          }
  div#column2 {
            float:left;       
            width: 568px;
            margin: 5px 5px 5px 5px;
            padding: 2px;
         
             }
    div#footer {
                    height: 35px;
                    width: 780px;
                    margin: 0 auto;
                    clear: both;
        
                }

Here is the html obviously missing your header and footer graphics

Code:

<body>
<div id="header"><p>Here is your Header</p> </div>
<div id="wraptop"></div><!--end wrap top div -->
<div id="wrapmiddle">
    <div id="column1"><p>Here is your<br /> 
    column1 div </p></div>
    <div id="column2">
      <p>&nbsp;</p>
      <p>Here is your column2 div </p>
      <p>&nbsp;</p>
    </div><!--end column2 div -->
</div><!--end wrap middle div -->
    <div id="wrapbottom"></div>
</div><!--end wrap div -->
<div id="footer"><p>Here is your footer</p></div>
</body>

</html>

The graphics I created are attached as well.

See if this helps you understand how faux columns are done ok!

pdk · May 21st, 2007, 01:54 AM

Oh god, I seriously feel stupid. I got yours to work (http://pdk.lolmaha.com/ughimsodumb), but when I tried applying this to my own, but without using a top wrap or bottom wrap, it looks really really bad.

Lchad · May 21st, 2007, 07:52 AM

Yeah.. that looks good!! Are you all set now?