2 Lines of Text to Align one on top of the other

rexolioISback · Sep 20, 2006

I have 2 lines of text that I need to appear as so:

Home > Current Page (Breadcrumbs)
Login | Profile | SEARCHBOX & Search Button

The top line the text is very small and formatted differently than the 2nd line, and that line includes a form element (input text box and button.)

Here is my CSS:

#breadcrumbs {
font-size: xx-small;
float: right;
margin: 2px 6px 2px 0px;
}

#searchbox {
display: inline;
font-size: x-small;
float: right
margin: 30px 6px 2px 0px;
}

In the HTML:

<div id="breadcrumbs">TEXT</div>
<div id="searchbox">TEXT & TEXT BOX</div>

It appears on the page all on the same line, 6 px from the top of the page. I've removed the display property, added "clear: right;", researched and still nothing.

Thanks in advance for your help!

kaht · Sep 20, 2006

Remove the inline display style - it's not needed. You also need to put a semi-colon after your float:right declaration, otherwise it will be ignored. Here's a test with your code to show that it works:

Code:

<html>
<head>
<style type="text/css">
#breadcrumbs {
    font-size: xx-small;
    float: right;
    margin: 2px 6px 2px 0px;
}

#searchbox {
[gray][i]    /*display: inline;*/[/i][/gray]
    font-size: x-small;
    float: right;
    margin: 30px 6px 2px 0px;
}
</style>
</head>
<body>
<div id="breadcrumbs">Breadcrumbs test</div>
<div id="searchbox">Searchbox test</div>
</body>
</html>

-kaht

Looking for a puppy?

[small]Silky Terriers are small, relatively odorless dogs that shed no fur and make great indoor pets.[/small]

vacunita · Sep 20, 2006

Actually I would remove the [red]float:right;[/red] styling to get it to appear as you want.

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Vragabond · Sep 20, 2006

However, if you want to have them both floated to the right but one on top of each other, the second (#searchbox) needs to have a [tt]clear: right;[/tt] set to it. It does however raise issue if you need to have them floated... or would aligning the blocks to the right or even text within the blocks to the right suffice. This is impossible to say without knowing your entire plans.

rexolioISback · Sep 21, 2006

AWESOME GUYS - Thanks. That worked. I had to KEEP the float: right; for the 2nd style grouping, but also had to add the clear: right; just before the float value. I could have sworn that I had done that already, but guess not.

One more thing... now that its ALMOST perfect, I've got one small problem that the display: inline; usually fixes... on the 2nd line, it starts out as text, then has an text box for searching the site followed by a graphic submit button like this:

Welcome Back! | Log Out | TEXTBOX BUTTON

The graphic is a few pixels more in height than my text box. I was able to get these line up (centering the text box vertically with the button) by using the display: inline; value pair, but that's not working now that I have that who line lined up underneath the Breadcrumbs line. The image button stands above the rest of that whole line. I could resize the button, but its the same size as the buttons on the rest of my site and I'd like to keep it. Its a small issue, but it bugs me. Any suggestions?

Vragabond · Sep 21, 2006

Images and input controls usually react to the vertical-align property. You could assign it different values to them and see what happens.

rexolioISback · Sep 21, 2006

Vragabond - you rock. That totally did it.

Thanks to everyone!

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

2 Lines of Text to Align one on top of the other

rexolioISback

Programmer

kaht

Programmer

vacunita

Programmer

Vragabond

Programmer

rexolioISback

Programmer

Vragabond

Programmer

rexolioISback

Programmer

Similar threads

Part and Inventory Search

Sponsor