homepage Welcome to WebmasterWorld Guest from 107.20.34.144
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
css image positioning
cannot have two images side by side
grmorley



 
Msg#: 4593644 posted 7:43 pm on Jul 16, 2013 (gmt 0)

I've been trying and failing to have two images side by side with space between them and centered.

I can sort of do it but the bottom table comes up and rest against the bottom of images and no matter what I do it won't move.

In the end I have put them in a table and everything is great but I want to do it with CSS.

Can someone give me the exact CSS and html to make this happen?

Thanks.
Graham

 

DrDoc

WebmasterWorld Senior Member drdoc us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4593644 posted 8:35 pm on Jul 16, 2013 (gmt 0)

Welcome to WebmasterWorld! Glad to have you here, and hope to see you many more times.

As for your question, it might be good to point out that there's no disconnect between CSS and tables. Tables are HTML, CSS is used to style all HTML elements.

In this case, you are looking at a single property:
text-align.

You can easily use CSS to tell your images to line up as described.

.container { 
text-align: center;
}

<div class="container">
<img src="img.jpg">
<img src="img.jpg">
</div>

grmorley



 
Msg#: 4593644 posted 9:13 pm on Jul 16, 2013 (gmt 0)

Thanks for that - yes it does work. How can I increase the white space between the images and also the lower table still clings to the bottom of the images? If I have just one image <br> or <p> gives me the required space between the images and lower table.

Thanks.
Graham

DrDoc

WebmasterWorld Senior Member drdoc us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4593644 posted 9:18 pm on Jul 16, 2013 (gmt 0)

Having a
<br> certainly works. But there is also no need to introduce markup when it isn't necessary.

By tweaking the CSS above, you can easily achieve what you are looking for. Try giving your images some padding. for example:

.container img { 
padding: 1em;
padding-top: 0;
}

grmorley



 
Msg#: 4593644 posted 9:41 pm on Jul 16, 2013 (gmt 0)

Thanks for that - I see how that works but I want to increase the space between the two images - at the moment they are almost touching - before I would have put a blank image between them but sure this isn't the case?
Thanks.
Graham

aakk9999

WebmasterWorld Administrator 5+ Year Member



 
Msg#: 4593644 posted 9:58 pm on Jul 16, 2013 (gmt 0)

For example:

<div class="container">
<img src="img.jpg" style="margin-right: 20px;">
<img src="img.jpg">
</div>

But this is inline css. There are many ways to do this in css that is not inline.

<added> This is wrong, isn't it! Not thinking!
</added>

[edited by: aakk9999 at 10:02 pm (utc) on Jul 16, 2013]

DrDoc

WebmasterWorld Senior Member drdoc us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4593644 posted 9:59 pm on Jul 16, 2013 (gmt 0)

You can achieve that by playing around with padding. [w3schools.com...]

Blank images are a thing of the past.

grmorley



 
Msg#: 4593644 posted 10:13 pm on Jul 16, 2013 (gmt 0)

Thanks for your help I'll try the padding etc. tomorrow and get back to you.
Thanks again.
Graham

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved