• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

How to display text side-by-side?

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › How to display text side-by-side?

This topic is: resolved

Tagged: Columns, float, text display

  • This topic has 6 replies, 3 voices, and was last updated 8 years ago by hmistler.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • March 15, 2015 at 7:28 pm #144562
    hmistler
    Member

    Hello - I'm trying to get some text to display side by side on my site. Specifically, I would like the "client, services, etc" information to float left, while the "project text" should float right. I have tried to do this using the div class="one-half" attributes, but no matter how I do it, it directly affects the image underneath it (the image gets pushed over to the right instead of remaining underneath the content). I then tried to use float left, float right css and that made it worse. It seems that the image underneath it as always affected, no matter what I do. I'm at a loss!

    http://www.haleymistler.com/design/elizabeth-harrington/
    March 15, 2015 at 8:49 pm #144568
    Lauren @ OnceCoupled
    Member

    Try putting a <div class="clear"></div> under your halves, before your image. If that doesn't work, I'll take a closer look!

    Best,
    Lauren


    We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

    March 16, 2015 at 7:11 am #144609
    hmistler
    Member

    Thanks for the reply; I tried that and it isn't working either. It's really throwing me for a loop, I've never had this problem before! It seems that the image underneath reacts to whatever is going on up top, and I can't figure out why. You can really see it now: http://www.haleymistler.com/design/elizabeth-harrington/ Thanks for your help!

    March 16, 2015 at 7:57 am #144615
    WisdmLabs
    Member

    Hi,

    The div for clearing floats should be under the last one-half div
    and the class to clear the float should be 'clearfix'
    Your structure would be as follows

    <div class="one-half first"></div>
    <div class="one-half"></div>
    <div class="clearfix"></div>

    Your img tag is having a class 'aligncenter' which center aligns it, if you need the image to be placed left/right use alignleft and alignright classes respectively.


    http://wisdmlabs.com/

    March 16, 2015 at 9:22 am #144624
    hmistler
    Member

    Ah, I see. That worked. So "clearfix" clears any float that the column classes use? Just curious, why would the clearfix div be necessary after the columns if my content is not within the column divs?

    March 16, 2015 at 10:00 am #144627
    Lauren @ OnceCoupled
    Member

    Because your columns aren't perfectly even in height, so the next block of content is trying to fill that extra space the smaller column leaves.


    We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

    March 16, 2015 at 10:38 am #144631
    hmistler
    Member

    Makes sense now. Thanks for taking the time to explain!

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘How to display text side-by-side?’ is closed to new replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble