I have me a div here that I'm using for a vertical navigation bar.

 

 

#leftBanner {
    height: 100%;
    background-color: #CCC;
    width: 22%;
    min-width: 245px;
    max-width: 355px;
    float: left;
}

 

I've been trying all day to get a div floated next to it that doesn't slide under when filled with content or overlap. I understand I could easily remove the min/max and make it a fluid, 22% div. Or even make it static at 300 or so px, but I'd like to try to figure out a solution before I give in.

 

Here's a fiddle I've been messing around with. Any help would really be greatly appreciated as I've been trying at this all darn day.

 

http://jsfiddle.net/2m4FB/

On the fiddle you have a width for the mainContent of 'auto' this is making the width of the element 100% so try using a width on this div rather than auto

http://jsfiddle.net/2m4FB/23/ - Updated.

 

I removed float: left; in favor for display: inline-block; I've also added a container for these elements to sit inside.

 

Floating elements can disrupt the flow of your layout and cause unexpected behavior. I'd recommend looking at http://www.slideshare.net/maxdesign/css-floats-explained, which covers a lot of the WTF moments.

Follow some tutorial on css architecture, things like box model, floats, positioning. Once you get a good understanding of css architecture positioning and layout methods will all make sense. A good source is https://developer.mozilla.org/en-US/docs/Web/CSS

 

I think of css and programming in general like mathematics, don't try to learn calculus if you don't know how to multiply -- and all the other fundamentals of course

http://jsfiddle.net/2m4FB/23/ - Updated.

 

I removed float: left; in favor for display: inline-block; I've also added a container for these elements to sit inside.

 

Floating elements can disrupt the flow of your layout and cause unexpected behavior. I'd recommend looking at http://www.slideshare.net/maxdesign/css-floats-explained, which covers a lot of the WTF moments.

Awesome. And +1 for the slideshare link!