Hi - I'm having difficulty setting up three divs within a div.
Whatever I do, the third div turns to make a new line.
J3.2.3, responsive template, url: www.leadbetters.co.uk/newsite/

I've googled around and come up with this css:
.panel{
text-align:center
}
.left{
float: left;
}
.right{
float: right;
}
.center{
text-align:left;
margin:0 auto !important;
display:inline-block
}


This is the html I'm using:
<div class="panel" style="box-shadow: #888888 10px 10px 5px; border-color: #e6e7e8; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; background-color: #f1f2f2;">
<div class="left"><a href="index.php?option=com_breezingforms&view=form&Itemid=225"><img alt="phone 3" src="images/phonegrey.jpeg" height="63" width="63" /></a></div>
<div class="center"><a href="mailto:[email protected]?&subject=Contact%20from%20leadbetters.co.uk"><img alt="" src="images/email2.jpeg" height="50" width="50" /></a></div>
<div class="right;"><a href="index.php?option=com_breezingforms&view=form&Itemid=171"><img alt="form" src="images/form.jpeg" height="52" width="52" /></a></div>
</div>

Can anyone help?
Thanks
Ian

Hi Ian,

First thing is to move the inline styling to a style sheet

Cheers
Paul

OK, done that.
Thanks Paul

What are you actually looking to do with the images?

Phone on the left, envelope in the middle, and piece of paper on the right. Each one should have a caption, centred underneath, but I took them off to simplify it…
I looked all over for ways of achieving this, and the css I found appeared to be the most simple - except I can't make it work.
User error I'm sure - as always!
Thanks
Ian

The last div takes up the whole width as by default a div occupies 100% width

The first div doesn't as you floated it

You will probably need a clear after the closing div

You do appear to have an unwanted ; in the last image html

I'd also look at using a horinzontal list as an alternative option with images inside the li

Cheers
Paul

Hi Paul - thanks for this. I can't identify the unwanted ;
Ian

<div class="right;">

Cheers
Paul

Well that fixed it straight away. I'll have to try specsavers again!
Thanks again for your help Paul.
Ian

You and me both - I missed it the first and second time

Cheers
Paul

I also put a <div style="clear: both;"> </div> just before the final </div>
thanks again
Ian

Yep saw that - now looks alright

Cheers
Paul

Allright-ish - I'll come back and tidy the spacing later…
Ian

right - that looks like different image sizes

Cheers