Dropping to next line

HTML & CSS
1

Anyone know if the code is unstable on the header of this site: [B]http://mercurytint.com/[/B]? The problem: the middle link with the dollar sign in the header – the text keeps dropping to the next line. And the whole box section should be even with the end of the Llumar image above it so telephone icon text should be even with end of Llumar text. It looked fine but now it doesn’t. I don’t know what I did to change it except add meta tags, etc.

Thanks so much in advance!

2

It looked fine but now it doesn’t.
Hi Karen,

I’m not sure what it looked like before but these adjustments below seem to get it like you say you want it.

Maybe just push the logo to the left some with a larger right margin. Then I lifted the box parent up with a neg top margin and gave it some bottom margin to give the text some breathing room. Last I reduced the width on your telephone div a little.

.llumar {
clear:both;
display:block;
float:right;
height:42px;
margin-bottom:19px;
[COLOR=Blue]margin-right:14px;[/COLOR][B] /*was 8px*/[/B]
width:155px;
}

.boxes {
clear:both;
float:right;
height:67px;
[COLOR=Blue]margin:-10px 0 10px;[/COLOR][B] /*was margin-right:8px*/[/B]
overflow:hidden;
width:535px;
}

div#b_ct {
[COLOR=Blue]width:170px; [/COLOR][B]/*was 180px*/[/B]
}

I’m sure you can play around with it some more and get it like you want it. :wink:

3

Thanks Ray. Yeah, not sure what happened. It keeps changing. I’ll try this.

4

The problem: the middle link with the dollar sign in the header – the text keeps dropping to the next line.
I missed that part of the problem, I was just trying to get your phone lined up with the logo with my previous suggestions.

If I remember right you had a width on that middle div yesterday, it looks like you’ve removed it now. A narrow width would have forced the text to drop to a new line.

You can do away with the width:auto; as that is the default anyway. Just keep in mind that floats shrinkwrap to the width of their content. The way your controlling your text with the line breaks <br>, that is what is setting the width on the floats that are set as width:auto;

You might want to give some right padding on that middle div to push that longest line of text away from the phone image.

div#b_ck a {
    [COLOR=Red]/*padding-left:53px;*/[/COLOR]
    [COLOR=Blue]padding:[/COLOR] [COLOR=Blue]0 6px 0 53px[/COLOR];
    background:url(images/tax.png) top left no-repeat;
    [COLOR=Red]/*width:auto;*/[/COLOR]
}

All in all, it looks better now than it did yesterday since you corrected the extra line. :slight_smile:

5

Appreciate your help!

Congrats on “CSS Guru of the Year 2010” Ray. Rock on!