Trouble getting img and header text to align

HTML & CSS
1

I am using a customized version of the TwentyTen theme in Wordpress for a site: http://ae.windridgewebdesign.com/

No matter what I try, I can’t seem to get the Call Us text next to the logo. If I create to div areas and float them, it messes up the navigation.

I am at my wits end on this one. Any ideas?

2

Figured out it was a toolbar issue in my browser. Argh. My bad.

3

I spoke too soon. Looks like IE8 still wants the text on top of the image, even though it is to the right.

4

If you put borders on the image / the nav then you see it’s sliding perfectly where it’s supposed to. It’s just not where yo uwant it.

You can make the image go up more by removing display:block on “#branding img”

If you want the nav further down, give the nav a top margin.
edit-Or Pauls.

5

Float the headerimage and then clear the floats.:slight_smile:

e.g.


#branding {
margin:0 auto;
[B]overflow:hidden;/* contain floats */[/B]
width:1000px;
}

#headerimage{
float:left;
width:752px;
}
6

Floated elements must come first in the markup. So either change the HTML to have that part firstt or just change the float:none on “#headerimage” to float:left"

Also the <h1> you have there has to have overflow:hidden

7

Two things. Well three.

First, specify a proper doctype. Right now I am seeing different results based on what browser I’m using.

Second, clean up any remaining validation errors.

Finally, it should be “No job is too small” :wink:

8

Now you just need to set the width on the div containing the image to be 752px, which is the width of the image. Then make sure the width of the div containing the text is small enough to fit inside the remaining width of the container.

Hope that helps!

9

Thanks so much. That is very close, as you can see now on the site. But I just need that text up above the nav bar, directly to the right of the image.

Thanks again for looking at it.

10

I’m not entirely clear on how you’re wanting this to be displayed.

Do you want the header image to stay center aligned like it is, and for the ‘call us’ text to be floated just to the right of it? Or would you like the image pushed to the left to allow room for the text on the right?

Either way, have you tried putting the image div first in the markup, and floating the text to the right? I did a little messing around with the CSS on your page and it seemed like this might work for you.

11

IE8 and FF are displaying exactly the same for me :slight_smile:

12

OK, I got rid of the random H1 tag and shored up the coding a little. It looks close to right, but the text is still above the image.

I am guessing there is one CSS thing I am not doing, I just don’t know what it is.

13

Ryan -

If I float the image left, it messes everything up big time. I put the text first in the markup and changed the overflow. However, as you can see, now the text is higher up. This was the problem I was encountering before. I just can’t seem to get them on the same line.

14

sethetter - thanks. I thought I had done that already, but must have deleted it in all my changes. However, that still doesn’t quite do it.

cydewaze - thanks. I didn’t even look at doctype, assuming the theme would already have it in there. Most others do. As for the typo, thanks for the catch. That’s what I get for cutting and pasting from someone else.

Let’s hope this works.

15

Ryan - That did the trick. Removing the display:block was what I needed to do.

Thanks everyone for all your help!

16

Haha, guess it helps to look at the overall project, not just the problem area, :).