Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › How to put pictures side by side on HTML?
New Posts  All Forums:Forum Nav:

How to put pictures side by side on HTML?

post #1 of 14
Thread Starter 
So how do i put pictures side by side using HTML?

Here is the picture of it.
467

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.
Wanted: [WANTED] 16GB 1600Mhz+ RAM Kit
$60 (USD) or best offer
First build
(5 items)
 
 
CPUMotherboardGraphicsRAM
Intel Pentium Dual-Core E2200 MSI 945GCM5-F V2 (FSB 1333) Inno3D Nvidia GeForce GTS 450 1GB (Cooler Ripoff) Kingston DDR2 
RAMHard DriveHard DriveOptical Drive
Apacer DDR2 Western Digital WD Blue Western Digital Caviar Green EARS Benq DVD-R,CD-R,DVD-ROM,CD-ROM 
CoolingOSMonitorMonitor
Intel Stock Fan Windows 7 Ultimate x86 Samsung SyncMaster B2230 MAG InnoVision 770FS 
KeyboardPowerCaseMouse
Logitech Internet Pro AcBel R8 PowerII 650W 80+ Vertu Santa Fe "Blue" Logitech Internet Pro 
Mouse PadAudioAudio
CM Storm Pad Sound Blaster Audigy 2 ZS Creative T7900 
  hide details  
Reply
Wanted: [WANTED] 16GB 1600Mhz+ RAM Kit
$60 (USD) or best offer
First build
(5 items)
 
 
CPUMotherboardGraphicsRAM
Intel Pentium Dual-Core E2200 MSI 945GCM5-F V2 (FSB 1333) Inno3D Nvidia GeForce GTS 450 1GB (Cooler Ripoff) Kingston DDR2 
RAMHard DriveHard DriveOptical Drive
Apacer DDR2 Western Digital WD Blue Western Digital Caviar Green EARS Benq DVD-R,CD-R,DVD-ROM,CD-ROM 
CoolingOSMonitorMonitor
Intel Stock Fan Windows 7 Ultimate x86 Samsung SyncMaster B2230 MAG InnoVision 770FS 
KeyboardPowerCaseMouse
Logitech Internet Pro AcBel R8 PowerII 650W 80+ Vertu Santa Fe "Blue" Logitech Internet Pro 
Mouse PadAudioAudio
CM Storm Pad Sound Blaster Audigy 2 ZS Creative T7900 
  hide details  
Reply
post #2 of 14
You'll need to float the first image to the left.
Code:
img {
    float: left;
}
    
CPUMotherboardGraphicsGraphics
Intel Core i5-3450 ASRock Z77E-ITX Intel HD Graphics 2500 Powercolor Radeon 7870 GHz Edition 
RAMHard DriveOptical DriveOS
Crucial Ballistix Sport 2x4GB DDR3-1600 Crucial m4 256GB LG GH22NS90 Windows 7 Ultimate 64-bit SP1 
MonitorMonitorKeyboardPower
Samsung 2494SW HP Pavilion 27xi Das Model S Professional Silent Silverstone SST-ST45SF 
CaseMouseAudio
Silverstone SG06 Logitech MX518 Realtek ALC898 
  hide details  
Reply
    
CPUMotherboardGraphicsGraphics
Intel Core i5-3450 ASRock Z77E-ITX Intel HD Graphics 2500 Powercolor Radeon 7870 GHz Edition 
RAMHard DriveOptical DriveOS
Crucial Ballistix Sport 2x4GB DDR3-1600 Crucial m4 256GB LG GH22NS90 Windows 7 Ultimate 64-bit SP1 
MonitorMonitorKeyboardPower
Samsung 2494SW HP Pavilion 27xi Das Model S Professional Silent Silverstone SST-ST45SF 
CaseMouseAudio
Silverstone SG06 Logitech MX518 Realtek ALC898 
  hide details  
Reply
post #3 of 14
Thread Starter 
Quote:
Originally Posted by kz26 View Post

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
Wanted: [WANTED] 16GB 1600Mhz+ RAM Kit
$60 (USD) or best offer
First build
(5 items)
 
 
CPUMotherboardGraphicsRAM
Intel Pentium Dual-Core E2200 MSI 945GCM5-F V2 (FSB 1333) Inno3D Nvidia GeForce GTS 450 1GB (Cooler Ripoff) Kingston DDR2 
RAMHard DriveHard DriveOptical Drive
Apacer DDR2 Western Digital WD Blue Western Digital Caviar Green EARS Benq DVD-R,CD-R,DVD-ROM,CD-ROM 
CoolingOSMonitorMonitor
Intel Stock Fan Windows 7 Ultimate x86 Samsung SyncMaster B2230 MAG InnoVision 770FS 
KeyboardPowerCaseMouse
Logitech Internet Pro AcBel R8 PowerII 650W 80+ Vertu Santa Fe "Blue" Logitech Internet Pro 
Mouse PadAudioAudio
CM Storm Pad Sound Blaster Audigy 2 ZS Creative T7900 
  hide details  
Reply
Wanted: [WANTED] 16GB 1600Mhz+ RAM Kit
$60 (USD) or best offer
First build
(5 items)
 
 
CPUMotherboardGraphicsRAM
Intel Pentium Dual-Core E2200 MSI 945GCM5-F V2 (FSB 1333) Inno3D Nvidia GeForce GTS 450 1GB (Cooler Ripoff) Kingston DDR2 
RAMHard DriveHard DriveOptical Drive
Apacer DDR2 Western Digital WD Blue Western Digital Caviar Green EARS Benq DVD-R,CD-R,DVD-ROM,CD-ROM 
CoolingOSMonitorMonitor
Intel Stock Fan Windows 7 Ultimate x86 Samsung SyncMaster B2230 MAG InnoVision 770FS 
KeyboardPowerCaseMouse
Logitech Internet Pro AcBel R8 PowerII 650W 80+ Vertu Santa Fe "Blue" Logitech Internet Pro 
Mouse PadAudioAudio
CM Storm Pad Sound Blaster Audigy 2 ZS Creative T7900 
  hide details  
Reply
post #4 of 14
Quote:
Originally Posted by Speedster159 View Post

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.
Sgr A*
(14 items)
 
  
CPUMotherboardGraphicsRAM
i7 3770K @4.7GHz (1.224v) Gigabyte GA-Z77X-UD5H EVGA GTX 780 SC ACX 8GB Samsung MV-3V4G3 @ 1866MHz 1.36v 
Hard DriveOptical DriveCoolingOS
2 x Sammy 830 256GB, Vertex4 128GB, HDDs, etc Pioneer DVR-215 Apogee XT Win 7 Pro 64bit 
MonitorKeyboardPowerCase
HP ZR24W e-IPS LCD Logitech G19 Corsair HX850 CM ATCS 840 Black 
MouseMouse Pad
Logitech G500 Steelseries SX 
  hide details  
Reply
Sgr A*
(14 items)
 
  
CPUMotherboardGraphicsRAM
i7 3770K @4.7GHz (1.224v) Gigabyte GA-Z77X-UD5H EVGA GTX 780 SC ACX 8GB Samsung MV-3V4G3 @ 1866MHz 1.36v 
Hard DriveOptical DriveCoolingOS
2 x Sammy 830 256GB, Vertex4 128GB, HDDs, etc Pioneer DVR-215 Apogee XT Win 7 Pro 64bit 
MonitorKeyboardPowerCase
HP ZR24W e-IPS LCD Logitech G19 Corsair HX850 CM ATCS 840 Black 
MouseMouse Pad
Logitech G500 Steelseries SX 
  hide details  
Reply
post #5 of 14
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>
post #6 of 14
Thread Starter 
Quote:
Originally Posted by d3viliz3d View Post

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.
Wanted: [WANTED] 16GB 1600Mhz+ RAM Kit
$60 (USD) or best offer
First build
(5 items)
 
 
CPUMotherboardGraphicsRAM
Intel Pentium Dual-Core E2200 MSI 945GCM5-F V2 (FSB 1333) Inno3D Nvidia GeForce GTS 450 1GB (Cooler Ripoff) Kingston DDR2 
RAMHard DriveHard DriveOptical Drive
Apacer DDR2 Western Digital WD Blue Western Digital Caviar Green EARS Benq DVD-R,CD-R,DVD-ROM,CD-ROM 
CoolingOSMonitorMonitor
Intel Stock Fan Windows 7 Ultimate x86 Samsung SyncMaster B2230 MAG InnoVision 770FS 
KeyboardPowerCaseMouse
Logitech Internet Pro AcBel R8 PowerII 650W 80+ Vertu Santa Fe "Blue" Logitech Internet Pro 
Mouse PadAudioAudio
CM Storm Pad Sound Blaster Audigy 2 ZS Creative T7900 
  hide details  
Reply
Wanted: [WANTED] 16GB 1600Mhz+ RAM Kit
$60 (USD) or best offer
First build
(5 items)
 
 
CPUMotherboardGraphicsRAM
Intel Pentium Dual-Core E2200 MSI 945GCM5-F V2 (FSB 1333) Inno3D Nvidia GeForce GTS 450 1GB (Cooler Ripoff) Kingston DDR2 
RAMHard DriveHard DriveOptical Drive
Apacer DDR2 Western Digital WD Blue Western Digital Caviar Green EARS Benq DVD-R,CD-R,DVD-ROM,CD-ROM 
CoolingOSMonitorMonitor
Intel Stock Fan Windows 7 Ultimate x86 Samsung SyncMaster B2230 MAG InnoVision 770FS 
KeyboardPowerCaseMouse
Logitech Internet Pro AcBel R8 PowerII 650W 80+ Vertu Santa Fe "Blue" Logitech Internet Pro 
Mouse PadAudioAudio
CM Storm Pad Sound Blaster Audigy 2 ZS Creative T7900 
  hide details  
Reply
post #7 of 14
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"
Supercomputer ^_^
(13 items)
 
  
CPUMotherboardGraphicsRAM
1055T M4A88T-D EVO USB3 ATI 6850 4 GB 
Optical DriveOSMonitorKeyboard
DVD RW Windows 8 Pro lp1900 + 2 X 15 inch dell Microsoft Comfort Curve 
PowerCase
600watt thermaltake antec 200 
  hide details  
Reply
Supercomputer ^_^
(13 items)
 
  
CPUMotherboardGraphicsRAM
1055T M4A88T-D EVO USB3 ATI 6850 4 GB 
Optical DriveOSMonitorKeyboard
DVD RW Windows 8 Pro lp1900 + 2 X 15 inch dell Microsoft Comfort Curve 
PowerCase
600watt thermaltake antec 200 
  hide details  
Reply
post #8 of 14
Thread Starter 
Still can't make it work... :|
Wanted: [WANTED] 16GB 1600Mhz+ RAM Kit
$60 (USD) or best offer
First build
(5 items)
 
 
CPUMotherboardGraphicsRAM
Intel Pentium Dual-Core E2200 MSI 945GCM5-F V2 (FSB 1333) Inno3D Nvidia GeForce GTS 450 1GB (Cooler Ripoff) Kingston DDR2 
RAMHard DriveHard DriveOptical Drive
Apacer DDR2 Western Digital WD Blue Western Digital Caviar Green EARS Benq DVD-R,CD-R,DVD-ROM,CD-ROM 
CoolingOSMonitorMonitor
Intel Stock Fan Windows 7 Ultimate x86 Samsung SyncMaster B2230 MAG InnoVision 770FS 
KeyboardPowerCaseMouse
Logitech Internet Pro AcBel R8 PowerII 650W 80+ Vertu Santa Fe "Blue" Logitech Internet Pro 
Mouse PadAudioAudio
CM Storm Pad Sound Blaster Audigy 2 ZS Creative T7900 
  hide details  
Reply
Wanted: [WANTED] 16GB 1600Mhz+ RAM Kit
$60 (USD) or best offer
First build
(5 items)
 
 
CPUMotherboardGraphicsRAM
Intel Pentium Dual-Core E2200 MSI 945GCM5-F V2 (FSB 1333) Inno3D Nvidia GeForce GTS 450 1GB (Cooler Ripoff) Kingston DDR2 
RAMHard DriveHard DriveOptical Drive
Apacer DDR2 Western Digital WD Blue Western Digital Caviar Green EARS Benq DVD-R,CD-R,DVD-ROM,CD-ROM 
CoolingOSMonitorMonitor
Intel Stock Fan Windows 7 Ultimate x86 Samsung SyncMaster B2230 MAG InnoVision 770FS 
KeyboardPowerCaseMouse
Logitech Internet Pro AcBel R8 PowerII 650W 80+ Vertu Santa Fe "Blue" Logitech Internet Pro 
Mouse PadAudioAudio
CM Storm Pad Sound Blaster Audigy 2 ZS Creative T7900 
  hide details  
Reply
post #9 of 14
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.
Sgr A*
(14 items)
 
  
CPUMotherboardGraphicsRAM
i7 3770K @4.7GHz (1.224v) Gigabyte GA-Z77X-UD5H EVGA GTX 780 SC ACX 8GB Samsung MV-3V4G3 @ 1866MHz 1.36v 
Hard DriveOptical DriveCoolingOS
2 x Sammy 830 256GB, Vertex4 128GB, HDDs, etc Pioneer DVR-215 Apogee XT Win 7 Pro 64bit 
MonitorKeyboardPowerCase
HP ZR24W e-IPS LCD Logitech G19 Corsair HX850 CM ATCS 840 Black 
MouseMouse Pad
Logitech G500 Steelseries SX 
  hide details  
Reply
Sgr A*
(14 items)
 
  
CPUMotherboardGraphicsRAM
i7 3770K @4.7GHz (1.224v) Gigabyte GA-Z77X-UD5H EVGA GTX 780 SC ACX 8GB Samsung MV-3V4G3 @ 1866MHz 1.36v 
Hard DriveOptical DriveCoolingOS
2 x Sammy 830 256GB, Vertex4 128GB, HDDs, etc Pioneer DVR-215 Apogee XT Win 7 Pro 64bit 
MonitorKeyboardPowerCase
HP ZR24W e-IPS LCD Logitech G19 Corsair HX850 CM ATCS 840 Black 
MouseMouse Pad
Logitech G500 Steelseries SX 
  hide details  
Reply
post #10 of 14
Thread Starter 
Quote:
Originally Posted by MakubeX View Post

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.
Wanted: [WANTED] 16GB 1600Mhz+ RAM Kit
$60 (USD) or best offer
First build
(5 items)
 
 
CPUMotherboardGraphicsRAM
Intel Pentium Dual-Core E2200 MSI 945GCM5-F V2 (FSB 1333) Inno3D Nvidia GeForce GTS 450 1GB (Cooler Ripoff) Kingston DDR2 
RAMHard DriveHard DriveOptical Drive
Apacer DDR2 Western Digital WD Blue Western Digital Caviar Green EARS Benq DVD-R,CD-R,DVD-ROM,CD-ROM 
CoolingOSMonitorMonitor
Intel Stock Fan Windows 7 Ultimate x86 Samsung SyncMaster B2230 MAG InnoVision 770FS 
KeyboardPowerCaseMouse
Logitech Internet Pro AcBel R8 PowerII 650W 80+ Vertu Santa Fe "Blue" Logitech Internet Pro 
Mouse PadAudioAudio
CM Storm Pad Sound Blaster Audigy 2 ZS Creative T7900 
  hide details  
Reply
Wanted: [WANTED] 16GB 1600Mhz+ RAM Kit
$60 (USD) or best offer
First build
(5 items)
 
 
CPUMotherboardGraphicsRAM
Intel Pentium Dual-Core E2200 MSI 945GCM5-F V2 (FSB 1333) Inno3D Nvidia GeForce GTS 450 1GB (Cooler Ripoff) Kingston DDR2 
RAMHard DriveHard DriveOptical Drive
Apacer DDR2 Western Digital WD Blue Western Digital Caviar Green EARS Benq DVD-R,CD-R,DVD-ROM,CD-ROM 
CoolingOSMonitorMonitor
Intel Stock Fan Windows 7 Ultimate x86 Samsung SyncMaster B2230 MAG InnoVision 770FS 
KeyboardPowerCaseMouse
Logitech Internet Pro AcBel R8 PowerII 650W 80+ Vertu Santa Fe "Blue" Logitech Internet Pro 
Mouse PadAudioAudio
CM Storm Pad Sound Blaster Audigy 2 ZS Creative T7900 
  hide details  
Reply
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Web Coding
Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › How to put pictures side by side on HTML?