Layout Problem

Ballyman

Hi

I wonder could someone help me out here. It's probably very simple but I aint a coding person so im baffled with it!

If you look here you can see at the botom where the phone number is that it is misaligned with the text "Telephone" but the email address etc is fine. It worked fine until I put in the google map at the right and now it's misaligned. The code is below. Anyone have any idea what I am doing wrong here? Thanks a million for any help.


<section id="content">
<div id="indent">
<div class="wrapper">
<article class="col-3">
<h2 class="extra">Contact Information</h2>
<p>ATL Photography are wedding and portrait photographers based in Clane, Co Kildare. You can contact us by using the contact details below.</p>
<p class="extra">Should you have any questions or need further information on anything you see on our website then do not hesitate to contact us.</p>
<img class="fleft" src="images/6page_img1.jpg" alt="" title="">
<p>ATL Photography<br />
Collegewood Park<br />
Clane<br />
Co Kildare</p>
<p><a href="http://www.facebook.com/pages/ATL-Photography/180436311966380?ref=ts&sk=wall"><img class="fleft" src="images/facebook.jpg" alt="" title=""></a></p>
<p class="phones"><span>+353 (0)86 3211 555</span>Telephone: <br />
<span><a href="mailto:info@atl-photography.com">info@atl-photography.com</a></span> E-mail: </p>
</article>
<article class="col-4">
<iframe width="255" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps;output=embed"></iframe><br /><small><a href="http://maps.google.comz=13&quot; style="color:#0000FF;text-align:left">View Larger Map</a></small>
</article>

</div>
</div>
</section>

Spunog UIE

as quick fix... change

<p class="phones">

to

<p class="phones" style="clear:both;">

Or add/modify new class etc'

Ballyman

You're a star. Thanks a million.

Out of curiosity what does the line of code you posted mean anyway??

Spunog UIE

When you set a block to float:right you are telling it to float or stick to the very right side of its parent container. If there is room there then it will be displayed there, it will not go onto a new line if there is anything on the left hand side of the container.

The clear property tells it to drop below any content on the left or right or both.

Your layout has changed a bit since, but this fixed your problem as the <span> tags which contain the actual phone number and email had their float property set to right but the label part which read 'Phone | E-mail' were not in floating tags so what happened was the actual number floated to the right and had enough space aloneside your photo where as the label was not floating to the right and so had to drop down a line so they were on different lines. By adding the clear;both we told the block that held both the label and the value to drop down below the photo and so once again they were on the same line and corrected the layout.

Of course the page could have been structured a bit different using a list or table for the contact information which would make the code a bit more tidy, but what you have is fine.