Help Putting an image and a text div next to each other?(Basically solved)

[Carroline]

Hey!

I've just started with BBCode today, but I've done some HTML and CSS before - so I get some of the concepts, just no how to execute them in BBCode/+.

I have a few questions I haven't been able to find an answer to by looking through the guides.

1. How do I put my code here, without it executing?

2. How do I put a text with a margin next to an image? (I'll happily provide the code I have so far once I've learnt how to - in the meanwhile I'll put it below in "executed format").

3. Is there a smarter way to do line breaks than having multiple [*br]?

[class=standardText] margin: 5px; display: inline; [/class] [div class="standardText"]text text text text text text text text text text text text text text text text text text text text text text text text text

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text [/div]

 

[christy]

you can put your code by using the [plain][/plain] tags and putting your coding inside that!

for text next to an image, you could use float for each div box, or a flex box if you mean like this:

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

the code for that is here:

Spoiler

[div=display: flex; flex-direction: row; width: 500px;][div=flex: 1; margin: 10px;][IMG]https://www.rpnation.com/proxy.php?image=https%3A%2F%2Fimages.pexels.com%2Fphotos%2F256490%2Fpexels-photo-256490.jpeg%3Fauto%3Dcompress%26cs%3Dtinysrgb%26dpr%3D2%26h%3D650%26w%3D940&hash=4f39322d543d6c73a2fbf9c1d9d46e36[/IMG][/div][div=flex: 1; margin: 20px; text-align: justify;]text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
[/div][/div]

if you have more questions about flex boxes i'd be happy to answer!


not sure about your last question tho! i don't use the br tag anyway, i just use normal line breaks while typing and pressing enter each time so i'm not totally sure about that.

 

[Carroline]

you can put your code by using the [plain][/plain] tags and putting your coding inside that!

for text next to an image, you could use float for each div box, or a flex box if you mean like this:

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

the code for that is here:

Spoiler

[div=display: flex; flex-direction: row; width: 500px;][div=flex: 1; margin: 10px;][IMG]https://www.rpnation.com/proxy.php?image=https%3A%2F%2Fimages.pexels.com%2Fphotos%2F256490%2Fpexels-photo-256490.jpeg%3Fauto%3Dcompress%26cs%3Dtinysrgb%26dpr%3D2%26h%3D650%26w%3D940&hash=4f39322d543d6c73a2fbf9c1d9d46e36[/IMG][/div][div=flex: 1; margin: 20px; text-align: justify;]text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
[/div][/div]

if you have more questions about flex boxes i'd be happy to answer!


not sure about your last question tho! i don't use the br tag anyway, i just use normal line breaks while typing and pressing enter each time so i'm not totally sure about that.

Thank you I'll try it out and see if I can get it to work

 

[Alteras]

You can also use the [code] and [icode] tags to display code.

There isn't really a good way, as [br][/br] was implemented to help [nobr] keep codes clean. Without the nobr tag, you can just press the enter button instead

 

[Carroline]

You can also use the [code] and [icode] tags to display code.

There isn't really a good way, as [br][/br] was implemented to help [nobr] keep codes clean. Without the nobr tag, you can just press the enter button instead

Thank you!! I think I'm staring to get it

 

[Carroline]

you can put your code by using the [plain][/plain] tags and putting your coding inside that!

for text next to an image, you could use float for each div box, or a flex box if you mean like this:

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

the code for that is here:

Spoiler

[div=display: flex; flex-direction: row; width: 500px;][div=flex: 1; margin: 10px;][IMG]https://www.rpnation.com/proxy.php?image=https%3A%2F%2Fimages.pexels.com%2Fphotos%2F256490%2Fpexels-photo-256490.jpeg%3Fauto%3Dcompress%26cs%3Dtinysrgb%26dpr%3D2%26h%3D650%26w%3D940&hash=4f39322d543d6c73a2fbf9c1d9d46e36[/IMG][/div][div=flex: 1; margin: 20px; text-align: justify;]text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
[/div][/div]

if you have more questions about flex boxes i'd be happy to answer!


not sure about your last question tho! i don't use the br tag anyway, i just use normal line breaks while typing and pressing enter each time so i'm not totally sure about that.

Okay, I'm a little lost again. It kind of works - but there's a really large margin that I don't really understand.

[class=main] display: flex; flex-direction: row; [/class] [class=photo] [/class] [class=text] margin: 10px; [/class] [div class="main"] [div class="photo"]

[/div] [div class="text"] text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text [/div] [/div]

Spoiler

[nobr]
[class=main]
display: flex;
flex-direction: row;
[/class]

[class=photo]
[/class]

[class=text]
margin: 10px;
[/class]

[div class="main"]

[div class="photo"]
[IMG align="left" width="50%" alt="administration-architecture-building-256490.jpg"]https://images.pexels.com/photos/256490/pexels-photo-256490.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940[/IMG]
[/div]

[div class="text"]
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
[/div]
[/div]
[/nobr]

 

[Carroline]

Okay, I might have solved it by using pixels instead of percentages. But, then my next question becomes - how do I do this with percentages?


[class=flexBox] display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; [/class] [class=photo] margin: 0px; [/class] [class=text] margin-left: 5px; [/class] [div class="flexBox"] [div class="photo"]

[/div] [div class="text"] text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text [/div] [/div]

Spoiler

[nobr]
[class=flexBox]
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
[/class]

[class=photo]
margin: 0px;
[/class]

[class=text]
margin-left: 5px;
[/class]

[div class="flexBox"]

[div class="photo"]
[IMG align="left" width="400px" alt="administration-architecture-building-256490.jpg"]https://images.pexels.com/photos/256490/pexels-photo-256490.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940[/IMG]
[/div]

[div class="text"]
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
[/div]
[/div]
[/nobr]