Combining fixed/variable widths, and overriding selectors with classes

[Twey]

I have two questions.
1) Is it possible to combine fixed and variable widths with CSS? I have a sidebar that makes (heavy) use of a background image. This needs to be the correct size (or have its background image stretched, preferably; however, I don't think this is possible). However, I'd really rather not make my whole site fixed-width.
2) Likewise, is it possible to override some properties applied to an element using a descendant selector with a class (applied later using ECMAScript)? The only way I've found so far is to use !important, which evidently isn't an acceptable solution.

[jscheuer1]

1 ) Yes but, I'm not sure what you mean in this particular case. The bit about stretching the background image can only be done in IE but, it doesn't involve the background image property. Using a background image that can tile gracefully would probably be the best bet in this case.

2 ) For a class selector to override something when applied using javascript, it must be something that the class could override without javascript. I don't think an id or inline style can be overridden with class. Of course you can always create a function with the object(s) as its argument that applies the desired property/value pairs and one that removes them and invoke each as needed.

[Twey]

I'm not sure what you mean in this particular case.

Fixed-width sidebar, then another float taking up the rest of the width.

Using a background image that can tile gracefully would probably be the best bet in this case.

You're probably right. I was avoiding it because I'd have to add floats for the edge images, which wouldn't

[jscheuer1]

Fixed-width sidebar, then another float taking up the rest of the width.

This can only work if the floats are all of the same dimensions complimentary to the space you want to fill, even then it can be somewhat of a crap shoot. Technically speaking, with fixed width, there is no 'rest of the width'. I'm guessing you mean the width not showing the background image. Floats are generally imprecise, this is their beauty but perhaps makes them unsuitable for your purposes. Absolute or relative positioned elements with their left and top positions calculated by script might be the way to go.

[Twey]

Absolute or relative positioned elements with their left and top positions calculated by script might be the way to go.

Use scripts for layout?! I think I'll use tables.

[jscheuer1]

Well, you really have me at a loss. I have no idea what you are doing. I had the impression this was already dynamic script driven content. Why not do what we ask most folks to do, post a link to the problem page?

[Twey]

Because it doesn't exist yet I have images, and a layout, and I'm speculating on the implementation.
It will use scripts for some effects, but under no circumstances do I intend to make it Javascript-dependent.

[jscheuer1]

Because it doesn't exist yet I have images, and a layout, and I'm speculating on the implementation.
It will use scripts for some effects, but under no circumstances do I intend to make it Javascript-dependent.

Ungh. That's one reason why we ask people to post a link to their page. It is, as you well know, very hard to do hypothetical. One thing invariably depends upon another in layout and markup.

[Twey]

Indeed... but people give you strange looks if you write a layout, then ask for help writing a layout.

[mwinter]

I have two questions.
1) Is it possible to combine fixed and variable widths with CSS? I have a sidebar that makes (heavy) use of a background image.

The rest of the document certainly can be fluid, if that's what you're asking (I'm not entirely sure).

Using absolute positioning:

#content {
  margin-left: x;
}
#sidebar {
  left: 0;
  position: absolute;
  width: x;
}

<div id="content">
  <!-- ... -->
</div>

<div id="sidebar">
  <!-- ... -->
</div>

Using floats:

#sidebar {
  float: left;
  width: x;
}
#content {
  margin-left: x;
}

<div id="sidebar">
  <!-- ... -->
</div>

<div id="content">
  <!-- ... -->
</div>

This needs to be the correct size (or have its background image stretched, preferably

As John said, an image that's amenable to tiling's better. Alternatively, one that fades or otherwise blends into the background.

2) Likewise, is it possible to override some properties applied to an element using a descendant selector with a class (applied later using ECMAScript)?

It depends what you're trying to override, or rather, how specific those definitions were. If the declarations were applied through an in-line style declaration or a selector containing an id attribute (specifically, #hash rather than [id=value]), then the only way to override those declarations using only a class selector is using the !important priority.

It's all about specificity.

I have images, and a layout, and I'm speculating on the implementation.

Visual aids are very useful. Even if they're only mouse-drawn doodles.

Mike