Columns Snap Back to Specified Size

For a while now I've had an issue where the columns in a grid will snap back to the specified size after dragging them bigger with your mouse. I specified a default size in my style sheet:

div.container #grid{
    height:340px;
    width:200px;
}
div.container #grid.aw-column-0{
    width:170px;
}
div.container #grid.aw-column-1{
    text-align:right;
    width:55px;
}

Everything looks correct and valid right? I have been doing CSS like this for years, but for whatever reason, when I remove the container specification the grid works properly:

#grid{
    height:340px;
    width:200px;
}
#grid.aw-column-0{
    width:170px;
}
#grid.aw-column-1{
    text-align:right;
    width:55px;
}

If I leave it in, the grid columns always snap back.

I don't know if this has been previously noted, but I thought I'd report my findings for others. Hope it helps out.

Your CSS definitions look incorrect. If you have a grid with an ID of grid then #grid is the correct CSS ID tag but you need to separate the class tags from the ID tags. So the CSS should be:

#grid .aw-column-0 {width:170px}

etc. (note the space). If you only have one grid, you can dispense with the the ID tag and just use the class tag for each column you wish to size.

From your first example, you don't need to specify the parent element's class unless there's a conflict. And that shouldn't happen if you use unique IDs. So you can either use just #grid .aw-column-0 {...} or .aw-column-0 {...} etc.

Try your page against the CSS Validator to confirm http://jigsaw.w3.org/css-validator/

Anthony,

Good catch. I do have a space in my code. I don't know what happened. It must have been lost when I copied/pasted into the browser before my post.