CSS Positioning

HTML & CSS
1

Ok, I am doing all I can to scoot the menu and the search over to the right, so that things line up properly.

Everything I try only pushes things in the opposite direction or messes things up altogether.

I’m working within the pre-defined elements of a Core Commerce e-commerce store, and while it should seem pretty straightforward - it isn’t. I’ve been using firebug and toolbar all night - and I think it might be because there are conflicting styles, or a positioning issue of some sort - but I am now at a loss, and I am trying to be a good girl and not resort to throwing a table in there. :slight_smile:

Here’s the site:
http://blueline.corecommerce.com/

Thanks so much in advance for any help -

Best, Kari

2

Thank you so much Paul. I have clearly been WIDTH HAPPY lately!! That fixed it, chop chop. :slight_smile: Many many thanks to you!

3

HI,

The menu seems to be at the right but the search is at the left because of this rule.


.ccWidget {
  margin: 0pt;
  width: 190px;
  font-family: Arial,Helvetica,sans-serif;
  text-align: left;
  color: rgb(29, 29, 29);
  float:left;
}

Although you have floated the inner item right it will in fact stay on the left because the parent is floated left without a width so the inner element is already at both the left and right of that element at the same time.

Change it to float:right.


.ccWidget {
  margin: 0pt;
  width: 190px;
  font-family: Arial,Helvetica,sans-serif;
  text-align: left;
  color: rgb(29, 29, 29);
  float: right;
}

Then set width auto so the search can go far right:


#search .ccWidgetInput .body .field {
  float: right;
  height: 35px;
    [B]width:auto;[/B]
}

Hope that helps :slight_smile:

4

OK - THANK YOU!!! So I added

#search .ccWidget

and floated that right. It worked - but when I added auto, the button dropped down to the next level. So I fixed the width at 200px - and it appears to be fitting snugly in there - ?

I had hoped the menu would resolve itself when I got the search scooted over, but it didnt - am I missing some sort of parent item there too - ? I did 't see one except for #nav - which is floated right as well.

THANK YOU FOR YOUR HELP ON THIS!

Can you tell how DANGEROUSLY close I was to throwing a table off up in there!?!?!?

5

What’s wrong with the menu ? It looks ok in Firefox and is on the right or is this another IE issue?

6

It’s the drop down nav beneath it - I was wanting it to scoot over to the right or ‘even out’ a bit better - (the one in the blue bar)

7

If you mean the blue menu then its once again because you have specified a width for the div and the ul and the menu is as far right as the width will allow it to be. You need to remove the width again or set a more suitable width.


#p7PMnav,#nav {width:auto}

I didn’t test in IE but if the elements drop then you will need to set a width for IE. I don’t like setting a width for floated menus like this because without a width it will cater for variances in browsers but as soon as you add a width then you lose that leeway.

8