Problem with CSS Element Positioning

[spacetanker]

I am happy I came across this group as I am pulling my hair out trying to solve a dilemma with my web page code.

I have a div contaner that holds three divs on my web page (www.2xcr.com). The first div is a breadcrumb, and the second and third divs are an email link and a print link respectively. I want the email and print divs to float to the right of the breadcrumb div. When I publish the page the email and print divs appear off the horizontal center of the breadcrumb div. Virtually everything I have tried has failed to change this behavior.

The script is attached. I realy hope that someone can look at these and tell me what Iam doing wrong.

Many thanks for any assistance.

Matt

 

[Phreaddee]

first of all floated right elements MUST come before the others.
ie

.div1, .div2, .div3, .div4 {
float:right;
width:25%;
text-align:center;
}

and the html would be

<div class="div4">div 4 </div>
<div class="div3">div 3 </div>
<div class="div2">div 2 </div>
<div class="div1">div 1 </div>

which would display on screen something like.

| div 1 | div 2 | div 3 | div 4 |

secondly put a width on your breadcrumbs. width auto is no good...

 

[spacetanker]

Phreaddee,

Many thanks! I had no idea - and most tutorial websites don't mention - that the order of the HTML elements affects the floats. I assumed left-to-right and top-to-bottom, with the floats indicating how he blocks should align. I have s much to learn, but this got me off the sticking point.

I appreciate your taking the tim to reply.

Matt

 

[spacetanker]

Phreaddee,

You seem to understand the CSS float issue well, and I must admit to having a time with it. After my initial success following your previous post, I began adding a login element to the design. This element was intended to occupy the login div within the header_parts container div.

Ultimately I found the table was a little too large, so I decided wanted the login div to float to te right of everything above the header. Considering the trouble I had making this seemingly simple thing happen, you'd think I was decoding the human genome!

What I would like to end up with is this:
1. logo div floating on the left
2. login div floating on the right
3. the business_name, motto, and nav_bar divs in between

Also, you suggeted a width for the breadcrumbs? I want the page to be resizeable; specify a width to what end?

Many thanks...to you or another who might happen along and help.

 

[Phreaddee]

<div id="header">
<div id="login">login</div>
<div id="logo">logo</div>
business_name, motto, and nav_bar

</div>

#login {float:right;
width:20%;}
#logo {float:left;
width:20%;}
#header {width:100%;
overflow:hidden;}

 

[spacetanker]

Thanks again! You pointed me in the right direction. Much appreciated.