Help Aligning Text in Columns

[Lekiel]

Example Text Here.

Example Text Here.

text blah blah

Example Text Here.

Pretty much as the title says... I can't get the text to not do the 'stagger'

Also, I can you put more than three div boxes on the same line?

[Row]

[Column=span2]
Example Text Here.
[/Column]

[Column=span2]
Example Text Here.
[/Column]

[Column=span2]
[div=background:url('https://www.rpnation.com/media/bg-blue.24726/full?d=1490285904');background-size:cover;border:5px #1976d2 double;color: #000000;padding:5px;]text blah blah[/div]
[/Column]

[Column=span2]
Example Text Here.
[/Column]

[/Row]

 

[Chordling]

You can't place 'Enter' spaces in between the column coding. It will cause the text to stagger.

[Row][Column=span2]Example Text Here.[/Column][Column=span2]Example Text Here.[/Column][Column=span2][div=background:url('https://www.rpnation.com/media/bg-blue.24726/full?d=1490285904');background-size:cover;border:5px #1976d2 double;color: #000000;padding:5px;]text blah blah[/div][/Column][Column=span2]
Example Text Here.[/Column][/Row]

 

[Lekiel]

Hey thanks
Chordling

 

[Lekiel]

positioning 1

positioning 3

positioning 2

What about doing the same with div boxes? I got the above code off one of the guides. But I was thinking of putting a few in a line.

[div=padding: 10px; background-color:pink; display:inline-block; border-radius:50px; position:relative; left: 30%;]yada 1[/div]
[div=padding: 10px; background-color:pink; display:inline-block; border-radius:50px; position:relative; right: 30%;]yada 3[/div]
[div=padding: 10px; background-color:pink; display:inline-block; border-radius:50px; position:relative; center: 30%;]yada 2[/div]

 

[Chordling]

I have successfully gotten them to stack in a vertical fashion this way:

[div=padding: 10px; background-color:pink; display:inline-block; border-radius:50px; position:relative; left: 30%;]positioning[/div]

[div=padding: 10px; background-color:pink; display:inline-block; border-radius:50px; position:relative; left: 30%;]positioning[/div]

 

[Lekiel]

Oh, that's pretty neat too No luck on the horizontal inline div boxes yet I suppose. I tried putting three in a row, but as u can see (in my edited post above), the 'right' one goes... *poof*

 

[Chordling]

Simply place the div boxes within columns:

[row][column=span2][div=padding: 10px; background-color:pink; display:inline-block; border-radius:50px; position:relative; left: 30%;]positioning[/div][/column][column=span2][div=padding: 10px; background-color:pink; display:inline-block; border-radius:50px; position:relative; left: 30%;]positioning[/div][/column][column=span2][div=padding: 10px; background-color:pink; display:inline-block; border-radius:50px; position:relative; left: 30%;]positioning[/div][/column][/row]

 

[Lekiel]

Chordling Oh gosh.. yeah! I feel so dumb. Thanks.

 

[IctoraPost]

For the divs, you can also use float: left to align them.

11gdjgsyjeey

22gdjgsyjeey

33gdjgsyjeey

[div=padding: 10px; background-color:pink; border-radius:50px; float:left;]11gdjgsyjeey[/div]
[div=padding: 10px; background-color:pink; border-radius:50px; float:left;]22gdjgsyjeey[/div]
[div=padding: 10px; background-color:pink; border-radius:50px; float:left;]33gdjgsyjeey[/div]

 

[Lekiel]

IctoraPost Heyy, I saw your tutorial on getting the div box bg pic to be fixed. Any idea how I can do that without it repeating on me? I tried adding both a 'no-repeat' together with a 'fixed' but they dont seem to work together.

[div=padding: 10px; background: url(https://www.rpnation.com/media/ezgif-com-crop-1.26119/full) fixed; border-radius:0 30px; width: 282px; height: 50px;]set widths and heights[/div]

set widths and heights

as you can see, the right part of the picture above is supposed to be on the left.


Thanks so much for helping out >..<

 

[IctoraPost]

You can use background-size to fix that.

set widths and heights

[div=padding: 10px; background: url(https://www.rpnation.com/media/ezgif-com-crop-1.26119/full) fixed; background-size: 100%; border-radius:0 30px; width: 282px; height: 50px;]set widths and heights[/div]