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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jan 2019
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Novice trying to create a 3-column layout in wordpress

    Hi all, I'm a total novice and just trying to put together a website for my boss whose developer has dipped out. I'm trying to put together a three-column banner in Wordpress using HTML templates I've found online, but every time I plug in what I want in the columns, the formatting gets really weird and the contents end up spread on a vertical-ish line on the page.

    Here's what I've got (I've taken out private info, but everything else is the same) - please help me get this right!

    Code:
    <div style="float:left;width:30%;"> 
    <div align="center">
    
    <span style="font-weight: 400; font-size: 16pt;">Join our community!</span>
    
    <span style="font-weight: 400; font-size: 12pt;">Sign up to receive updates about trainings, programs, and other exciting news!</span>
    
    <a href="(link)"><img src="(image)" alt="" width="400" height="400" class="alignnone size-full wp-image-1048" />" /></a>
    </div> 
    
    <div style="float:center;width:30%;"> 
    <a href="mailto:(email address)"><img src="(image)"/></a></div>
    
    <div style="float:right;width:30%;"> 
    <div align="center">
    
    <span style="font-weight: 400; font-size: 12pt;">(address info)</span>
    
    <span style="font-weight: 400; font-size: 12pt;">(email info)</span>
    
    <span style="font-weight: 400; font-size: 12pt;">(phone info)</span>
    
    </div>
    </div>
    
    <div style="clear:both;"></div>
    Last edited by vinyl-junkie; Jan 5th, 2019 at 12:54 AM. Reason: added code tags

  2. #2
    Banned
    Join Date
    Jan 2019
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi, I have done some changes in your code whether you're looking for this I think so if there any change please let us know.
    <!DOCTYPE html>
    <html>
    <head>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    </head>
    <body>
    <div style="float:left;width:30%;">
    <div align="center">

    <span style="font-weight: 400; font-size: 16pt;">Join our community!</span>

    <span style="font-weight: 400; font-size: 12pt;">Sign up to receive updates about trainings, programs, and other exciting news!</span>

    <a href="(link)"><img src="(image)" alt="" width="400" height="400" class="alignnone size-full wp-image-1048" />" /></a>
    </div>

    <div style="text-align: center; width:30%;">
    <a href="mailtoemail address)"><img src="(image)"/></a>
    </div>

    <div style="text-align: center;">
    <div>

    <span style="font-weight: 400; font-size: 12pt;">(address info)</span>

    <span style="font-weight: 400; font-size: 12pt;">(email info)</span>

    <span style="font-weight: 400; font-size: 12pt;">(phone info)</span>

    </div>
    </div>

    <div style="clear:both;"></div>

    </body>
    </html>
    Last edited by vinyl-junkie; Jan 5th, 2019 at 06:05 AM. Reason: self-promotional link removed

  3. #3
    New to the CF scene
    Join Date
    Jan 2019
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for your response! The changes in code don't seem to do anything to fix it though.


 

Tags for this Thread

Posting Permissions

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