6 replies [Last post]
wotnow
wotnow's picture
Offline
newbie
Last seen: 5 years 43 weeks ago
Timezone: GMT+8
Joined: 2014-03-22
Posts: 5
Points: 8

Hi I am going crazy here. I am trying to sit two image links side by side and know that I should make a containing div and then put the image links in 2 containers within the holding container and float them both to the left but it just isnt working sigh!

Here is the code:
#brochureImages {
width:800px;
height:140px;
background-color:purple;}

#rightBrochure a img {
float:left;
width:120px;
margin-right: 20px;
background-color:orange;}

#leftBrochure a img{
float:left;
width:120px;
margin-right: 20px;
background-color:pink;}

Download our Brochures!

2014/15 Brochure
????????? 2014/2015 Brochure

Wet Season Brochure
2013-14-WetSeasonBrochure

Below is a screenshot of what I am getting ..

wotnow
wotnow's picture
Offline
newbie
Last seen: 5 years 43 weeks ago
Timezone: GMT+8
Joined: 2014-03-22
Posts: 5
Points: 8

sorry screenshot didnt appear

[/URL]" />

wotnow
wotnow's picture
Offline
newbie
Last seen: 5 years 43 weeks ago
Timezone: GMT+8
Joined: 2014-03-22
Posts: 5
Points: 8

try again

wotnow
wotnow's picture
Offline
newbie
Last seen: 5 years 43 weeks ago
Timezone: GMT+8
Joined: 2014-03-22
Posts: 5
Points: 8

cant seem to get the image showing

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 3 years 24 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

Try this: Give both images

Try this:
Give both images the same class, for example thumbnail.

Then this should be the css code for your thumbnails.

.thumbnail 
{
float:left;
width:110px;
height:90px;
margin:5px;
}

width, height and margin are just examples.
You can change them to your liking.
Now both images are having the same class, same width, same height and same margin.
Why create different CSS lines for different images with the same properties.

This was just for cleaning up your CSS.

But the problem comes from your text.
Your text is wider then your image, resulting in lowering your second image to make it fit.
Maybe make your text smaller, or create more margin between the both images so it can get the same line-height as the first image.

Hope this helps.

Check Maximum Webdesign for your online solutions

wotnow
wotnow's picture
Offline
newbie
Last seen: 5 years 43 weeks ago
Timezone: GMT+8
Joined: 2014-03-22
Posts: 5
Points: 8

Thank you so much I have

Thank you so much Smile I have another friend in the Netherlands who is also extremely smart and very helpful, must be nice people in the Netherlands.

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 3 years 24 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

Happy it is solved

Happy it is solved Wink

Check Maximum Webdesign for your online solutions