I still don't get faux columns.

pdk · #1 May 18th, 2007, 02:54

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 · #2 May 18th, 2007, 06:05

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 · #3 May 18th, 2007, 12:09

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 · #4 May 18th, 2007, 22:46

Code: Select all

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

Code: Select all

.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 · #5 May 19th, 2007, 01:03

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

here's my style.css

Code: Select all

<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 · #6 May 19th, 2007, 21:11

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 · #7 May 20th, 2007, 18:17

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: Select all

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: Select all

<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 · #8 May 21st, 2007, 04:54

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 · #9 May 21st, 2007, 10:52

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

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
2 columns	alexgeek	Web Page Design	2	Aug 14th, 2007 23:57
3 Columns with CSS	Pádraig	Starting Out	8	May 31st, 2007 09:32
Three columns	R8515198	Web Page Design	5	May 24th, 2007 19:16
Faux Columns Problem - scolling up / down causes part of background image 2 disappear	brianwilson71	Web Page Design	17	Apr 25th, 2007 00:34
Faux column problems	pdk	Web Page Design	1	Feb 11th, 2007 13:24

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
I still don't get faux columns.