Aligment of divisions for printing problems

[pioneerx01]

Hi,

 

I am working with this CSS:

#list_container {
	overflow:hidden;
	}

#list_c1 {
	width:200px;
	float:left;
	}

#list_c2 {
	width:200px;
	float:left;
	}

#list_c3 {
	width:200px;
	float:left;
	}

and I have the following code:

echo "<div ID='main_container'>";

	echo "<div ID='list_container'>";
	
		echo "<div ID='list_c1'>";
			echo "column 1 text";
		echo "</div>";
		
		echo "<div ID='list_c2'>";
			echo "column 2 text";
		echo "</div>";
		
		echo "<div ID='list_c3'>";
			echo "column 3 text";
		echo "</div>";
		
	echo "</div>";
	
echo "</div>";

When I open this in the browser the column 1 is next to column 2 which is next to column 3. However when I print they are all under each other.

 

How do I go about correcting that? I assume that I need to add comething to CSS?

 

Thanks

Edited March 30, 2013 by pioneerx01

[Love2c0de]

Just a long shot to be honest, but instead of floating your <div> elements left to get your desired result, you can set the #list_container to display any children <div>'s as inline-block elements. This means you will get exactly the same result as before but it could possibly sort your printing problem. I can't get to my printer right now (more like too lazy, it's in the other office) but give this code a try:

 

CSS:

 

#list_container
{
    overflow:hidden;
}

#list_container > div
{
    display: inline-block
}

#list_c1
{
    width:200px;
}

#list_c2
{
    width:200px;
}

#list_c3
{
    width:200px;
}

 

I hope this helps you.

 

Good luck.

 

Kind regards,

 

L2c.

Edited April 4, 2013 by Love2c0de

[BuildMyWeb]

i think the problem is in your containers.  float elements are pulled out of the flow.