How to put pictures side by side on HTML?

Speedster159 · Apr 30, 2012

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

Here is the picture of it.

And the code i use.

Code:

Code:

[URL=http://www.something.com/en/blog/3436662/some-blog/follow][IMG alt="bloglovin"]http://www.something.com/widget/bilder/fashionchalet.gif[/IMG][/URL]

[URL=][IMG alt="Good Blog Entry"]http://www.someting.com/wp-content/uploads/2011/11/150x150_Text_Entry_11.png[/IMG][/URL]

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

kz26 · Apr 30, 2012

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

Code:

Code:

img {
    float: left;
}

Speedster159 · Apr 30, 2012

Quote:

Code:
Originally Posted by kz26

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

Code:

Code:

img { float: left; }

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

Code:

Code:

[URL=http://www.bloglovin.com/en/blog/3436662/single-mom-super-mom/follow][IMG alt="bloglovin"]http://www.bloglovin.com/widget/bilder/fashionchalet.gif[/IMG][/URL]
[URL=][IMG alt="Good Blog Entry"]http://www.goodblogaward.com/wp-content/uploads/2011/11/150x150_Text_Entry_11.png[/IMG][/URL]

Works on the realtime editor but not in practice.

Did i do that right?

MakubeX · Apr 30, 2012

Quote:

Code:
Originally Posted by Speedster159

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

Code:

Code:

[URL=http://www.bloglovin.com/en/blog/3436662/single-mom-super-mom/follow][IMG alt="bloglovin"]http://www.bloglovin.com/widget/bilder/fashionchalet.gif[/IMG][/URL] [URL=][IMG alt="Good Blog Entry"]http://www.goodblogaward.com/wp-content/uploads/2011/11/150x150_Text_Entry_11.png[/IMG][/URL]

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.

d3viliz3d · May 1, 2012

wrap those pictures in span tags, that should work:

Code:

Code:

[URL=http://www.something.com/en/blog/3436662/some-blog/follow][IMG alt="bloglovin"]http://www.something.com/widget/bilder/fashionchalet.gif[/IMG][/URL]

[URL=][IMG alt="Good Blog Entry"]http://www.someting.com/wp-content/uploads/2011/11/150x150_Text_Entry_11.png[/IMG][/URL]

Speedster159 · May 1, 2012

Quote:

Originally Posted by d3viliz3d

wrap those pictures in span tags, that should work:

Code:

Code:

[URL=http://www.something.com/en/blog/3436662/some-blog/follow][IMG alt="bloglovin"]http://www.something.com/widget/bilder/fashionchalet.gif[/IMG][/URL]
[URL=][IMG alt="Good Blog Entry"]http://www.someting.com/wp-content/uploads/2011/11/150x150_Text_Entry_11.png[/IMG][/URL]

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

Ulquiorra · May 1, 2012

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"

Speedster159 · May 1, 2012

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

MakubeX · May 1, 2012

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.

Speedster159 · May 1, 2012

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.

MakubeX · May 2, 2012

Quote:

Originally Posted by Speedster159

It's on post 1.

That is not the entire code.

Jonowxeno · May 2, 2012

The answer is simple

The two images aren't side by side because their combined width is larger than the width of the sidebar so the second one is pushed to a new line. Check your widths

Zeus · May 4, 2012

Quote:

Originally Posted by Jonowxeno

The answer is simple
The two images aren't side by side because their combined width is larger than the width of the sidebar so the second one is pushed to a new line. Check your widths

I agree, that was my first thought

OneSneakyMofo · May 29, 2012

Code:

                        [IMG]http://placehold.it/300x900[/IMG]

                        [IMG]http://placehold.it/300x300[/IMG]

Code is tested.

How to put pictures side by side on HTML?

Speedster159

kz26

Speedster159

MakubeX

d3viliz3d

Speedster159

Ulquiorra

Speedster159

MakubeX

Speedster159

MakubeX

Jonowxeno

Zeus

OneSneakyMofo

Top Contributors this Month

Recommended Communities