Problem with divs...

[miligraf]

I have 2 divs, one next to the other but then i start typing info. in one (the first one in the HTML document) the second div appears after the info. finishes. Here is an image:

[img]http://img278.imageshack.us/img278/3205/1kx9.jpg[/img]

And the css:

[code]div.contenido {
margin: 0px 195px 0px 6px;
}

div.anuncio {
margin:0px 0px 0px 0px;
height:82px;
background-image: url('img/10.jpg');
}

div.principal {
margin:0px 0px 0px 0px;
background-image: url('img/13.jpg');
background-repeat:no-repeat;
}

div.cajas {
margin:0px 6px 0px 529px;
}

div.tutoriales-azar {
margin:0px 0px 0px 0px;
height:82px;
background-image: url('img/11.jpg');
}

div.afiliados-azar {
margin:0px 0px 0px 0px;
height:141px;
background-image: url('img/15.jpg');
}

div.caja-extra {
margin:0px 0px 0px 0px;
background-image: url('img/17.jpg');
background-repeat:no-repeat;
}[/code]

And the HTML:

[code]<div class="contenido">

<div class="anuncio">
</div>

<div class="principal">
aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />
aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />
aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />
aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />
</div>

</div>

<div class="cajas">

<div class="tutoriales-azar">
aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />
</div>

<div class="afiliados-azar">
aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />
</div>

<div class="caja-extra">
aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />
aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />
aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />
aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />
</div>

</div>[/code]

Thx for you time!

[gmwebs]

How would you like it displayed?

[miligraf]

Must be all the way up:

[URL=http://img84.imageshack.us/my.php?image=1yn5.jpg][IMG]http://img84.imageshack.us/img84/9972/1yn5.th.jpg[/img][/URL]

[gmwebs]

Well, from the code you supplied, it seems like your margins are not quite right so I commented them out. Anyway, you need to float the 2 divs that you want next to each other, and also set their widths to how you want it. Change the 2 div classes to the following, and leave everything else the same...

[code]

div.contenido {
/*margin: 0px 195px 0px 6px;*/
float: left;
width: 69%;
background-color: #aaaaaa;
}

div.cajas {
/*margin:0px 6px 0px 529px;*/
float: right;
width:31%;
background-color: #cccccc;
}

[/code]

[miligraf]

Thx for yout help, that worked ;D

But i got a new problem, when i put the float, it goes like this:

[URL=http://img47.imageshack.us/my.php?image=1bz8.jpg][IMG]http://img47.imageshack.us/img47/899/1bz8.th.jpg[/img][/URL]

Here i post all the CSS and HTML:

[code]
body
{
background-image:url('img/bg.jpg');
background-repeat:repeat-x;
background-color:#8C8C8C;
margin:0px 0px 0px 0px;
}

div.contenedor {
width:724px;
margin:auto;
background-image:url('img/contenido-bg.jpg');
background-repeat:repeat-y;
background-position:center;
}

div.borde-izq {
float:left;
margin-top:0px;
}

div.banner {
margin:0px auto;
height:54px;
background-image: url('img/02.jpg');
}

div.borde-der {
float:right;
margin-top:0px;
}

div.espacio-superior {
margin:0px 6px 0px 6px;
}

div.menu {
margin:0px 0px 0px 0px;
height:92px;
}

div.inicio {
margin:0px 585px 0px 6px;
}

div.tutoriales {
margin:-92px 455px 0px 136px;
}

div.afiliados {
margin:-92px 325px 0px 266px;
}

div.contacto {
margin:-92px 192px 0px 396px;
}

div.pan-diario {
margin:-92px 6px 0px 529px;
height: 92px;
background-image: url('img/09.jpg');
}

div.cuerpo {
margin:0px 6px 0px 6px;
}

div.contenido {
float: left;
width: 523px;
}

div.anuncio {
margin:0px 0px 0px 0px;
height:82px;
background-image: url('img/10.jpg');
}

div.principal {
margin:0px 0px 0px 0px;
background-image: url('img/13.jpg');
background-repeat:no-repeat;
}

div.cajas {
float: right;
width: 189px;
}

div.tutoriales-azar {
margin:0px 0px 0px 0px;
height:82px;
background-image: url('img/11.jpg');
}

div.afiliados-azar {
margin:0px 0px 0px 0px;
height:141px;
background-image: url('img/15.jpg');
}

div.caja-extra {
margin:0px 0px 0px 0px;
background-image: url('img/17.jpg');
background-repeat:no-repeat;
}

div.abajo {
margin-bottom:0px;
height:11px;
background-image: url('img/18.jpg');
}[/code]

[code]<body>
<div class="contenedor">

<div class="borde-izq">
<img src="img/01.jpg" alt="" border="0" />
</div>

<div class="borde-der">
<img src="img/03.jpg" alt="" border="0" />
</div>

<div class="banner">
</div>

<div class="espacio-superior">
<img src="img/04.jpg" alt="" width="712" height="13" border="0" />
</div>

<div class="menu">

<div class="inicio">
<img src="img/05.jpg" width="130" height="92" alt="" border="0" />
</div>

<div class="tutoriales">
<img src="img/06.jpg" width="130" height="92" alt="" border="0" />
</div>

<div class="afiliados">
<img src="img/07.jpg" width="130" height="92" alt="" border="0" />
</div>

<div class="contacto">
<img src="img/08.jpg" width="133" height="92" alt="" border="0" />
</div>

<div class="pan-diario">
</div>

</div>

<div class="cuerpo">

<div class="contenido">

<div class="anuncio">
</div>

<div class="principal">
aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />
aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />
aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />
aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />
</div>

</div>

<div class="cajas">

<div class="tutoriales-azar">
aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />
</div>

<div class="afiliados-azar">
aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />
</div>

<div class="caja-extra">
aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />
aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />
aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />
aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />
</div>

</div>

</div>

<div class="abajo">
</div>

</div>
</body>[/code]

Ive been trying to solve this but the only way that ive found is to delete the float but it goes as it was before  >:(

Thx again for your time!

[gmwebs]

Could you explain what the above image should look like?

[miligraf]

Like this:

[URL=http://img291.imageshack.us/my.php?image=2tz3.jpg][IMG]http://img291.imageshack.us/img291/5174/2tz3.th.jpg[/img][/URL]

[gmwebs]

So you mean you don't want the text to run over the bottom like that? And if you want the right column to have a background image, then you just need to add that to the css for that div.

[miligraf]

Check the difference, how it shows:

[URL=http://img47.imageshack.us/my.php?image=1bz8.jpg][IMG]http://img47.imageshack.us/img47/899/1bz8.th.jpg[/img][/URL]

And how it should look:

[URL=http://img291.imageshack.us/my.php?image=2tz3.jpg][IMG]http://img291.imageshack.us/img291/5174/2tz3.th.jpg[/img][/URL]

There is no text in the second image because its from the PSD file.

I already have backgrounds for it, 'caja-extra' is the box underneath 'Afiliados al Azar' but it doesnt come up with the float, also the background of the main table and the last div ('abajo').

Thx.

[gmwebs]

Ok... How is your image? Is it one big one? If it is, it needs to be exactly the same size as the div or smaller. Normally, you would creat an image that is the correct height, but 1px wide. Then you would repeat the image as a background on the x axis.

[miligraf]

I have it all set like that and it was working fine before, but when i put the floats (left and right) the thing changes and i dont see the background anymore and the other div. (Check the 2 images posted before).

I dunno how the floats mess it up... :(

EDIT: i just fixed it, it was all in the 'cuerpo' div that contained 2 other divs, i changed it from this:

[code]div.cuerpo {
margin:0px 6px 0px 6px;
}[/code]

to this:

[code]div.cuerpo {
overflow: auto;
width: 712px;
}[/code]

Thx for your time and patience!

[miligraf]

A new problem :D

I made CSS for IE since it doesnt look good with FireFox's CSS, the only two problems that i have with IE are:

The div.banner doesnt fill as it should (it does with FireFox), a 3px space appears on both sides:

[img]http://img107.imageshack.us/img107/5222/3of5.jpg[/img]

And the div.abajo repeats:

[img]http://img111.imageshack.us/img111/8931/4oa8.jpg[/img]

Here is the CSS for IE:

[code]body
{
background-image:url('img/bg.jpg');
background-repeat:repeat-x;
background-color:#8C8C8C;
margin:0px 0px 0px 0px;
}

div.contenedor {
width:724px;
margin:auto;
background-image:url('img/contenido-bg.jpg');
background-repeat:repeat-y;
background-position:center;
}

div.borde-izq {
float:left;
margin-top:0px;
}

div.banner {
margin:0px auto;
height:54px;
background-image: url('img/02.jpg');
}

div.borde-der {
float:right;
margin-top:0px;
}

div.espacio-superior {
margin:-202px 6px 0px 6px;
height:13px;
}

div.menu {
margin:-4px 0px 0px 0px;
height:92px;
}

div.inicio {
margin:0px 585px 0px 6px;
}

div.tutoriales {
margin:-96px 455px 0px 136px;
}

div.afiliados {
margin:-96px 325px 0px 266px;
}

div.contacto {
margin:-96px 192px 0px 396px;
}

div.pan-diario {
margin:-96px 6px 0px 529px;
height: 92px;
background-image: url('img/09.jpg');
}

div.cuerpo {
margin:-4px -6px 0px 6px;
width: 712px;
}

div.contenido {
float: left;
width: 523px;
margin-top:0px;
}

div.anuncio {
margin:0px 0px 0px 0px;
height:82px;
background-image: url('img/10.jpg');
}

div.principal {
margin:0px 0px 0px 0px;
background-image: url('img/13.jpg');
background-repeat:no-repeat;
}

div.cajas {
float:right;
width: 189px;
margin-top:0px;
}

div.tutoriales-azar {
margin:0px 0px 0px 0px;
height:82px;
background-image: url('img/11.jpg');
}

div.afiliados-azar {
margin:0px 0px 0px 0px;
height:141px;
background-image: url('img/15.jpg');
}

div.caja-extra {
margin:0px 0px 0px 0px;
background-image: url('img/17.jpg');
background-repeat:no-repeat;
}

div.abajo {
margin-bottom:0px;
height:11px;
background-image: url('img/18.jpg');
}

div.leyenda {
text-align: center;
}[/code]

Thx for your help!