This is the layout i am aiming for. I got the logo as i wanted using the div tag. As shown in the code below : !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Master</title> <style type="text/css"> *{padding:0; margin:0;} body{padding:0; margin:0 auto; background-color: #ff33cc;} .pagecontainer{margin:auto; width:800px; height:800px; background:transparent url(img/background.gif) top left repeat-y;} .logo{width:265px; height:75px;} </style> </head> <body> <div class="pagecontainer"> <div class="logo"> <img src="img/logo.gif" /> </div> ghghgh </div> </body> </html> Code (markup): Now the problem is that if i use another div tag(og specified width and height) for putting the banner. It goes to the next line(instead of coming next to the logo as i want it to be). Please help me out of this. One more thing, should i use tables ? or continue working with div ? Thanks in Advance
if the image is not visible then please go see it at : http://img3.freeimagehosting.net/image.php?8fbea58b69.gif Thanks
Float the .logo left and float the .banner right (or float both left and give the right banner a left margin but you would run into double margins, so I'd recommend left and right w/o horizontal margins) and give them dimensions (width, height). On the element after banner, put a clear:both;.
soulscratch, (s)he could also just do the two float:lefts and add the stupid display:inline for IE6. I'm so glad a just seemingly happened on a thread here where someone mentioned them and right then I had noticed the problem on a new site in IE6. It was brilliant timing for me.
Sometimes the display:inline; confuses people, and I didn't want him to get confused by it.. but yeah that should only be used for the double margin bug on floated elements which have horiz. margin.