I recently set up a Wordpress site and am having a problem with getting the title and logo placement right. It seems no matter what I try I can't get the logo I made to line up on the left of my title and subtitle text. It seems like such an easy thing but it isn't working at all. I am not sure if it is an html problem or a CSS problem. Here is the code from the header.php that I am having trouble with: <body> <div id="light-wrap"> <div id="light-container"> <div id="light-header"> <div id="h-logo"> <a href="http://www.ebookreadersource.com/"><img src="<?php bloginfo('template_directory'); ?>/images/logohead.png" width="112" height="84" alt="home"/></a> <h1><a href="<?php echo get_settings('home'); ?>"><?php bloginfo('name'); ?></a></h1> <p><?php bloginfo('description'); ?></p> </div> <div id="h-right"><iframe src="http://rcm.amazon.com/e/cm?t=eboreasou-20&o=1&p=26&l=ur1&category=kindle&banner=1VW4WBP63FJN3CB2ETG2&f=ifr" width="468" height="60" scrolling="no" border="0" marginwidth="0" style="border:none;" frameborder="0"></iframe></div> </div> Code (markup): Here is the part of layout.css relating to the problem: #light-wrap { margin: 0px auto; width: 960px; } #light-container { margin: 0px; width: 960px; float: left; } #light-header { margin: 0px; width: 960px; float: left; padding-top: 30px; padding-bottom: 10px; } #h-logo { margin: 0px; padding: 0px; float: left; width: 470px; } #light-header img { border-width: 0px; } #h-logo h1 { font-size: 24px; line-height: 29px; color: #F7F7F7; margin: 0px; padding: 0px; float: left; width: 400px; } #h-logo p { font-size: 11px; line-height: 18px; color: #CCCCCC; margin: 0px; padding: 0px; float: left; width: 400px; } #h-logo h1 a { color: #f7f7f7; text-decoration: none; } #h-logo h1 a:hover { color: #FFFFFF; text-decoration: none; } #h-right { float: right; width: 470px; } Code (markup): I dont want this to seem like am just trying to get links to my site so if you can help without looking at the problem then don't visit the link below. If you want to see the problem look at the header of www.ebookreadersource.com I want the image to be in line with the text to the left of it. Any help is greatly appreciated. Thanks.
Looks like a case of arithmetic: 112 + 400 = 512 512 > 470 Try eliminating the width on #h-logo h1, then it gets a chance to fit alongside the image.
Thanks alot. Apparently I am the smartest man alive and didn't realize that the math was totally off. I had to remove the #h-logo h1 width and then move the image into the light-header div and add float left to get it positioned right but it seems fine now.