The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Why Is This Not Centered?, I want what is inside a Style defined box to be displayed in three col
Thaum2u
post Nov 7 2020, 11:58 AM
Post #1





Group: Members
Posts: 1
Joined: 7-November 20
Member No.: 27,622



Below is my current code. As you can see, the text inside of the "borderBox" does get separated into columns, as I wanted it to, but the text on the right side does not go all the way to the right, and the middle is not in the middle. According to everything I've read, those two things should happen, but yet they do not.

The "div#columns { display: flex; justify-content:space-between; }" part is what is supposed to do this. Did I not implement it correctly?


<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>

<STYLE>
#borderBox {
border: 4px double rgba(9,94,31,0.8);
border-radius: 8px;
width: 555px;
background-color: rgba(0,0,0,.75);
padding: 15px 15px 15px 15px;
text-align: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-style: normal;
font-size: 18px;
color: #31f55b;
color: rgba(49, 245, 91, 1);
}
div#columns { display: flex; justify-content:space-between; }
</STYLE>

<body BACKGROUND="" TEXT="yellow" BGCOLOR="#000000" LINK="white" ALINK="red" VLINK="yellow" style="background-attachment: fixed;">

<center><br>
<div id="borderBox" class="w3-display-middle">
<div id="columns" class="w3-display-middle">
<div class="w3-display-left">Left Side</div>
<div class="w3-display-middle">Middle</div>
<div class="w3-display-right">Right Side</div><br>
</div>
</div>
</center>

</body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 30th July 2021 - 04:42 PM