Support » Fixing WordPress » How can I get images and Text to appear next to eachother aligned

  • Hi,

    I can’t seem to get the images and text to appear next to eachother at the top of my site, instead they end up on top of eachother while some other text moves onto the right. see http://www.trainstomanchester.co.uk

    I changed the width of the sidebar which is when the issue started but I can’t seem to find how to fix this. The code I’m using is below.

    <div class="left"><p class="fleft"><a href="http://trainstomanchester.co.uk/split-ticketing-to-manchester/"><img alt="" src="http://trainstomanchester.co.uk/wp-content/uploads/2012/09/cheapfarestomanchester.png" /></a></p><p><span>Cheap Fares to Manchester </span></p><p>You could save money splitting your journey into two, we're show you how!</p></div><div class="right"><p class="fleft"><a href="http://trainstomanchester.co.uk/london-to-manchester-train-tickets/"><img alt="" src="http://trainstomanchester.co.uk/wp-content/uploads/2012/09/londontomanchestertrains.png" /></a></p><p><span>London to Manchester Trains </span></p><p>You could get single tickets from London to Manchester from just £12.</p></div>

    Any help would be appreciated.

    Thanks

    [please read the forum guidelines for posting code]

Viewing 3 replies - 1 through 3 (of 3 total)
  • If I’m understanding what you’re trying to do correctly, you need to create 3 divs (one for the left side of the header [cheap fares], one for the right side [london to manchester], and one to hold them both). It looks like you need something like this added to your CSS file:

    #photoheader {width:620px;
    height:150px;
    }
    
    #photoheaderleft
    {width:310px;
    height:150px;
    float:left;}
    
    #photoheaderright
    {width:310px;
    height:150px;
    float:left;}

    Then the code would look like this:

    <div id="photoheader">
    
    <div id="photoheaderleft">
    <img alt="" src="http://trainstomanchester.co.uk/wp-content/uploads/2012/09/cheapfarestomanchester.png" />
    <p>Cheap Fares to Manchester</p><p>You could save money splitting your journey into two, we're show you how!</p>
    </div>
    
    <div id="photoheaderright">
    <img alt="" src="http://trainstomanchester.co.uk/wp-content/uploads/2012/09/londontomanchestertrains.png" />
    <p>London to Manchester Trains</p><p>You could get single tickets from London to Manchester from just £12.</p>
    </div>
    
    </div>

    The div that the content is in (“5 Simple Steps to find Cheap Train Tickets…” ) will come below that in your code and will need to have ‘clear:both;’ added to it’s CSS styling.

    Hope that helps!

    [please read the forum guidelines for posting code]

    Thread Starter travelinspector

    (@travelinspector)

    Thanks for the response Jenna.

    Yes I basically just need the train image and the London to Manchester text to be on the right next to the cheap fares to Manchester.

    May I ask where in the CSS file I would add your suggestion? And would I need any other code to add it in? I’m very amatuer when it comes to code.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    As this is not a WordPress issue, if you don’t receive further help, you should enquire on a CSS specific forum http://csscreator.com/forum .

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How can I get images and Text to appear next to eachother aligned’ is closed to new replies.