How do I align a vertical border to the right?

  • 1
  • Question
  • Updated 8 years ago
  • Answered
I'm using the 2-column left layout style. I want to add a vertical border separating these two columns. I checked how to do this in the help center and tried the code "
". The code will only align the border to the left. I don't know how to align it right. Can someone tell me how?
Photo of ncmama05

ncmama05

  • 18 Posts
  • 0 Reply Likes
  • optimistic about learning HTML tricks

Posted 8 years ago

  • 1
Photo of Laura Thomas

Laura Thomas, Social Media Coordinator

  • 4536 Posts
  • 211 Reply Likes
Hello ncmama05,

Your code didn't display, but can you please try this code:

<!--<div align="right"><div style="width:5px; height:500px; background-color: black"></div> </div>-->

Please let me know if that doesn't suit your needs.
Photo of Laura Thomas

Laura Thomas, Social Media Coordinator

  • 4536 Posts
  • 211 Reply Likes
Also please remove "<!--" from the beginning of the code and "-->" from the end. I added it so the code strand would display for you without rendering.
Photo of ncmama05

ncmama05

  • 18 Posts
  • 0 Reply Likes
Yes, that worked perfectly. Thanks!
Photo of ncmama05

ncmama05

  • 18 Posts
  • 0 Reply Likes
Ok, scratch that, not it didn't work perfectly. It worked for a test page, but when I try to add text, the text will only appear underneath the 500px line. How can I "wrap" the line along the text?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello ncmama05's

I suggest using a Column Divider. Place your vertical code in the right hand column and your Text Widget into the left hand column.

I hope this answers your question. If not, or if you had something different in mind, please let me know.
Photo of ncmama05

ncmama05

  • 18 Posts
  • 0 Reply Likes
No, this won't work, because that border code still won't allow any text (or picture with my site) to be next to it. This should help you see what I want to do:

http://www.find-durham-rental-houses....

I just want a border to separate the one column from the other. I thought that a simple html code should do it. It's just that the code Laura posted won't allow the text to be next to it.

I tried the first code in the help page: <!--<div style="width:400px;height:211px;border:2px solid red;">This is where your text goes</div>-->and it will do what I'm trying to, only I want a border and not a box. Notice how I can type text in the box, but not with the vertical border code provided?
Photo of ncmama05

ncmama05

  • 18 Posts
  • 0 Reply Likes
This is what I get when I try to use the vertical banner Laura posted:

Notice the text aligned left at the bottom.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello ncmama05

Thanks for your patience as we try to work on this together. I was unable to see any kind of vertical line or border on that website you showed me.

The vertical code that you should be using is : <!--<div align="right"><div style="width:5px; height:500px; background-color: black"></div> </div>-->

What I would do is drag over your Column divider, and drag over another one and place inside one of the columns. This will give you three columns. Put the vertical code into the middle column and you can add your text and pictures on either side.

I hope this answers your question. If not, or if you had something different in mind, please let me know.
Photo of ncmama05

ncmama05

  • 18 Posts
  • 0 Reply Likes
Sanja, my website doesn't have a border because I didn't add it yet. That's what I'm trying to do.

I don't want to use the column divider because that would make me have to revamp FIVE widgets on ALL of my pages.

Maybe somebody on my other board knows the correct snippet. The ones posted don't allow me to paste text next to it.
Photo of ncmama05

ncmama05

  • 18 Posts
  • 0 Reply Likes
Another thing about the column divider too is that even if I wanted to use it, it won't drag all the way to the edge of the column to make the desired look. There would still be pretty large gap.
Photo of Brianna

Brianna

  • 2045 Posts
  • 92 Reply Likes
hello ncmama05,
Thank you for your message. Sanja is currently offline, I am referring your request to her. She will answer as soon as she is back online!
Thanks for your patience!
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
I like Laura's suggestion. I've tweaked it so it should work now. <!--<div align="right"><div style="width:5px; height:500px; z-index:1000; background-color: black"></div> </div>-->

Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
that z-index thing makes it layer over the content. Now the only problem with this is that content will not stop there but will in fact go right under. Sorry I couldn't get you anything better.
Photo of ncmama05

ncmama05

  • 18 Posts
  • 0 Reply Likes
I got the right code from another board. Here it is so anyone else struggling can get it:

You put this code on the first line of the html. Make sure you don't paste the -->.:

<!--<div style="height:500px; border-right:1px solid #000;">-->

Then you put this line on the bottom line of html.

<!--</div>-->

Here's what it looks like:
Photo of ncmama05

ncmama05

  • 18 Posts
  • 0 Reply Likes
Also to mention, I decided to scrap the whole idea of the long border. I put a border around my opt-in box. I think that is much more aesthetically pleasing to the eye.

This was definitely a good learning experience!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Glad that you were able to find something that worked!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Why don't you guys just use the css border-right or border-left property?

WAIT: I have an Idea, why don't you align that div on the page? If you do this you can put nay content in there, you can put text widgets and everything and you wont have to edit that html widget just to add content. Ok, here is the code to align in specify on the page with percentage (%). Just add this code in an HTML widget at the top of the page:

<!--

<div class="border-divider"></div>

<style type="text/css">
.border-divider {
position:absolute;
top:20%;
right:10%;
}

</style>

-->

Remember, don't copy <!-- or --> Just the code in between it.

Now, the border will be dividing the columns and you can add any content on the page and you wont have to add it in to an HTML widget, all you'll have to do is drag and drop the widgets to the page (like regular) and the border will always be there because it is positioned specifically on the page! But don't forget, you will probably have to change the "10%" and the "20%" to whatever you need. The 10% is the percentage of the page it is from the right and the 20% is the percentage of the screen it is from the top. Using percentage is better than pixels because pixels changes on different screen resolutions because pixes are different on other screens. By the way, a pixel is one of the dots that makes up the screen. Very tiny. And there is less pixels on some screens and it makes the positioning change from screen to screen.

But, if you already added your content in or if you already have this feature, then you can just ignore this reply.
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
wow Nathan, your so smart! I can't believe i overlooked the obvious.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Thanks for the compliment, kevin! :)