Image left and description right

[tinmarin]

Hello, I get lost with this . I want to put an image with a description in the same div but the image float and went out of the div getting up the menu .I want to put the image left and the description right. Both top. See my example: www.cambioplus.comCss code:div.img{ height: auto; width: auto; text-align: right;} div.img img{ float: left; border: 1px solid #ffffff;}div.img a:hover img {border: 1px solid #0000ff;}div.desc{ text-align: right; font-weight: normal; width: auto; height: auto;}-------------------------------------------------------------------<div id="contenedor"><img src="images/cambio.gif"><div class="desc">Add a description of the image here</div> <div id="container-1"><ul class="glossymenu"> <li class="current"><a href=""><b></b></a></li> </ul>Description... </div> <img src="images/footpage.gif"> </div></div><center><font size="2"><a href=http://www.cambioplus.com>Inicio</a> l <a href="http://www.cambioplus.com/faq.php">FAQ</a> l <a href="http://www.cambioplus.com/clasificado/index.php">Clasificado</a> l <a href="http://www.cambioplus.com/contacto.php">Contacto</a></font></center></div></body></html>Thanks,

[jlhaslip]

like this?

[tinmarin]

like this?

Yeah Thats it. Sorry, sorry i wrote wrong my html code. Must be:

<div id="contenedor"><div class="img"><img src="images/cambio.gif"><div class="desc">Add a description of the image here</div>		<div id="container-1">

With the code <div class="img"> in front of <img src="images/cambio.gif"> and <div class="desc"> With this css the images foated out of the div.

div.img{height: auto;width: auto;text-align: right;}[b]div.img img{float: left;border: 1px solid #ffffff;}[/b]div.img a:hover img {border: 1px solid #0000ff;}div.desc{text-align: right;font-weight: normal;width: auto;height: auto;}

I tried do not use the div <div class="img"> and the images get this www.cambioplus.com How you see the images is in the left and the word is in the right. But the word is down and passing the images line . How to put it top? How could i make the change?Thanks,

[jlhaslip]

The method is to float the image to the left, and give the text div a margin-left wider than the image.See the link I supplied you for the css coding. It is used as filler text on that Demo page.

[tinmarin]

The method is to float the image to the left, and give the text div a margin-left wider than the image.See the link I supplied you for the css coding. It is used as filler text on that Demo page.

Ok, I tried it now but it seem do not make effect in mine . I follow the code css:

.image {	margin: 0;	padding: .1em;	float:left;	border: 3px solid #663333;	width: 280px;	height: 280px;}.words {	margin-left: 310px;	padding: .25em;	border: 3px solid #ff3333;}		div.img img{  float: left;  border: 1px solid #ffffff;}

And the div:

<div id="contenedor"><div class="image"><img src="images/cambio.gif"><div class="words">Add a description of the image here. Here must need something more....</div>		<div id="container-1">

MUst be with my other code? Thanks,

[rzea]

I hope I understood right.If you need to have a picture and some text to the side of it, this is another simple solution:HTML:

<div class="img"><img src="..." width="100" height="10" /></div><div class="description">  <p>Description goes here...</p></div>

CSS:

div.img {	float:left;	border: #000 1px solid;}div.description { 	float:left;	width:200px; /*Or whatever width you need*/	margin-left:10px;}div.description p {	font-size: 1em;	color: #000;}

Let us know "tinmarín de donpingüé, cúcara mácara..."

[tinmarin]

Well, finally i did it But i have a little problem yet See the site www.cambioplus.com ? when we used "float:left;" all my menus got right . Any solution?Here the css of the menu:

.glossymenu{	position: relative;	padding: 0 0 0 34px;		margin-top: 100%;	margin: 0 auto 0 auto;	background: url(/images/menur_bg.gif) repeat-x; /*tab background image path*/	height: 46px;	list-style: none;}.glossymenu li{	float:left;}.glossymenu li a{	float: left;	display: block;	color:#000;	text-decoration: none;	font-family: sans-serif;	font-size: 13px;	font-weight: bold;	padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/	height: 46px;	line-height: 46px;	text-align: center;	cursor: pointer;	}.glossymenu li a b{	float: left;	display: block;	padding: 0 24px 0 8px; /*Padding of menu items*/}

Thanks

[rzea]

Maybe I understood wrong (bis) but when you say "...all my menus got right " are you saying:1. Your menus are right and working properly?or2. Your menus are aligned to the right?#1 probably is not it since you're actually asking for help, and if it's #2 then I don't see any menus aligned to the right.

[jlhaslip]

Remove the float: left; from the image in the logo divChange the height to 15px in the .words divJust a note that the page is 'over-classed', in my opinion. Use classes for those items which appear several times on a page. Use ID's for items which only appear once.Many of the structural items on this page should be using id's instead of classes. Two of them are noted above. You only have one image in the Logo, it really needs to be an id rather than a class. id's have greater value in terms of specificity, too, so it is easier to target the div/item when you use id's. Save classes for repeating items.