Jump to content


Photo

Aligment of divisions for printing problems


  • Please log in to reply
2 replies to this topic

#1 pioneerx01

pioneerx01

    Advanced Member

  • Members
  • PipPipPip
  • 140 posts

Posted 29 March 2013 - 10:25 PM

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 by pioneerx01, 29 March 2013 - 10:26 PM.


#2 Love2c0de

Love2c0de

    Advanced Member

  • Members
  • PipPipPip
  • 361 posts
  • LocationThe Pleiades
  • Age:23

Posted 04 April 2013 - 01:02 PM

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 by Love2c0de, 04 April 2013 - 01:03 PM.


#3 BuildMyWeb

BuildMyWeb

    Advanced Member

  • Members
  • PipPipPip
  • 82 posts
  • LocationNY

Posted 06 April 2013 - 10:13 PM

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


Freelance Web Developer | Web Hosting | PHP Applications
Web Development, Hosting, Graphic Design, SEO





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Cheap Linux VPS from $5
SSD Storage, 30 day Guarantee
1 TB of BW, 100% Network Uptime

AlphaBit.com