Question

On this page (responsive site in progress) the background image of the containing div (article) is as wide as the longest sentence (p). So they don’t are as wide as the column (#main = 30em). What can I do with CSS to make all div’s as wide as the column and still have their responsiveness intact?

#agenda #main article {
    margin-bottom: 1em; 
    background: #fff url() repeat;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    border: 0;
}

#agenda #main article h3 {
    color: #666;
    letter-spacing: 0.2em;
    text-transform: lowercase;
    line-height: 100%;
    margin-bottom: .4em;
    padding-top: .4em;
}

#agenda #main article h4 {
    color: #666;
    letter-spacing: 0.2em;
    text-transform: lowercase;
    line-height: 100%;
    margin-bottom: .4em;
    padding-top: .4em;
}

#agenda #main article p {
    color: #666;
}

Answer 1

You need to remove the float: left from the #main article in your css (line 402) or override it with float: none.