What's new
  • When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!

    Remember to credit artists when using work not your own.

Help issue with box alignment

kaninchen

𝓫𝓲𝓻𝓭𝓲𝓮
I've been coding something and these two boxes have me absolutely stuck. I isolated them from their parent because I considered that maybe the flex was messing it up, but the problem persists. On CSS forums and whatnot, I can't find a very useful solution. Firstly, I cannot make them sit side by side WITHOUT using inline-block, which I think is normal, but I'm not sure. And second, what in the world is going on with their alignment? Changing height doesn't really fix it because it's still skewed.

Here's what I do know:
-line-height affects box placement even if contained. why? idk. but, even when the property is removed, they are not aligned.
-when the first box has NO text, the boxes are aligned.
-changing font size does not help, instead makes it worse?

“Basically what we have here is a dreamer. Somebody out of touch with reality.”


Just looking for some guidance on this, because I run into this issue a lot and I want to know what to avoid!
code below:
[border=1px solid tan; padding:5px; background:URL('https://www.clubdesfemmes.com/wp-content/uploads/2020/09/5281b72339e1dc5927b74384986f9d42.jpg'); background-size:cover; height:150px; max-width:230px; display:inline-block;][border=0; height:150px; max-width:230px; line-height:19px; letter-spacing:2px; text-transform:uppercase; color:wheat; font-size:18px][font='Abril Fatface']“Basically what we have here is a dreamer. Somebody out of touch with reality.”[/font][/border][/border][border=1px solid tan; padding:5px; height:150px;text-align:justify; width:300px; display:inline-block;][/border]
 

xayah.

i return stronger than i left
Hi! I'm really poor at bbcode but a simple fix was just to add float:left to the first box. your boxes ended up lining up perfectly. from my poor understanding, float causes text & boxes to wrap around a picture (or other box). since you have a picture box (with or without words), you'll need to add float:left/right to place it on either side and not have the other elements disturb its positioning. i put the code below with the float for you in a spoiler. also here's an example that's clearer and has a diagram of what i'm talking about: click here!

Code:
[border=1px solid tan; padding:5px; background:URL('https://www.clubdesfemmes.com/wp-content/uploads/2020/09/5281b72339e1dc5927b74384986f9d42.jpg'); background-size:cover; height:150px; max-width:230px; display:inline-block; float: left;][border=0; height:130px; max-width:230px; line-height:19px; letter-spacing:2px; text-transform:uppercase; color:wheat; font-size:18px;][font='Abril Fatface']“Basically what we have here is a dreamer. Somebody out of touch with reality.”[/font][/border][/border][border=1px solid tan; padding:5px; height:150px;text-align:justify; width:300px; display:inline-block;][/border]
“Basically what we have here is a dreamer. Somebody out of touch with reality.”
 

Alteras

The Sleepy One
Moderator
Supporter
“Basically what we have here is a dreamer. Somebody out of touch with reality.”


I wrapped them in a flexbox parent. The only thing I can think of is that because it's set to display: inline-block the second div is trying to align with the ending text of the first div.

Code:
[border=unset; padding: unset; display: flex; flex-flow: row wrap;][border=1px solid tan; padding:5px; background:URL('https://www.clubdesfemmes.com/wp-content/uploads/2020/09/5281b72339e1dc5927b74384986f9d42.jpg'); background-size:cover; height:150px; max-width:230px; display:inline-block;][border=0; height:150px; max-width:230px; line-height:19px; letter-spacing:2px; text-transform:uppercase; color:wheat; font-size:18px][font='Abril Fatface']“Basically what we have here is a dreamer. Somebody out of touch with reality.”[/font][/border][/border][border=1px solid tan; padding:5px; height:150px;text-align:justify; width:300px; display:inline-block;][/border][/border]
 

Users who are viewing this thread

Top