Jump to content


Photo

Problem with divs...


  • Please log in to reply
11 replies to this topic

#1 miligraf

miligraf
  • Members
  • PipPipPip
  • Advanced Member
  • 74 posts

Posted 27 October 2006 - 07:37 PM

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:

Posted Image

And the css:

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;
}

And the HTML:

<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>

Thx for you time!

#2 gmwebs

gmwebs
  • Members
  • PipPipPip
  • Advanced Member
  • 174 posts
  • LocationLondon

Posted 27 October 2006 - 09:33 PM

How would you like it displayed?

#3 miligraf

miligraf
  • Members
  • PipPipPip
  • Advanced Member
  • 74 posts

Posted 28 October 2006 - 03:25 AM

Must be all the way up:

Posted Image

#4 gmwebs

gmwebs
  • Members
  • PipPipPip
  • Advanced Member
  • 174 posts
  • LocationLondon

Posted 28 October 2006 - 10:13 AM

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...


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;
}



#5 miligraf

miligraf
  • Members
  • PipPipPip
  • Advanced Member
  • 74 posts

Posted 28 October 2006 - 02:49 PM

Thx for yout help, that worked ;D

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

Posted Image

Here i post all the CSS and HTML:

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');
}

<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>

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!

#6 gmwebs

gmwebs
  • Members
  • PipPipPip
  • Advanced Member
  • 174 posts
  • LocationLondon

Posted 28 October 2006 - 02:59 PM

Could you explain what the above image should look like?

#7 miligraf

miligraf
  • Members
  • PipPipPip
  • Advanced Member
  • 74 posts

Posted 28 October 2006 - 03:18 PM

Like this:

Posted Image

#8 gmwebs

gmwebs
  • Members
  • PipPipPip
  • Advanced Member
  • 174 posts
  • LocationLondon

Posted 28 October 2006 - 03:24 PM

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.

#9 miligraf

miligraf
  • Members
  • PipPipPip
  • Advanced Member
  • 74 posts

Posted 28 October 2006 - 10:57 PM

Check the difference, how it shows:

Posted Image

And how it should look:

Posted Image

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.

#10 gmwebs

gmwebs
  • Members
  • PipPipPip
  • Advanced Member
  • 174 posts
  • LocationLondon

Posted 28 October 2006 - 11:16 PM

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.

#11 miligraf

miligraf
  • Members
  • PipPipPip
  • Advanced Member
  • 74 posts

Posted 28 October 2006 - 11:41 PM

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:

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

to this:

div.cuerpo {
	overflow: auto;
	width: 712px;
}

Thx for your time and patience!

#12 miligraf

miligraf
  • Members
  • PipPipPip
  • Advanced Member
  • 74 posts

Posted 30 October 2006 - 09:20 PM

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:

Posted Image

And the div.abajo repeats:

Posted Image

Here is the CSS for IE:

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;
}

Thx for your help!




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users