Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Trying to align one image left, and one right, inside table using CSS?

    Hi Everyone,

    It has been a while since I have delved into web design, and as a result many of the old tags that I have used are no longer supported within HTML5. Due to the changes I am being forced to rely upon CSS to perform tasks where I would traditionally have simply used HTML.

    The the moment I have a 'simple' issue where in I would like to completely eliminate the space between a logo (on the left), and a heading (on the right).



    In the 'good old days' I would simply have used <td align="left">, for the logo, and <td align="right">, for the heading - however now (as of HTML5) I must use CSS.

    I have tried a variety of CSS attributes, without success, and my code currently looks like the following -

    Code:
    <div class="float-left">
    	<table style="background-color: #f00; border-collapse: collapse; table-layout: fixed; width: 570px;">
    		<tr>
    			<td>  
    				<img alt="System Control Logo" src="~/Images/sce-bpp-logo.jpg" height="105" width="249">
    			</td>
    			<td>
    				<img alt="System Control Logo" src="~/Images/sce-bpp-online.jpg" height="105" width="321">
    			</td>
    		</tr>
    	</table>
    </div>
    How can I go about eliminating the 'red gap' (background colour here is a deliberate choice!) between the logo (left) and heading (right)?

    Any help will be greatly appreciated.

    Kind Regards,

    Davo

  • #2
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,444
    Thanks
    11
    Thanked 309 Times in 308 Posts
    There's nothing that says you MUST use html5, is there? You could just continue to use HTML4 and leave well enough alone.

    But to fix this, I would edit the images. The jpeg files are being scaled by the browser and I don't think they're ending up the 105x249 and 105x321 that you think they are.

  • #3
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,451
    Thanks
    17
    Thanked 275 Times in 275 Posts
    Give both images a class and do a float:left; for that class.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #4
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by tracknut View Post
    There's nothing that says you MUST use html5, is there? You could just continue to use HTML4 and leave well enough alone.

    But to fix this, I would edit the images. The jpeg files are being scaled by the browser and I don't think they're ending up the 105x249 and 105x321 that you think they are.
    Hi,

    Thanks for your time in answering my post. I did resize the images using Paint.NET, and removed the 'height' and 'width' attributes from the <img> tags, however the issue remains. As I must write the site to the HTML5 specification I cannot 'cheat' by using the deprecated align attribute.

    Kind Regards,

    Davo

  • #5
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,444
    Thanks
    11
    Thanked 309 Times in 308 Posts
    Could you post a link to this web page, or the images, please.

  • #6
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Everyone,

    If I assign the float attribute to the images, like in the code below, I end up with the heading 'over the top' of the logo!

    Code:
    <div class="float-left">
    	<img alt="System Control Logo" src="~/Images/sce-bpp-logo.jpg">
    </div>
    <div class="float-right">
        <img alt="System Control Logo" src="~/Images/sce-bpp-online.jpg">
    </div>
    If I make both images 'float left', the end results (displayed) is the same, and in both instances the pages looks like this -



    Any further help will be greatly appreciated. Such a simple thing in HTML4, why so complicated in HTML5?

    Kind Regards,

    Davo

  • #7
    New to the CF scene
    Join Date
    Jul 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    When using vertical-align on table cells, sticking with top, bottom, and middle is your best bet. ... Left Align and Right Align Text on the Same Line ...

    pokies

  • #8
    New to the CF scene
    Join Date
    Jun 2014
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    should try defining a width on the div and also add some padding this should help the issue.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •