CSS - Faux Column Problems - Going Nuts.......please Help

http://wrath.wr.funpic.org

Hello Devshed. I am new here and am here looking for help. Maybe I'm just tired and dumb right now to figure it out. Anyways if you would take a look at the site I pointed out you'll notice the bottom border is missing. Why?

When I removed the float:left; on the lis it is fine but when it's in there it's all screwed up.

Second thing... if you'll notice my hovers do not work in IE. Is there an alternate way for me to get them to work in IE.

Thanks a lot.

Hi there,

I'm having lots of trouble trying to get a three column system on my website. Unfortunately, it is not on the internet yet, so all i can show you is a screenshot of the problem I am having.

The problem is that the column on the right hand side ("rightcol") is not high enough up. I have tried changing the values and repositing eerything but it goes everywhere else around the screen except the place where I want it!

As you can see from the CSS below, I have a wrapper which everything is contained within. I've tried using absolute positioning for this but it messes up wen the user resizes the browser.

Any help on this matter would be greatly appreciated.

I have taken out the (i think) unneccessary bits from the CSS code (like the link styles and content styles).

The HTML code looks like this (roughly):-

Code:

<div id="wrapper">
            <div id="banner"></div>
            <div id="leftcol"> 
                    links go here>
            </div>
            <div id="content">
                    blah blah blah
            </div>
            <div id="rightcol">
                    links go here
             </div>
             <div id="footer">
                    info goes here
             </div>
</div>

The CSS code is :-

Code:

#wrapper {
width: 770px;
background-color: #FFFFFF;
margin: 10px auto;
border: 1px solid: #000000;
text-align: left;
background-repeat: repeat-y;
}

#leftcol {
margin-top: 20px;
margin-left: 0px;
float: left;
width: 100px;
}

#content {
	background-color: #f5f5f5;
	padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px;
	margin-top: 10px; margin-right: 120px; margin-bottom: 10px; margin-left: 120px;
}

#rightcol {
margin-left: 630px;
margin-right: 10px;
margin-top: 0px;
width: 100px;
float: right;
background: #fff;
border: 1px solid #000;
}

#footer {
clear: both;
border-top: 1px solid #000000;
background-color: #336799;
color: #FFFFFF;
}

If you look at this in both IE and Mozilla/Firefox. On IE, notice how the 2nd column expands with the size of the image, but on Firefox it doesn't. I'm assuming firefox is the one thats correct, since IE is horrible with CSS. How would I go about doing this on Mozilla/Firefox browsers, so that it looks like it does on IE.

http://imgod.us/temp/test1/

Thanks for your time.

Hi guys,

I am struggling a bit with getting the background of one of my css-created columns to be the height I want it to be. If you have a look at http://www.addictivemedia.com.au/clients/REW/ you will see (depending on your browser) that the left column behaves not the way I want it to:

- in IE 6 it creates an additional scrollbar (because it adds the height of the banner at the top to the 100% height I gave to the column)
- in all other browsers it is not as long as the column on the right

The effect I want to achieve is of course for both columns to have the same height and (if possible) to always push the footer to the bottom of the browser window.

I have tried the pushing to the bottom many times and out of previous posts I gather that it probably won't happen for all browsers. But I cannot figure out why the left column doesn't extend as far as the right one.

Thanks for your help!

I am having some problems laying out a center-aligned container with 3 columns within it. I am sure the issue is with float, but I can't figure out how to get around it.

Actually, it does work, but only if the center column is longer than the other two columns. Otherwise, they wrap over the footer and extend outside the container.

Here is the CSS:
Code:

body {
		margin:0px 0px 10px 0px;
		background-image : url(image_name.gif);
		background-repeat:repeat-x;
	    text-align: center;
		}
	A 			{ color: #0066CC; text-decoration: none; font-weight:bold; } 
	A:link		{ color: #0066CC; text-decoration: none; } 
	A:visited	{ color: #0066CC; text-decoration: none; } 
	A:active	{ color: #3399ff;  } 
	A:hover		{ color: #3399ff;  }
	
	h1, h2, h3 {
		margin: 0px;
		padding: 0px;
	}

	
	
#container {
    position: relative;
    margin: 0 auto;
    width: 622px;
    text-align: left;
    padding: 0px;
    border: 1px solid blue;
    }

#topnav {
    width: 622px;
    border: 1px solid black;
    }

#topnav_text {
    width: 622px;
	height: 92px;
    border: 1px solid black;
    }

	
#banner {
    width: 622px;
    border: 1px solid black;
	padding: 10 0 20 0;
    }
	
#footer {
    width: 622px;
    border-top: 1px solid silver;
	padding: 5 0 0 0;
    text-align: left;
    border: 1px solid black;
    }

#homepix {
    width: 235px;
    float: left;
    border: 1px solid green;
	padding: 0 5 0 5;
    }

#homejournal {
    margin-left: 248px;
    width: 215px;
    border: 1px solid red;
	padding: 0 5 0 5;
	background:#fff;
	padding-bottom:20px;
    }

#homeshows {
    float: right;
    width: 135px;
    border: 1px solid blue;
	padding: 0 5 0 5;
	background:#fff;
	padding-bottom:20px;
    }

.homeblog {
 		padding-left:15px;
 		padding-bottom:15px;
 		padding-right:15px;			
	}	

.homeblogbody {
	font-family:verdana, arial, sans-serif;
	color:#333;
	font-size:x-small;
	font-weight:normal;
 		background:#FFF;
 		line-height:110%;
 		padding-left:5px;	
 		padding-right:5px;
	
	}


.homeblogbody a,
.homeblogbody a:link,
.homeblogbody a:visited,
.homeblogbody a:active,
.homeblogbody a:hover {
	font-weight: normal;
	text-decoration: underline;
}

}

.title	{ 
	font-family: verdana, arial; 
	font-size: small; 
	color: #003366; 
	text-transform: uppercase;
	font-weight:bold;	
	}			
	

.homeside {
	font-family:verdana, arial, sans-serif;
	color:#333;
	font-size:x-small;
	font-weight:normal;
 		background:#FFF;
 		line-height:140%;
 		padding:2px;				
	}	

.side a {
	font-family:verdana, arial, sans-serif;
	font-size:x-small;
 		background:#FFF;
 		line-height:140%;
	}	

And here is a sample page:

Code:

<html>

	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">

    <title>Page Title</title>
<link rel="stylesheet" type="text/css" href="styles.css">


<!--#include virtual="/inc/functions.js" -->
  </head>

  <body>
    <div id="container">
	
	  <div id="topnav">
	  Navigation row goes up here
	  </div>
	
   
	  <div id="homepix">
		Generally an image goes here
      </div>
      <!-- end navcol -->

	  <div id="homeshows">
	  <div class="homeside">
        <strong>Upcoming Events Calendar</strong><br>
		Events...<br><br>
		Events...<br><br>
		Events...<br><br>
		Events...<br><br>
		Events...<br><br>
		Events...<br><br>
		Events...<br><br>
		Events...<br><br>
		Events...<br><br>
		Events...<br><br>
		Events...<br><br>
		Events...<br><br>
		Events...<br><br>
		Events...<br><br>
		Events...<br><br>
		Events...<br><br>
		Events...<br><br>
		Events...<br><br>
		Events...<br><br>
		<a href="/shows/">All events...</a>
		</div>
      </div>

      <div id="homejournal">
	  
	  <div class="homeblogbody">
       	Yadda Yadda Yadda....
       	Yadda Yadda Yadda....
       	Yadda Yadda Yadda....
       	Yadda Yadda Yadda....
       	Yadda Yadda Yadda....
	  </div>
	 
      </div>
      <!-- end content div -->

	  
      <div id="footer">
       <!--#include virtual="/inc/footer.inc" -->
      </div>


    </div>
    <!-- end container div -->
  </body>
</html>

I'm having problems with a fluid three column layout. I started with the layout from Realworldstyle and ended up with this. The strange thing is that it seems to stay wider than the window, no matter what size the window is. There's also the right end of the top border in the right DIV, which is a few pixels short. Any suggestions?

http://midnighttweaker.50megs.com/test.htm

Ok, I've created an XHTML/CSS site that looks fine in IE5+, Mozilla, FireFox and Netscape.

It almost works in Opera and on a Mac but it seems something slightly is going wrong.

The biggest problem is on the Mac, while the page looks fine, for some reason part of the left div goes over to the right, making the right div drop below it. I am sure it is just a CSS problem with the position or maybe float but if I could get someone to pin point the problem it would save me a lot of time.

Also on the Mac and in Opera, my columns have a gap at the very bottom of the page somehow, not quite sure why? They seem fine in the other browsers.

Also, just another quickie, in IE4.0 does it not support columns of floats? My site just expands the full length and ignores the float left rule, any ways to get round this?

The site URL is: www.gladiatorszone.co.uk/home/gladiators/

Thank you in advance to anyone that can help.

Hi,

I haven't done any .css in a while so this might be a really dumb question I could have figured out by myself but...

I'm trying to make a 3 column webpage using wordpress . I've colored the three columns blue, yellow, and red. I can get the blue and red to the relative position I want, but the red one is stuck below the two others even though I want all three on the same level. I can't quite figure out what's preventing that red column from positioning itseld higher...

Any thoughts?

I'm trying to create a 3 column layout where all the columns are contained within 1 larger <div>.

So far I've managed to create 3 columns using absolute positioning that dont allow the back-ground image of the containing <div> to show through.

If I use relative positioning, the background-image shows, but the columns are set relative to one another and they stagger from left to right in a diagonal fashion. I can correct it using negative values for the "top" attribute, but it seems bushleague and its incredibly tedious.

Is there anyway I can have 3 PROPER (not using the above method) columns while also having the largest containing div's back-ground image show through them?

The following gives me the staggered layout:
Code:

.leftColumn{
		margin-left:20px;
		width:100px;
		border:thin dotted #999999;
	}
	.middleColumn{
		margin-left:121px;
		width: 450px;
		border:thin dotted #999999;
	}
	.rightColumn{
		margin-left:572px;
		width: 200px;
		border:thin dotted #999999;
	}
	.main{
		left:200px;
		width: 950px;
		background-image: url(Images/PaperBkg.gif);
		background-repeat:repeat-y;
	}

        <div class="main">
		<div class="leftColumn">
		
		</div>

		<div class="middleColumn">					
		
		</div>
		
		<div class="rightColumn">
		
		</div>
         </div>

Thanks guys.

Hi,

I've been experiencing a problem that for sure most of you should dealed with, I've found the following article:
http://www.alistapart.com/articles/fauxcolumns/

The problem I'm facing is that elements only stretch vertically as far as they need to. Meaning, if a 200-pixel tall image is contained within a <div>, the <div> will only expand down the page 200 pixels.

On the referenced article the proposed solution is to use a background image. However I'm looking for something else, let's suppose the following html code:

Code:

<table>
<tr>
<td width="200" bgcolor="#FFFF00">navigation</td>
<td width="500" bgcolor="#CCCCCC">content</td>
</tr>
</table>

Both cells strecth vertically each other on both directions, is navigation is taller the background in content is stretched, and if the content is taller navigation's background is stretched.

Is possible to achieve this behaviour avoiding tables?

Regards,

Caste

Hello,
I was wondering if there is any good alternative to faux columns to make a 2 column layout, where the 2 columns extend from the top to the bottom of the screen (without a footer). The basic structure looks like this: Code:

<div id="main_container">
	<div id="navigation_menu">
		This div is set to float left with a width of 20% (assuming there's no margin, border and padding)
	</div>
	<div id="contents">
		This div is set to float left with a width of 80% (assuming there's no margin, border and padding)
	</div>
</div>

I want the right side of the navigation div to have a dashed border. Probably this could be achieved by using faux columns, but it's too much of a hassle in my opinion. Whenever I want to change the color or column size of the navigation bar, I have to alter the faux-image. Also when i use this dashed border the faux-image has to be larger than 1 pixel height. It would have to be around 10 pixels (5pixels for the part where the dash is showing and 5 pixels for the part where there's no dash.

Is there really no easier way to extend the color of the navigation div all the way down to the page?

Thanks in advance

Hi,

I believe this to be a IE bug that causes the middle click (used for scrolling a page) to be disabled on floating objects.

I've noticed this before in the past but I don't know what the real cause is. If I remember correctly this problem is fixed in IE 7.

The problem is I have 2-3 floating columns centred in the middle of the page (using margin: auto).

Now in firefox when you middle click within the floated objects in the middle of the page you are able to use the scrolling function.

In IE 6 when you middle click on the object it will not work, you have to middle click outside the boundaries in order to scroll. Does anyone know the cause of this strange behaviour? I did a search but I can't seem to find anything about it.

Cheers!

Ok, heres what is driving me nuts:

Pretty typical 2 column layout, header, footer, etc.

Although here's the glitch...I'm using css and js to round the corners on most of my divs, so while the js approach works it successfully destroys my rounded corners, this is also why the fauz column hack won't work either.

I have an rss feed in my #sidebar div which being dynamic adjusts the div height to fit the content, great!

my main content area (in this case 2 divs in a container) is fairly static content set at 800px.

Now I can adjust the height of the rss feed however it also successfully breaks my corners (basically the rounded corners stay some where around 750px but the div does expand to 800px with a squared bottom)

Is there anyway to either set the height of my #sidebar or is it possible to have my main content area always expand to the #footer? Geez or anything to solve this problem.

Here's my CSS:

Code:

div#container{width:100%;margin: 0 auto;background-color: #000000; overflow:hidden;text-align: center}
div#header{width:98%;background-color: #000000;padding:0px 0;text-align:center;margin: 0px 0px 0 10px}
#site {width: 100%;margin: 1px 0px 0 10px}
#sidebar {float: left;width: 24%;background-color: #FFFFCC;border-right: 1px solid #000000;text-align:left; overflow:hidden}
#content {float: left;width: 74%;background-color: #FFFFFF}
div#footer{width:98%;background-color: #000000;text-align:center;margin: 0px 0px 0 10px;font-family: Verdana, Arial, Helvetica, sans-serif;color: #FFFFFF;font-weight: bold}
#leftcontent {float: left;width:46%;background:#fff;text-align:left; padding-left:10px; padding-right:10px;font-family: Verdana, Arial, Helvetica, sans-serif;color: #000000;font-size: 12px}
#rightcontent {float: right;width:46%;background:#fff;text-align:left;padding-left:10px; padding-right:10px;font-family: Verdana, Arial, Helvetica, sans-serif;color: #000000;font-size: 12px}
#leftcontent h1, #rightcontent h1 {font-family: Verdana, Arial, Helvetica, sans-serif;color: #FF0000;font-size: 14px;font-weight: bold; margin: 0px 0px 0px 0px;padding: 0px 0px 0px 0px;line-height: 0pt}

/* begin styles for RSS Feed 
	This is the most basic style to use for a list with no bullets */
.rss_box {width: 200px; background-color: #FFFFCC; padding-top:5px}
.rss_title, rss_title a {margin: 0px 0;padding: 0;}
.rss_items {list-style:none;margin:0;padding:0;}
.rss_item  {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: x-small;margin-bottom: 1em;}
.rss_item a:link, .rss_item a:visited, .rss_item a:active {}
.rss_item a:hover {}
.rss_date {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: xx-small;}

/* Styles for gliding layers  */
#glideDiv0, #glideDiv1, #glideDiv2, #glideDiv3 {position:absolute; visibility:hidden;left:0; top:0; z-index:200;width:100px; height:24px;background-color:#FFFFCC;}

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */

Here's my HTML (minus content)

Code:

<div id="container" class="clearfix">
<div id="header" class="clearfix">
</div>
<div id="site" class="clearfix">
<div id="sidebar" class="clearfix">
</div>
<div id="content" class="clearfix">
<div id="leftcontent" class="clearfix">
</div>
<div id="rightcontent" class="clearfix">
</div>
<div style="clear:both"></div>
</div>
</div>
<div style="clear:both"></div>
<div id="footer" class="clearfix">
</div>
</div>

Thanks!

Dave

Hello everyone

I've created a faux background for a website I'm currently working on to create the illusion of a column extending to the bottom of the page.

The url is as follows: http://notquiteperfekt.gamedaemons.net/eruptmediav2/erupt.html

The CSS code I've used is:
body {
background-image: url("images/pgbkg.jpg");
background-repeat: repeat-y;
background-position: 50% 0%;
}

----

When viewing the page in Internet Explorer 5.0+ it lines up fine. However, in order for it to line up successfully, I had to add the following code to nudge my <body> content over:

html body {padding-left:11px;}

----

Fine and dandy, the extra code made things line up quite nicely. Then comes FireFox. The <body> content is 1px to the right of the background & causes the page to be a little off-center. View the previous URL in FireFox to better understand what I mean.

----

When I don't use the html body {padding-left:11px;} then the page is approximately 11-12 pixels off center - however my CSS code tells the background to position itself 50% on the X-axis & my HTML code tells the body to center itself as well via align="center"

Why do these two not line up then?

----

If anyone can view->source to pick out what's causing this & reply back it would be greatly appreciated. You can reply here or e-mail me at sevunx@gmail.com.NOSPAM - I thought I was past all of the headaches with CSS

so I have a side menu & main content inside a main container which has background so it looks like side menu & main content have diff. backgrounds and they all of same height..

Problem: I would like to add something to the BOTTOM of the side menu but am not able to do so.. this text has to appear at the bottom of the page even if content of side menu is less..

I could do "position:absolute" and give it top:870. but this is not dynamic as when the main content is larger it appears this text is in the MIDDLE rather than at the bottom?