When I shrink the browser width past a certain point the spec div drops below the main div. I want to prevent this from happening. I thought perhaps I could make a div that holds both #main and #spec and set a min-width for it, but that does not seem to work.
#main {
clear: both;
width: 400px;
min-width: 400px;
float:left;
padding: 10px;
}
#spec{
padding: 4px;
float: left;
width: 270px;
}
I tested this out using min-width and it definitely works. Because the elements are floated they need to be cleared inside the container for it to work.
See the example here, http://jsfiddle.net/3TDNf/
Cheers