CSS Positioning

02-18-2006, 05:52 AM

CSS Positioning

i'm a css newbie, i'm trying to figure out how to positon two images together side by side in the middle of a container. here is what i've done so far, both images stay on the left, what is the easiest approach for this.

thanx in advance!

<html>
<style type="text/css">

</style>
<body>
<div id="container1">
<div id="pos1"><img src="part1.jpg"></div>
<div id="pos2"><img src="part2.jpg"></div>
</div>
</body>
</html>

Last edited by Noob : 02-18-2006 at 05:59 AM. Reason: post not correct

[ reply ]

Noob

Noob is offline registered.

Join Date: Feb 2006

Posts: 4

#2 (permalink)

02-18-2006, 11:28 AM

Re: CSS Positioning

Hey, Image's are treated like TEXT for html. By Default they display in-line, or on the same line of text. So, to get them side by side all you have to do is put them right next to each other in html. To center them, you have to contain them in a div which is 2x the width of the images and then add margin:auto; to that div.

Code:

<style type="text/css">
<!--
#pos1 {
text-align:center; /* centers the images */
width:600px; / *set to the width of the combined images */
margin:auto; /* this centers the containing div */
}

#pos1 img {
float:left;
padding:0;
height:300px;
width:190px;
}


#container1 {
padding:0;
}
-->
</style>
<body>
<div id="container1">
<div id="pos1"><img src="part1.jpg" alt="" /><img src="part2.jpg" alt="" /></div>
</div>

This should work, if it doesnt let me know because I didnt test it.

__________________
Audi Videos | MySpace Layouts | About Me

[ reply ]

missionsix

missionsix is offline loves you.

Join Date: Feb 2004

Location: under you.

Posts: 4,774

#3 (permalink)

02-18-2006, 12:37 PM

Re: CSS Positioning

I wish I was good with CSS and could write shit off the top of my head you bastard.

__________________

[ reply ]

AtomicHype

AtomicHype is offline Ping Island

Join Date: Apr 2005

Posts: 2,459

#4 (permalink)

02-18-2006, 02:04 PM

Re: CSS Positioning

Quote:

Originally Posted by AtomicHype

I wish I was good with CSS and could write shit off the top of my head you bastard.

When you work on it on a daily basis you can pretty much memorize the properties. Plus i get a lot of CSS jobs.

__________________
Audi Videos | MySpace Layouts | About Me

[ reply ]

missionsix

missionsix is offline loves you.

Join Date: Feb 2004

Location: under you.

Posts: 4,774

#5 (permalink)

02-18-2006, 02:19 PM

Re: CSS Positioning

if i design an if forum skin can you do the css for me.... for invisionfree... cuz the if skinzome generator blows

__________________

♠ ♥ ♣ ♦
Dear brothers and sisters
dear enemies and friends

[ reply ]

Renzo

Renzo is offline Continuous

Join Date: Mar 2005

Posts: 802

#6 (permalink)

02-18-2006, 02:19 PM

Re: CSS Positioning

Quote:

Originally Posted by Renzo

if i design an if forum skin can you do the css for me.... for invisionfree... cuz the if skinzome generator blows

Unfortunately I dont do charity work.

__________________
Audi Videos | MySpace Layouts | About Me

[ reply ]

missionsix

missionsix is offline loves you.

Join Date: Feb 2004

Location: under you.

Posts: 4,774

#7 (permalink)

02-18-2006, 09:47 PM

Re: CSS Positioning

Quote:

Originally Posted by Pat

This should work, if it doesnt let me know because I didnt test it.

Thanx man! it's okay with Firefox but in IE there's a space between the two images. I tried to include padding-left and padding-right, set the values to 0 but it's stilll the same.

[ reply ]

Noob

Noob is offline registered.

Join Date: Feb 2006

Posts: 4

#8 (permalink)

02-18-2006, 09:54 PM

Re: CSS Positioning

Try adding a margin:0px; to the images.
and you might have to add, display:block; to get the padding / margin's to work.

Code:

#pos1 img {
float:left;
display:block;
padding:0px;
margin:0px;
height:300px;
width:190px;
}

__________________
Audi Videos | MySpace Layouts | About Me

[ reply ]

missionsix

missionsix is offline loves you.

Join Date: Feb 2004

Location: under you.

Posts: 4,774

#9 (permalink)

02-18-2006, 11:42 PM

Re: CSS Positioning

I can do that with the little I know of ActionScripting si uh :PP

__________________

[ reply ]

AtomicHype

AtomicHype is offline Ping Island

Join Date: Apr 2005

Posts: 2,459

#10 (permalink)

02-19-2006, 10:28 PM

Re: CSS Positioning

Quote:

Originally Posted by Pat

Try adding a margin:0px; to the images.
and you might have to add, display:block; to get the padding / margin's to work.

Code:

#pos1 img {
float:left;
display:block;
padding:0px;
margin:0px;
height:300px;
width:190px;
}

this one worked :-) thanks!!!

Code:

<html>
<style type="text/css">
<!--

#pos1 {
float:left;
display:block;
height:300px;
width:190px;
margin:0px;
padding: 0px;
}

#pos2 {
float:left;
display:block;
height:300px;
width:190px;
margin:0px;
padding: 0px;
}

#container1 {
padding:0;
}

-->
</style>
<body>
<div id="container1">
<div id="pos1"><img src="part1.jpg" alt="" /></div>
<div id="pos2"><img src="part2.jpg" alt="" /></div>
</body>
</html>

[ reply ]

Noob

Noob is offline registered.

Join Date: Feb 2006

Posts: 4

« Zeitum | MySpace Profile Generator - MyPageStyle.com »

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Posting Rules
You may not post new threads You may not post replies You may not post attachments You may not edit your posts vB code is On Smilies are On [IMG] code is On HTML code is Off Trackbacks are On Pingbacks are On Refbacks are On

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
New CSS Tut & SOTW	missionsix	Discussion Lounge	2	07-16-2005 01:29 PM
Tutorial: CSS Float / DIV	jd-inflames	Website Design	4	02-17-2005 09:22 PM
CSS Query	D M	Website Design	2	02-06-2005 10:17 AM

All times are GMT -7. The time now is 10:00 PM.

Cheap Car Insurance | Mortgages | Web Advertising | Car Credit | Loans

Art, Design & Discussion

CSS Positioning