• 0

CSS Div alignment

Asked by ironsight2000,

 Share

Question

Veteran

ironsight2000

Posted
Posted

What I am trying to achieve is to have 2 bookends and both sides of the screen in the middle will be books On to of the books will be the logo

 

I would link to the code but the web server is offline for upgrades

<style>
.threecol {
width:100%;
overflow:hidden;
}
.threecol div {
float:left;
width:33%;
}
#left
{
	width:9px;
}
	#right
{
	width:9px;
}

#middle
{
	
	background-image: url('middle.jpg');
}
</style>
<div class="threecol">
<div id="left" align="left"  ><img src="left.jpg" width="9" height="90"></div>
<div id="middle" align="center"><img src="logo.jpg" width="9" height="90"></div>
<div id="right" align="right"><img src="right.jpg" width="9" height="90"></div>
</div>

post-178294-0-74098600-1408682969.jpg

post-178294-0-84470700-1408682976.jpg

post-178294-0-59448100-1408682986.jpg

post-178294-0-84068900-1408682993.jpg

Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 0
Grand Master

+virtorio MVC

Posted
  • MVC
Posted

  • Don't use the align attribute on div tags.

Float the left and right divs.

Remove the middle div.

Assign the bakcground-image style to the treecol div.

Move the logo image in to the threecol div.

You can make the logo image appear in the center by setting the "text-align: center" style to the treecol div.

Link to comment
Share on other sites
  • 0
Grand Master

satukoro

Posted
Posted 




<!doctype html>



<html>



	<head>



		<style type="text/css">



			body{



				margin:0px;



				padding:0px;



				}



			.a { /* http://www.css3.info/preview/multiple-backgrounds/ */



				background-image:url('bcl.png'),url('bcr.png'),url('bcm.png');



				background-position:left,right,center;



				background-repeat:no-repeat,no-repeat,repeat-x;



				height:100px; /* should be multiples of background height */



				min-width:81px; /* so that min-width is at least background width */



				overflow:hidden;



				}



			.a p{ /* dummy text */



				margin:25px 35px;



				padding:0px;



				}



		</style>



	</head>



	<body>



		<div class="a"><p>Hello World and all of your books.</p></div>



	</body>



</html>












			
		


		

		
	


	

	





	
Link to comment

	
		
	
	
	

	
	
Share on other sites

	

	


	

	

	




	



					
					
					
				
			
			



		

	


	
	
	
	
	
		
	

			
				
					


	


	
		
	


	

		

			 This topic is now closed to further replies. 
		
			
		

	



				
			
		

	

	
		

			

				
					


    
          Share
    

    

        
        
            

            
        
    


				
				
                

                




				
			

		

	







	

		
			
				Go to question listing