Codarz360 Posted May 9, 2011 Share Posted May 9, 2011 Hey, Basically I'm trying to align 3 boxes across the page horizontally next to each other in a row. However just above the boxes I've given them a header with a background image with some text in and this also needs to directly aligned above the box for that header. I've got this so far in my html file <div id="test1head"> <h1>test1</h1> </div> <div id="test1content"> text for test1... </div> <div id="test2head"> <h1>test2</h1> </div> <div id="test2content"> text for test2... </div> <div id="test3head"> <h1>test3</h1> </div> <div id="test3content"> text for test3... </div> Then this in my css file #test1head { width: 140px; padding: 5px 5px 5px 5px; color: white; background-color: transparent; background-image: url("images/ttl-bg.gif"); background-repeat: repeat-x; background-size: auto; } #test1content { width: 138px; margin: 0% 0 0 0; padding: 10px 5px 10px 5px; border: 1px solid red; } #test2head { width: 140px; padding: 5px 5px 5px 5px; color: white; background-color: transparent; background-image: url("images/ttl-bg.gif"); background-repeat: repeat-x; background-size: auto; } #test2content{ width: 138px; margin: 0 0 0 0; padding: 10px 5px 10px 5px; border: 1px solid red; } #test3head { width: 140px; padding: 5px 5px 5px 5px; color: white; background-color: transparent; background-image: url("images/ttl-bg.gif"); background-repeat: repeat-x; background-size: auto; } #test3content{ width: 138px; margin: 0 0 0 0; padding: 10px 5px 10px 5px; border: 1px solid red; } All this is doing is just placing them under each other... I've tried floating and everything seriously I hate CSS! Any help is appreciated. Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted May 9, 2011 Share Posted May 9, 2011 a div is a block element which means it starts at a new line. (check the manual if that sounds strange) to put block elements on one line you need to use the property float, a good article on this is the floatorial http://css.maxdesign.com.au/floatutorial/ also you don't nee so much div's if you have 3 blocks the following markup is good enough. Also don't let text just float around put it in a <p> or <span> <div class="floatleft"> <h1>test1</h1> <p> text for test1 </p> </div> Quote Link to comment Share on other sites More sharing options...
diptiranjan Posted May 9, 2011 Share Posted May 9, 2011 hi just follow this very simple and easy you can do that easily . <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> h1{font-size:9px;font-family:Arial, Helvetica, sans-serif;color:#CC3300;} p{font-size:9px;font-family:Arial, Helvetica, sans-serif;color:#33FF99;} #test1head{ width:100px; border:1px solid gold; float:left; height:50px; } #test2head{ width:100px; border:1px solid gold; float:left; height:50px; } #test3head{ width:100px; border:1px solid gold; float:left; height:50px; } </style> </head> <body> <div id="test1head"> <h1>test1</h1> <p>text for test1...</p> </div> <div id="test2head"> <h1>test2</h1> <p>text for test2...</p> </div> <div id="test3head"> <h1>test3</h1> <p>text for tes3...</p> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
Maq Posted May 9, 2011 Share Posted May 9, 2011 @diptiranjan, in the future, please place tags around your code. Quote Link to comment Share on other sites More sharing options...
Codarz360 Posted May 9, 2011 Author Share Posted May 9, 2011 Thanks for the replies and the tips guys... I've now managed to fix the problem all align them all on the same line. It was because I wasn't using any float property. Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted May 9, 2011 Share Posted May 9, 2011 nice one, the next property you might want to have a look into is the property clear Quote Link to comment Share on other sites More sharing options...
diptiranjan Posted May 10, 2011 Share Posted May 10, 2011 @Maq what is tags no need to use here. man Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.