Jump to content

Split Layout with Text on Both Sides

Recommended Posts

Site URL: https://pineapple-giraffe-zll2.squarespace.com/apply



password: helpwithcss

I've searched but can't really figure out the answer.

I've done lots of split layouts with image on one side and text on the other.

In this case, the gold on the left is a background image, but I also want text on both sides of the layout.

I've tried a few things, and the closest I got was using the ID#s of each element and margin-left or right. BUT when I do that, the text doesn't end up side by side. The maroon text goes on the left but is raised, and the black text/email sign up goes on the right but is low. So they're kitty-corner to each other instead of directly side by side.

The end result should look like this: image.png.80e2d33b9d82774d8e4a1ddbd6f064f6.png


Please help! This is making me batty.  (also bonus points if you can tell me how to make the email sign up look like the above, with the the submit button replaces with an arrow. I'm less concerned about that)


Link to comment
  • Replies 1
  • Views 322
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Start with a blank section, add two spacer blocks side-by-side (50/50), and drag your text block under each spacer. But make sure you see the blue line under only the half you want. 

this will help you get the setup, you’ll want to identify which half to apply CSS too after you have your layout built.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.