Firefox - sempre bloqueie e use o espaço de um determinado elemento

Eu gostaria de bloquear um elemento específico em um site, toda vez que for nele, e quero fazê-lo para qualquer elemento em uma determinada página da Web quando eu quiser. Além disso, quero que o espaço liberado pelo elemento excluído seja usado para exibir mais conteúdo do site.

Por exemplo, digamos que eu queira ocultar a barra lateral no Stackoverflow (id = "barra lateral") e deixar que o conteúdo (id = "content") preencha automaticamente o espaço livre no lado direito (centralizando-se, por exemplo).

Eu também poderia querer bloquear um banner de anúncio em um site e o espaço usado para permitir que o site exibisse mais conteúdo

Eu estive pesquisando extensões AdBlock, NoScript e Ghostery, elas bloqueiam e preenchem os espaços liberados por todos os "Curtir do Facebook" "Google +1" etc. Mas não posso dizer a eles para bloquear especificamente um determinado elemento e permitir que outro elemento toma seu lugar livre para se estender.

Se isso for possível, como posso alcançá-lo?

Também aceito respostas do Google Chrome, mesmo que eu esteja procurando por firefox, de preferência, aceito soluções "parciais", como bloquear apenas um determinado elemento e não deixar que os outros tomem o espaço livre (o que acho que pode ser impossível).

Originalmente, postei a extensão Yarip como capaz de realizar o que você deseja. Como apontado por JohnKiller em muitos casos, ele não fará o trabalho por causa dos problemas de largura / margem que ele mencionou.

Firebug + Firediff (para exportar as alterações) + Elegante (para tornar as alterações persistentes) é definitivamente o caminho a percorrer. Consegui identificar o que era necessário para se livrar da barra lateral e refluir o texto como você queria em muito pouco tempo.

Incluí um snippet de estilo elegante para cuidar da barra lateral, para que você possa ver como é simples. Todos os valores a serem alterados foram encontrados com o firebug.

@-moz-document domain(superuser.com), domain(stackoverflow.com) {
    #sidebar, .sidebar {
        visibility: hidden
    }
    #mainbar, .mainbar {
        width: 980px
    }
    .question-summary {
        width: 980px
    }
    .narrow .summary {
        width: 799px
    }
}

Observe que isso funciona apenas na página principal. Você adicionará mais algumas alterações para que as páginas de Perguntas e Respostas sejam exibidas corretamente.

Dito isto, se você realmente não deseja se aprofundar no CSS (o Firebug torna isso muito fácil), há outra extensão que você pode tentar: HackTheWeb. Isso permite que você remova divs e expanda e reflita outros para compensar com apenas algumas teclas pressionadas, sem a necessidade de modificar o CSS. Você ainda precisará instalar a extensão Stylish se quiser salvar suas alterações. Anote as restrições de versão (conforme observado na página HackTheWeb) necessárias para que suas alterações persistam.

Honestamente, eu acho que você passará muito tempo brincando com ele tentando conseguir o que deseja, porque ele simplesmente não tem o poder de modificar todas as propriedades, como o Firebug. Eu tentei - definitivamente não funciona tão bem no Stack Overflow sem entrar e escrever manualmente regras no Stylish.

Se você optar por usá-lo, aqui está um guia para pressionar as teclas .

Isso não é possível com uma abordagem genérica que funciona em qualquer lugar.

Você pode usar apenas uma ferramenta como Greasemonkey e escrever scripts direcionados a sites específicos e ajustar as larguras de acordo.

Isso ocorre porque outros itens da página geralmente têm uma "largura" definida para acomodar a presença do item que você deseja remover (ou uma "margem" se o layout for fluido).