New Posts All Forums:Forum Nav:

How to put pictures side by side on HTML?

Subscribe Search This Thread

« Previous
1
2
Next »

Start a New Thread

post #1 of 14

4/29/12 at 5:37pm

Thread Starter

Speedster159
PC Gamer

Joined: Aug 2009
Location: Philippines
Posts: 3,624
Rep: 52 (Unique: 46)
Select All Posts By This User

So how do i put pictures side by side using HTML?

Here is the picture of it.

And the code i use.

Code:

<a title="Something." href="http://www.something.com/en/blog/3436662/some-blog/follow"><img alt="bloglovin" border="0" src="http://www.something.com/widget/bilder/fashionchalet.gif" /></a>

<a title="Good Blog Entry"><img alt="Good Blog Entry" border="0" src="http://www.someting.com/wp-content/uploads/2011/11/150x150_Text_Entry_11.png" /></a>

I'm using this on a text widget on wordpress to put it on my sidebar.

CPU	Motherboard	Graphics	RAM
Intel Pentium Dual-Core E2200	MSI 945GCM5-F V2 (FSB 1333)	Inno3D Nvidia GeForce GTS 450 1GB (Cooler Ripoff)	Kingston DDR2
RAM	Hard Drive	Hard Drive	Optical Drive
Apacer DDR2	Western Digital WD Blue	Western Digital Caviar Green EARS	Benq DVD-R,CD-R,DVD-ROM,CD-ROM
Cooling	OS	Monitor	Monitor
Intel Stock Fan	Windows 7 Ultimate x86	Samsung SyncMaster B2230	MAG Innovision 17" CRT
Keyboard	Power	Case	Mouse
Logitech Internet Pro	AcBel R8 PowerII 650W 80+	Vertu Santa Fe "Blue"	Logitech Internet Pro
Mouse Pad	Audio	Audio
CM Storm Pad	Sound Blaster Audigy 2 ZS	Creative T7900
View all

hide details

CPU	Motherboard	Graphics	RAM
Intel Pentium Dual-Core E2200	MSI 945GCM5-F V2 (FSB 1333)	Inno3D Nvidia GeForce GTS 450 1GB (Cooler Ripoff)	Kingston DDR2
RAM	Hard Drive	Hard Drive	Optical Drive
Apacer DDR2	Western Digital WD Blue	Western Digital Caviar Green EARS	Benq DVD-R,CD-R,DVD-ROM,CD-ROM
Cooling	OS	Monitor	Monitor
Intel Stock Fan	Windows 7 Ultimate x86	Samsung SyncMaster B2230	MAG Innovision 17" CRT
Keyboard	Power	Case	Mouse
Logitech Internet Pro	AcBel R8 PowerII 650W 80+	Vertu Santa Fe "Blue"	Logitech Internet Pro
Mouse Pad	Audio	Audio
CM Storm Pad	Sound Blaster Audigy 2 ZS	Creative T7900
View all

hide details

post #2 of 14

4/29/12 at 5:39pm

kz26
Programmer

Joined: Nov 2007
Location: University of Chicago
Posts: 2,122
Rep: 178 (Unique: 167)
Trader Rating: 12
Select All Posts By This User

You'll need to float the first image to the left.

Code:

img {
    float: left;
}

CPU	Motherboard	Graphics	Graphics
Intel Core i5-3450	ASRock Z77E-ITX	Intel HD Graphics 2500	EVGA GeForce GTX 650 Ti SSC 1GB
RAM	Hard Drive	Optical Drive	OS
Crucial Ballistix Sport 2x4GB DDR3-1600	Crucial m4 256GB	LG GH22NS90	Windows 7 Ultimate 64-bit SP1
Monitor	Keyboard	Power	Case
Samsung 2494SW	Das Model S Professional Silent	Silverstone SST-ST45SF	Silverstone SG06
Mouse	Audio
Logitech MX518	Realtek ALC898
View all

hide details

CPU	Motherboard	Graphics	Graphics
Intel Core i5-3450	ASRock Z77E-ITX	Intel HD Graphics 2500	EVGA GeForce GTX 650 Ti SSC 1GB
RAM	Hard Drive	Optical Drive	OS
Crucial Ballistix Sport 2x4GB DDR3-1600	Crucial m4 256GB	LG GH22NS90	Windows 7 Ultimate 64-bit SP1
Monitor	Keyboard	Power	Case
Samsung 2494SW	Das Model S Professional Silent	Silverstone SST-ST45SF	Silverstone SG06
Mouse	Audio
Logitech MX518	Realtek ALC898
View all

hide details

post #3 of 14

4/29/12 at 5:49pm

Thread Starter

Speedster159
PC Gamer

Joined: Aug 2009
Location: Philippines
Posts: 3,624
Rep: 52 (Unique: 46)
Select All Posts By This User

Quote:

Originally Posted by kz26

You'll need to float the first image to the left.

Code:

img {
    float: left;
}

Looks like thats CSS and not HTML. Made a google search and found the HTML one.

Code:

<a title="Single Mom Super Mom on Bloglovin" href="http://www.bloglovin.com/en/blog/3436662/single-mom-super-mom/follow"><img alt="bloglovin" border="0" src="http://www.bloglovin.com/widget/bilder/fashionchalet.gif" class="floatLeft" /></a>
<a title="Good Blog Entry"><img alt="Good Blog Entry" border="0" src="http://www.goodblogaward.com/wp-content/uploads/2011/11/150x150_Text_Entry_11.png" /></a>

Works on the realtime editor but not in practice.

Did i do that right?
Edited by Speedster159 - 4/29/12 at 5:52pm

CPU	Motherboard	Graphics	RAM
Intel Pentium Dual-Core E2200	MSI 945GCM5-F V2 (FSB 1333)	Inno3D Nvidia GeForce GTS 450 1GB (Cooler Ripoff)	Kingston DDR2
RAM	Hard Drive	Hard Drive	Optical Drive
Apacer DDR2	Western Digital WD Blue	Western Digital Caviar Green EARS	Benq DVD-R,CD-R,DVD-ROM,CD-ROM
Cooling	OS	Monitor	Monitor
Intel Stock Fan	Windows 7 Ultimate x86	Samsung SyncMaster B2230	MAG Innovision 17" CRT
Keyboard	Power	Case	Mouse
Logitech Internet Pro	AcBel R8 PowerII 650W 80+	Vertu Santa Fe "Blue"	Logitech Internet Pro
Mouse Pad	Audio	Audio
CM Storm Pad	Sound Blaster Audigy 2 ZS	Creative T7900
View all

hide details

CPU	Motherboard	Graphics	RAM
Intel Pentium Dual-Core E2200	MSI 945GCM5-F V2 (FSB 1333)	Inno3D Nvidia GeForce GTS 450 1GB (Cooler Ripoff)	Kingston DDR2
RAM	Hard Drive	Hard Drive	Optical Drive
Apacer DDR2	Western Digital WD Blue	Western Digital Caviar Green EARS	Benq DVD-R,CD-R,DVD-ROM,CD-ROM
Cooling	OS	Monitor	Monitor
Intel Stock Fan	Windows 7 Ultimate x86	Samsung SyncMaster B2230	MAG Innovision 17" CRT
Keyboard	Power	Case	Mouse
Logitech Internet Pro	AcBel R8 PowerII 650W 80+	Vertu Santa Fe "Blue"	Logitech Internet Pro
Mouse Pad	Audio	Audio
CM Storm Pad	Sound Blaster Audigy 2 ZS	Creative T7900
View all

hide details

post #4 of 14

4/29/12 at 8:37pm

MakubeX
Programmer

Joined: Oct 2008
Posts: 1,439
Rep: 97 (Unique: 92)
Trader Rating: 18
Select All Posts By This User

Quote:

Originally Posted by Speedster159

Looks like thats CSS and not HTML. Made a google search and found the HTML one.

Code:

<a title="Single Mom Super Mom on Bloglovin" href="http://www.bloglovin.com/en/blog/3436662/single-mom-super-mom/follow"><img alt="bloglovin" border="0" src="http://www.bloglovin.com/widget/bilder/fashionchalet.gif" class="floatLeft" /></a>
<a title="Good Blog Entry"><img alt="Good Blog Entry" border="0" src="http://www.goodblogaward.com/wp-content/uploads/2011/11/150x150_Text_Entry_11.png" /></a>

Works on the realtime editor but not in practice.
Did i do that right?

You may need CSS. Your code probably works in the realtime editor because the editor is defining the css class "floatLeft" for you. If you don't don't define the class it won't do anything.

You can use float or "display: inline" to display the elements side by side.

CPU	Motherboard	Graphics	RAM
i7 3770K @4.7GHz (1.224v)	Gigabyte GA-Z77X-UD5H	MSI GTX 580 TF	8GB Samsung MV-3V4G3 @ 1866MHz 1.36v
Hard Drive	Optical Drive	Cooling	OS
Vertex4 128GB, Sammy 830 256GB, HDDs, etc	Pioneer DVR-215	Apogee XT	Win 7 Pro 64bit
Monitor	Keyboard	Power	Case
HP ZR24W e-IPS LCD	Logitech G19	Corsair HX850	CM ATCS 840 Black
Mouse	Mouse Pad
Logitech G500	Steelseries SX
View all

hide details

CPU	Motherboard	Graphics	RAM
i7 3770K @4.7GHz (1.224v)	Gigabyte GA-Z77X-UD5H	MSI GTX 580 TF	8GB Samsung MV-3V4G3 @ 1866MHz 1.36v
Hard Drive	Optical Drive	Cooling	OS
Vertex4 128GB, Sammy 830 256GB, HDDs, etc	Pioneer DVR-215	Apogee XT	Win 7 Pro 64bit
Monitor	Keyboard	Power	Case
HP ZR24W e-IPS LCD	Logitech G19	Corsair HX850	CM ATCS 840 Black
Mouse	Mouse Pad
Logitech G500	Steelseries SX
View all

hide details

post #5 of 14

5/1/12 at 3:19am

d3viliz3d

Joined: Jan 2011
Location: Italy
Posts: 840
Rep: 57 (Unique: 52)
Trader Rating: 6
Folding Team Rank: 800
Name Team Rank Points / May Work Units / May

d3viliz3d 800 2,664,013 / 148,910 1,467 / 34
Select All Posts By This User

Name	Team Rank	Points / May	Work Units / May
d3viliz3d	800	2,664,013 / 148,910	1,467 / 34

wrap those pictures in span tags, that should work:

Code:

<span><a title="Something." href="http://www.something.com/en/blog/3436662/some-blog/follow"><img alt="bloglovin" border="0" src="http://www.something.com/widget/bilder/fashionchalet.gif" /></a></span>

<span><a title="Good Blog Entry"><img alt="Good Blog Entry" border="0" src="http://www.someting.com/wp-content/uploads/2011/11/150x150_Text_Entry_11.png" /></a></span>

CPU	Motherboard	Graphics	RAM
Intel Core i7 2600K	Maximus IV Extreme	NVIDIA GeForce GTX 580	Corsair Vengeance 8GB
Hard Drive	Hard Drive	Optical Drive	Cooling
Intel SSD 520	Western Digital Caviar Black	LG BH10LS30	Koolance CPU370
OS	Monitor	Keyboard	Power
Windows 7 64-bit	Samsung PX2370 23"	Standard Keyboard	Corsair AX750
Case	Mouse	Mouse Pad	Audio
Corsair Obsidian 800D	Razer Mamba 2012	Razer Ironclad	Razer Chimaera
View all

hide details

CPU	Motherboard	Graphics	RAM
Intel Core i7 2600K	Maximus IV Extreme	NVIDIA GeForce GTX 580	Corsair Vengeance 8GB
Hard Drive	Hard Drive	Optical Drive	Cooling
Intel SSD 520	Western Digital Caviar Black	LG BH10LS30	Koolance CPU370
OS	Monitor	Keyboard	Power
Windows 7 64-bit	Samsung PX2370 23"	Standard Keyboard	Corsair AX750
Case	Mouse	Mouse Pad	Audio
Corsair Obsidian 800D	Razer Mamba 2012	Razer Ironclad	Razer Chimaera
View all

hide details

post #6 of 14

5/1/12 at 2:11pm

Thread Starter

Speedster159
PC Gamer

Joined: Aug 2009
Location: Philippines
Posts: 3,624
Rep: 52 (Unique: 46)
Select All Posts By This User

Quote:

Originally Posted by d3viliz3d

wrap those pictures in span tags, that should work:

Code:

<span><a title="Something." href="http://www.something.com/en/blog/3436662/some-blog/follow"><img alt="bloglovin" border="0" src="http://www.something.com/widget/bilder/fashionchalet.gif" /></a></span>
<span><a title="Good Blog Entry"><img alt="Good Blog Entry" border="0" src="http://www.someting.com/wp-content/uploads/2011/11/150x150_Text_Entry_11.png" /></a></span>

Just used the code you indicated, but it still the same.

CPU	Motherboard	Graphics	RAM
Intel Pentium Dual-Core E2200	MSI 945GCM5-F V2 (FSB 1333)	Inno3D Nvidia GeForce GTS 450 1GB (Cooler Ripoff)	Kingston DDR2
RAM	Hard Drive	Hard Drive	Optical Drive
Apacer DDR2	Western Digital WD Blue	Western Digital Caviar Green EARS	Benq DVD-R,CD-R,DVD-ROM,CD-ROM
Cooling	OS	Monitor	Monitor
Intel Stock Fan	Windows 7 Ultimate x86	Samsung SyncMaster B2230	MAG Innovision 17" CRT
Keyboard	Power	Case	Mouse
Logitech Internet Pro	AcBel R8 PowerII 650W 80+	Vertu Santa Fe "Blue"	Logitech Internet Pro
Mouse Pad	Audio	Audio
CM Storm Pad	Sound Blaster Audigy 2 ZS	Creative T7900
View all

hide details

CPU	Motherboard	Graphics	RAM
Intel Pentium Dual-Core E2200	MSI 945GCM5-F V2 (FSB 1333)	Inno3D Nvidia GeForce GTS 450 1GB (Cooler Ripoff)	Kingston DDR2
RAM	Hard Drive	Hard Drive	Optical Drive
Apacer DDR2	Western Digital WD Blue	Western Digital Caviar Green EARS	Benq DVD-R,CD-R,DVD-ROM,CD-ROM
Cooling	OS	Monitor	Monitor
Intel Stock Fan	Windows 7 Ultimate x86	Samsung SyncMaster B2230	MAG Innovision 17" CRT
Keyboard	Power	Case	Mouse
Logitech Internet Pro	AcBel R8 PowerII 650W 80+	Vertu Santa Fe "Blue"	Logitech Internet Pro
Mouse Pad	Audio	Audio
CM Storm Pad	Sound Blaster Audigy 2 ZS	Creative T7900
View all

hide details

post #7 of 14

5/1/12 at 2:14pm

Ulquiorra
733mhz

Joined: May 2008
Location: rotherham
Posts: 1,101
Rep: 71 (Unique: 63)
Reviews: 1
Select All Posts By This User

HTML is not for styling, use CSS for that.

For example add a stle tag to both of the images one of

style="float:left"
the other
style="float:right"

CPU	Motherboard	Graphics	RAM
1055T	M4A88T-D EVO USB3	ATI 6850	4 GB
Optical Drive	OS	Monitor	Keyboard
DVD RW	Windows 8 Pro	lp1900 + 2 X 15 inch dell	Microsoft Comfort Curve
Power	Case
600watt thermaltake	antec 200
View all

hide details

CPU	Motherboard	Graphics	RAM
1055T	M4A88T-D EVO USB3	ATI 6850	4 GB
Optical Drive	OS	Monitor	Keyboard
DVD RW	Windows 8 Pro	lp1900 + 2 X 15 inch dell	Microsoft Comfort Curve
Power	Case
600watt thermaltake	antec 200
View all

hide details

post #8 of 14

5/1/12 at 2:48pm

Thread Starter

Speedster159
PC Gamer

Joined: Aug 2009
Location: Philippines
Posts: 3,624
Rep: 52 (Unique: 46)
Select All Posts By This User

Still can't make it work... :|

CPU	Motherboard	Graphics	RAM
Intel Pentium Dual-Core E2200	MSI 945GCM5-F V2 (FSB 1333)	Inno3D Nvidia GeForce GTS 450 1GB (Cooler Ripoff)	Kingston DDR2
RAM	Hard Drive	Hard Drive	Optical Drive
Apacer DDR2	Western Digital WD Blue	Western Digital Caviar Green EARS	Benq DVD-R,CD-R,DVD-ROM,CD-ROM
Cooling	OS	Monitor	Monitor
Intel Stock Fan	Windows 7 Ultimate x86	Samsung SyncMaster B2230	MAG Innovision 17" CRT
Keyboard	Power	Case	Mouse
Logitech Internet Pro	AcBel R8 PowerII 650W 80+	Vertu Santa Fe "Blue"	Logitech Internet Pro
Mouse Pad	Audio	Audio
CM Storm Pad	Sound Blaster Audigy 2 ZS	Creative T7900
View all

hide details

CPU	Motherboard	Graphics	RAM
Intel Pentium Dual-Core E2200	MSI 945GCM5-F V2 (FSB 1333)	Inno3D Nvidia GeForce GTS 450 1GB (Cooler Ripoff)	Kingston DDR2
RAM	Hard Drive	Hard Drive	Optical Drive
Apacer DDR2	Western Digital WD Blue	Western Digital Caviar Green EARS	Benq DVD-R,CD-R,DVD-ROM,CD-ROM
Cooling	OS	Monitor	Monitor
Intel Stock Fan	Windows 7 Ultimate x86	Samsung SyncMaster B2230	MAG Innovision 17" CRT
Keyboard	Power	Case	Mouse
Logitech Internet Pro	AcBel R8 PowerII 650W 80+	Vertu Santa Fe "Blue"	Logitech Internet Pro
Mouse Pad	Audio	Audio
CM Storm Pad	Sound Blaster Audigy 2 ZS	Creative T7900
View all

hide details

post #9 of 14

5/1/12 at 3:13pm

MakubeX
Programmer

Joined: Oct 2008
Posts: 1,439
Rep: 97 (Unique: 92)
Trader Rating: 18
Select All Posts By This User

I guess we'll need to see the entire code to be able to help, because you should've even need CSS to just put two anchor elements with image elements side by side.

CPU	Motherboard	Graphics	RAM
i7 3770K @4.7GHz (1.224v)	Gigabyte GA-Z77X-UD5H	MSI GTX 580 TF	8GB Samsung MV-3V4G3 @ 1866MHz 1.36v
Hard Drive	Optical Drive	Cooling	OS
Vertex4 128GB, Sammy 830 256GB, HDDs, etc	Pioneer DVR-215	Apogee XT	Win 7 Pro 64bit
Monitor	Keyboard	Power	Case
HP ZR24W e-IPS LCD	Logitech G19	Corsair HX850	CM ATCS 840 Black
Mouse	Mouse Pad
Logitech G500	Steelseries SX
View all

hide details

CPU	Motherboard	Graphics	RAM
i7 3770K @4.7GHz (1.224v)	Gigabyte GA-Z77X-UD5H	MSI GTX 580 TF	8GB Samsung MV-3V4G3 @ 1866MHz 1.36v
Hard Drive	Optical Drive	Cooling	OS
Vertex4 128GB, Sammy 830 256GB, HDDs, etc	Pioneer DVR-215	Apogee XT	Win 7 Pro 64bit
Monitor	Keyboard	Power	Case
HP ZR24W e-IPS LCD	Logitech G19	Corsair HX850	CM ATCS 840 Black
Mouse	Mouse Pad
Logitech G500	Steelseries SX
View all

hide details

post #10 of 14

5/1/12 at 3:24pm

Thread Starter

Speedster159
PC Gamer

Joined: Aug 2009
Location: Philippines
Posts: 3,624
Rep: 52 (Unique: 46)
Select All Posts By This User

Quote:

Originally Posted by MakubeX

I guess we'll need to see the entire code to be able to help, because you should've even need CSS to just put two anchor elements with image elements side by side.

It's on post 1.

CPU	Motherboard	Graphics	RAM
Intel Pentium Dual-Core E2200	MSI 945GCM5-F V2 (FSB 1333)	Inno3D Nvidia GeForce GTS 450 1GB (Cooler Ripoff)	Kingston DDR2
RAM	Hard Drive	Hard Drive	Optical Drive
Apacer DDR2	Western Digital WD Blue	Western Digital Caviar Green EARS	Benq DVD-R,CD-R,DVD-ROM,CD-ROM
Cooling	OS	Monitor	Monitor
Intel Stock Fan	Windows 7 Ultimate x86	Samsung SyncMaster B2230	MAG Innovision 17" CRT
Keyboard	Power	Case	Mouse
Logitech Internet Pro	AcBel R8 PowerII 650W 80+	Vertu Santa Fe "Blue"	Logitech Internet Pro
Mouse Pad	Audio	Audio
CM Storm Pad	Sound Blaster Audigy 2 ZS	Creative T7900
View all

hide details

CPU	Motherboard	Graphics	RAM
Intel Pentium Dual-Core E2200	MSI 945GCM5-F V2 (FSB 1333)	Inno3D Nvidia GeForce GTS 450 1GB (Cooler Ripoff)	Kingston DDR2
RAM	Hard Drive	Hard Drive	Optical Drive
Apacer DDR2	Western Digital WD Blue	Western Digital Caviar Green EARS	Benq DVD-R,CD-R,DVD-ROM,CD-ROM
Cooling	OS	Monitor	Monitor
Intel Stock Fan	Windows 7 Ultimate x86	Samsung SyncMaster B2230	MAG Innovision 17" CRT
Keyboard	Power	Case	Mouse
Logitech Internet Pro	AcBel R8 PowerII 650W 80+	Vertu Santa Fe "Blue"	Logitech Internet Pro
Mouse Pad	Audio	Audio
CM Storm Pad	Sound Blaster Audigy 2 ZS	Creative T7900
View all

hide details

« Previous
1
2
Next »

Start a New Thread

Subscribe Search This Thread

New Posts All Forums:Forum Nav:

Return Home

Back to Forum: Web Coding

Forums
Software, Programming and Coding
Coding and Programming
Web Coding
How to put pictures side by side on HTML?

Metro 2033 is one of the greatest FPS games ever made. Although not usually recognized as such, due to the horrible state the gaming industry is in, it succeeds largely on its storytelling,...

This is an update of the original Fractal Design Arc Midi. The solid left panel has been replaced by a panel with a plexiglass window and the top USB ports are now USB-3.0. Let me state at the...

All in all great cooler for the money and has always worked reliably. Excellent for a backup cooling system or for low-cost budget computers, while still being able to overclock.

I've used this headset extensively for MAG on PS3. The sounds were wonderful, the mic was crisp, and the ability to adjust peoples voice volume is absolutely invaluable. For $100 ( or less ) this...

The Pros The reason this card is one of the better non-Tahiti 7870s is because of Gigabyte's custom PCB. Gigabyte took the 7870 and replaced it's memory chips with Hynix memory so they perform a...

Recent Reviews

How to put pictures side by side on HTML?

Recent Discussions

Recent Reviews

New Articles

Featured Sponsors

Recent Reviews

How to put pictures side by side on HTML?

Recent Discussions

Recent Reviews

New Articles