...

View Full Version : align 5 div tags horizontaly containing images



quibbles
02-15-2011, 12:41 AM
Hi
I am trying to align 5 images horizontaly with no border so they blend, the five images total 900px but are differnet sizes, i do not want to use a table and i am trying to do it with divs/css. here is the code so far, thank you for your time.

html <div class"guidewrap">
<div class"guide1"><img src="img/hrsr1.jpg" alt="" /></div>
<div class"guide1"><img src="img/hrsr2.jpg" alt="" /></div>
<div class"guide1"><img src="img/hrsr3.jpg" alt="" /></div>
<div class"guide1"><img src="img/hrsr4.jpg" alt="" /></div>
<div class"guide1"><img src="img/hrsr5.jpg" alt="" /></div>
</div>
css :
.guidewrap {width: 900px; height: 150px; margin:auto;position: relative;display:inline;}
.guide1 {margin: 0px;height: auto;width: auto;float: left;}

quartzy
02-15-2011, 12:48 AM
Add padding:0; to your inner divs. See if that helps. add padding: 0; to your wrap too.

quibbles
02-15-2011, 12:55 AM
Add padding:0; to your inner divs. See if that helps. add padding: 0; to your wrap too.

no change they all are still vertical.

VIPStephan
02-15-2011, 01:04 AM
There’s gotta be something else wrong. Please post your entire code.

quibbles
02-15-2011, 01:15 AM
There’s gotta be something else wrong. Please post your entire code.

That is the entire code and this is the outcome instead of an inline alignment.

quartzy
02-15-2011, 01:28 AM
You need to give each of your inner divs a width for a start, and that is not your code it is a screenshot

quibbles
02-15-2011, 01:48 AM
You need to give each of your inner divs a width for a start, and that is not your code it is a screenshot

I did post the code at the top of the page, but it has now changed to this, but still does not work :


html =
<div class"guidewrap">
<div class"guide1"><img src="img/hrsr1.jpg" alt="" /></div>
<div class"guide2"><img src="img/hrsr2.jpg" alt="" /></div>
<div class"guide3"><img src="img/hrsr3.jpg" alt="" /></div>
<div class"guide4"><img src="img/hrsr4.jpg" alt="" /></div>
<div class"guide5"><img src="img/hrsr5.jpg" alt="" /></div>
</div>
css=
.guidewrap {width: 900px; height: 150px; margin:auto; position: relative;display:inline; padding: 0;}
.guide1 {position:relative; float: left; width: 202px;}
.guide2 {position:relative; float:left; width: 167px;}
.guide3 {position:relative; float: left; width: 167px;}
.guide4 {position:relative; float: left; width: 167px;}
.guide5 {position:relative; float: left; width: 197px;}

VIPStephan
02-15-2011, 02:03 AM
I was asking for your entire code! This can’t be all the code you have in your file(s), can it? Please, post all the code you’ve written for this task. Everything!

quibbles
02-15-2011, 02:21 AM
I was asking for your entire code! This can’t be all the code you have in your file(s), can it? Please, post all the code you’ve written for this task. Everything!

It's ok i have almost solved it by changing the code above to this within the html page just have a gap now between the last 2 images which are hrs4 and 5:



<div style="width: 900px;">
<div style="float: left; background: #FF0000; width: 202px; max-height:150px;">
<img src="img/hrsr1.jpg" alt="" /></div>
<div style="float: right; background: #00FF00; width: 167px;max-height:150px;">
<img src="img/hrsr5.jpg" alt="" /></div>
<div style="float: right; width: 197px;background: #00FF00;max-height:150px;">
<img src="img/hrsr4.jpg" alt="" /></div>
<div style="float: left; background: #00FF00; width: 167px;max-height:150px;">
<img src="img/hrsr2.jpg" alt="" /></div>
<div style="float: left; background: #00FF00; width: 167px;max-height:150px;">
<img src="img/hrsr3.jpg" alt="" /></div>
<div style="clear: both;">
</div>

quartzy
02-15-2011, 02:27 AM
Glad to see you realised your divs were expaning out of the wrap. If there is a gap then the images are not the correct size to the div width I reckon.

quibbles
02-15-2011, 02:33 AM
Glad to see you realised your divs were expaning out of the wrap. If there is a gap then the images are not the correct size to the div width I reckon.

The div wrap is 900px all the images total 900px the outer container is 900px there are no borders but that last images has about a 30px gap.

quartzy
02-15-2011, 02:50 AM
The width was expanding the images, but you have now fixed it.

It is hard to see your problem with little code, but did you add margin: 0; padding: 0; to all your inner divs.

VIPStephan
02-15-2011, 02:52 AM
Yo! We could have saved the last twelve replies if you would just have given us your entire source code rather than jerking around and wasting our time! The solution of your problem is basically a no-brainer but we’re not psychic and it cannot be solved if you keep being incooperative! :mad:

This is all you need to get five divs floating next to each other:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<style type="text/css">
#container {
width: 900px;
margin: auto;
height: 150px;
}
.whatever {
float: left;
width: 167px;
height: 150px;
background: green;
}
</style>
</head>
<body>
<div id="container">
<div class="whatever">…</div>
<div class="whatever">…</div>
<div class="whatever">…</div>
<div class="whatever">…</div>
<div class="whatever">…</div>
</div>
</body>
</html>


And this is what I mean by entire source code.

Excavator
02-15-2011, 03:15 AM
Yo! We could have saved the last twelve replies if you would just have given us your entire source code

:thumbsup:
Sometimes getting people to provide enough information for someone to give an informed response/solution is like pulling teeth. I don't know why... :confused:

quibbles
02-15-2011, 03:25 AM
Yo! We could have saved the last twelve replies if you would just have given us your entire source code rather than jerking around and wasting our time! The solution of your problem is basically a no-brainer but we’re not psychic and it cannot be solved if you keep being incooperative! :mad:

This is all you need to get five divs floating next to each other:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<style type="text/css">
#container {
width: 900px;
margin: auto;
height: 150px;
}
.whatever {
float: left;
width: 167px;
height: 150px;
background: green;
}
</style>
</head>
<body>
<div id="container">
<div class="whatever">…</div>
<div class="whatever">…</div>
<div class="whatever">…</div>
<div class="whatever">…</div>
<div class="whatever">…</div>
</div>
</body>
</html>


And this is what I mean by entire source code.


Hi sorry to be such a pain to you stephen, I just could not see why pasting code that controls other elements other than the present issue was relevant, the code I pasted was what i wrote for this task alone and is almost identical to what you have just pasted but does not work which is why i now have just used this code which works. [code] <div style="width:900px;">
<div style="float: left; background: #FF0000; width:202px; max-height:150px;margin: 0; padding: 0">
<img src="img/hrsr1.jpg"border="0" alt="" /></div>
<div style="float: right; background: #000000; width:197px;max-height:150px;margin: 0; padding: 0">
<img src="img/hrsr5.jpg"border="0px" alt="" /></div>
<div style="float: right; background: #ffffff; width:167px;max-height:150px;margin: 0; padding: 0">
<img src="img/hrsr4.jpg" border="0"alt="" /></div>
<div style="float: left; background: #00FF00; width:167px;max-height:150px;margin: 0; padding: 0">
<img src="img/hrsr2.jpg"border="0" alt="" /></div>
<div style="float: left; background: #00FF00; width:167px;max-height:150px;margin: 0; padding: 0">
<img src="img/hrsr3.jpg"border="0" alt="" /></div>
<div style="clear: both;">
</div>
code]

thank you all for your time.

Candygirl
02-15-2011, 02:09 PM
html <div class="guidewrap">
<div class="guide1"><img src="img/hrsr1.jpg" alt="" /></div>
<div class="guide1"><img src="img/hrsr2.jpg" alt="" /></div>
<div class="guide1"><img src="img/hrsr3.jpg" alt="" /></div>
<div class="guide1"><img src="img/hrsr4.jpg" alt="" /></div>
<div class="guide1"><img src="img/hrsr5.jpg" alt="" /></div>
</div>
css :
.guidewrap {width: 900px; height: 150px; margin:auto;position: relative;display:inline;}
.guide1 {margin: 0px;height: auto;width: auto;float: left;}


There were some = missing in your code... That makes your css not applied.
There is no sens to give a display:inline if you want to fix a width and center with margin:auto.

abduraooft
02-15-2011, 02:51 PM
Let me ask another question... Why do you need all those <div>s there? Can't you just have 5 img tags inside a single <div> ? I think, some kind of divitis (http://csscreator.com/divitis) is there!

VIPStephan
02-15-2011, 04:30 PM
There were some = missing in your code... That makes your css not applied.
There is no sens to give a display:inline if you want to fix a width and center with margin:auto.

HA! Sometimes one even doesn’t see the wood for the trees. :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum