How to display text side-by-side?

[hmistler]

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/

[Lauren @ OnceCoupled]

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

[hmistler]

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!

[WisdmLabs]

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/

[hmistler]

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?

[Lauren @ OnceCoupled]

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

[hmistler]

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

[Author]

Posts