CODEWITHSUNDEEP
cssbigcartel
ambie_c
ambie_c

Reputation: 1

How do I align an image to the left and text to the right without it wrapping? On Big Cartel custom page

I'm using Big Cartel free, on a custom page, so I can only edit CSS. Anything I add to the custom page stays in one span:

<section id="page_body">
 <p>
  <span>...</span> [image and text are both in this span]
 </p>
</section>

It automatically wraps like this, but is it possible to make the image stay on the left and have the text start at the top of the right column like this?

Upvotes: 0

Views: 203

Answers (1)

IT goldman
IT goldman

Reputation: 19485

Yes you can float the image, seems to have the effect you want. You can add padding below the image so that text won't wrap into below it.

<section id="page_body">
  <p>
    <span>
    
      <img src="https://i.sstatic.net/N8cIc.png" style="width:120px; float:left; padding-bottom:120px; margin-right: 10px;">
      
        lorem ipsum dolo rkas wiej skdksjd ksdj skd j lorem ipsum dolo rkas wiej skdksjd ksdj skd j lorem ipsum dolo rkas wiej skdksjd ksdj skd j lorem ipsum dolo rkas wiej skdksjd ksdj skd j lorem ipsum dolo rkas wiej skdksjd ksdj skd j lorem ipsum dolo rkas wiej skdksjd ksdj skd j lorem ipsum dolo rkas wiej skdksjd ksdj skd j lorem ipsum dolo rkas wiej skdksjd ksdj skd j lorem ipsum dolo rkas wiej skdksjd ksdj skd j lorem ipsum dolo rkas wiej skdksjd ksdj skd j lorem ipsum dolo rkas wiej skdksjd ksdj skd j lorem ipsum dolo rkas wiej skdksjd ksdj skd j
      <div style="clear:both"></div>
    
    </span>
  </p>
  after
</section>

Upvotes: 0

Related Questions