Only works inline

[CyJobes]

I’m a web developer that is making my first serious stab at using CSS for layout and style. My question is more about layout.

I’m using XHTML 1.0 Strict. My main content is in a div with the class “content”.
This div contains the layout between header and footer, and that layout may change at any time.

In this case the page has two columns; The left begin a third, the right with the remaining two thirds.

The left column contains a background image that is to repeat on y only. This area has a class of “sidebar” The right column, named “article” most always will have content longer than the sidebar, so the sidebar must run the length of the article. When finished the image will butt-up against the footer image.

The problem is that I can only get this to work if I use inline styles. I can use and external style sheet for some formatting, but If I try to use an external style sheet to set the float and so on, the background image will only go the length of the sidebar content.

I’ve want to mainly go with the style sheet and not inline. How would I do this?

Page Code
<div style="background-image:url(/wing/global/graphics/sidebar_slvr.gif); background-repeat:repeat-y; float:left">

<div style="padding-left:15px; width:225px" class="side_bar"><!-- left side bar --></div>


<div style="border: 0px solid #000000; width:500px; float:right;"><!-- right third content --></div>
</div>

Styles Used
.side_bar {
background-image: url(../graphics/sidebar_slvr.gif);
background-repeat: repeat-y;
height: inherit;
width: 246px;
float: left;
}

BTW - The div with the class name "article" is only named that to identify it and for the print style sheet.

I'm open to better alternatives for this to work.
Thanks in advance for all your help.

[Twey]

<div class="sidebar-container">

.sidebar-container {
  background: silver url(/wing/global/graphics/sidebar_slvr.gif) repeat-y;
  float: left;
}

More seriously, though: firstly, don't use XHTML unless you're prepared to use the proper MIME type and drop support for IE, and secondly, don't use pixel sizes for anything that's going to contain text. The only thing that should be sized in pixels are images, and that only out of necessity; when we have images that will scale nicely (read: when IE gets SVG support) we can drop this ugly practice as well.

[CyJobes]

I made the changes you suggested and went to a html traditional DDT. Everything is working great.

DDTs are so strange for me to grasp. I thought using xhtml I was making sure I was keeping up with the times, and that using the DDT for XHTML & strict was also being somewhat politically correct. It's no wonder why some resort to tables.

I used tables all my life, but folks at my new job suggested that they would like to be all CSS if possible, and I'm all about making it possible.

Any suggestions on books that teach CSS, but don't have all that fluff info in between?

Thanks again for your help.

[Twey]

I made the changes you suggested and went to a html traditional DDT. Everything is working great.

I hope you did mean "traditional" there and not "transitional." Switching to HTML is no excuse to stop using Strict DOCTYPEs.

DDTs are so strange for me to grasp. I thought using xhtml I was making sure I was keeping up with the times, and that using the DDT for XHTML & strict was also being somewhat politically correct.

Well, you're not too far wrong. XHTML would be the latest and greatest if IE had support for it, and if you don't mind losing support for IE (such as in a personal site), by all means go for it. However, for now IE is miring us in HTML.

It's no wonder why some resort to tables.

I used tables all my life, but folks at my new job suggested that they would like to be all CSS if possible, and I'm all about making it possible.

If only IE had support for the table-cell display value, we could create table-like layouts using CSS.

Any suggestions on books that teach CSS, but don't have all that fluff info in between?

Not really. There's a nice tutorial over at howtocreate.co.uk though. The howtocreate.co.uk tutorials are the most complete and accurate I've found to date. Also read their general site design tutorial.