Jump to content

Problem with divs...


miligraf

Recommended Posts

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!
Link to comment
Share on other sites

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]
Link to comment
Share on other sites

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!
Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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!
Link to comment
Share on other sites

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!
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.