Esticar uma DIV pra esquerda e outra pra direita

[pwd 7]

Tudo em paz?

Estou com uma dúvida, não queria um código complexo.

O que quero é ter uma DIV com 2 BG´s diferentes na esquerda e direita, ou esticar uma DIV para ambos os lados conforme a resolução.

Segue o frame:

[André do Vale 76]

Caso não seja possível a utilização de CSS3, onde você pode declarar mais fundos apenas separando por vírgula, explore um pouco os pseudo-elementos :before e :after. Salvo engano, eles funcionam inclusive no IE8 ou superior.

 

 

.elemento {
position: relative;
}
.elemento:before {
content: '';
display: inline-block;
position: absolute;
background: /* declare aqui fundos adicionais, e depois posicione o pseudo-elemento relativo ao elemento original com margem ou top, left etc */
}

[KhaosDoctor 242]

Você pode fazer duas divs diferentes uma com float left e outra com right e depois juntá-las no mesmo ponto no meio, ou então você poderia fazer a imagem de background e determinar a width da div como 100%

[Giovani 104]

Salvo engano, eles funcionam inclusive no IE8 ou superior.

IE8+ ;)

 

-----

 

P.S.: @Andre Campos dá uma olhada na tua caixa de mensagens.

[pwd 7]

Obrigado!

 

Vou estar ambas!

[pwd 7]

Pessoal,

Meu código ficou assim:

Mas quando testo em resolução menor, as divs sobrepõem a div do meio, melhor usar Media Queries?

 

<div id="barra-paginas">
            	 <div id="left-verde"></div>
            	 <div id="titulo-pagina"><h1>Pagina</h1></div>
                 <div id="right-preta"></div>
</div>

#left-verde, #right-preta{
	width: 25%;
	float: left;
	height: 79px;
}

#left-verde, #right-preta{
	background: #8FBE00;
}
#right-preta{
	background: #000;
}

#titulo-pagina{
	width: 50%;
	font-size: 24px;
	background: url(images/bg-titulo-pagina.png) no-repeat 0px 0px;
	height: 79px;
	float: left;
}
#titulo-pagina h1{
	font: 46px "quicksand_lightregular";
	color: #FFF;
	background: #000;
	margin-left: 319px;
	text-transform: uppercase;
	padding-top: 15px;
	padding-bottom: 11px;
}

[André do Vale 76]

Se me permite, IE8+ e demais navegadores:

HTML

<h1 class="teste">Título</h1>

CSS

.teste {
	background: #000;
	color: #FFF;
	font: 40px/59px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	position: relative;
	text-indent: 47.4%;
}
.teste:before {
	background: #8FBE00 url(before.jpg) 100% 0 no-repeat;
	content: '';
	display: inline-block;
	height: 59px;
	left: 0;
	position: absolute;
	top: 0;
	width: 45.5%;
}

Imagem:
http://www.criativus.com.br/testes/before.jpg

:thumbsup:

[pwd 7]

Seu código ficou perfeito, mas o BG que vc usou o before.jpg, se vc notar no frame ele tem uma transparência.

 

Obrigado!

[André do Vale 76]

Cara, vazado é um pouco mais "complicado". Eu não tive muito tempo aqui pra pensar numa maneira mais simples (que com toda certeza deve existir), mas segue algo (que funciona somente em navegadores standards, IE9+ e demais):

 

CSS:

.teste {
	background: #000;
	color: #FFF;
	font: 40px/59px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	position: relative;
	text-indent: 15px;
	width: 54.5%;
	margin: 0 0 0 45.5%;
}
.teste:after,
.teste:before {
	content: '';
	display: inline-block;
	height: 59px;
	position: absolute;
	top: 0;
}
.teste:after {
	background: #8FBE00;
	left: -83.5%;
	width: 75%;
}
.teste:before {
	background: url(before-n.png) 100% 0 no-repeat;
	left: -120px;
	width: 120px;
	z-index: 9999;
}
@media all and (max-width: 610px) {
	.teste:after {
		width: 50%;
	}
}
@media all and (max-width: 1160px) and (min-width: 610px) {
	.teste:after {
		width: 64.5%;
	}
}
@media all and (max-width: 1630px) and (min-width: 1160px) {
	.teste:after {
		width: 70%;
	}
}

Imagem:

http://www.criativus.com.br/testes/before-n.png