How can I align the text on the right and the picture on the left?-CodePudding

I have this code down:

<!DOCTYPE html>
<html>
<head>
    <title>UMass Boston Computer Science Club About page</title>
    <link href='https://fonts.googleapis.com/css?family=Chakra Petch' rel='stylesheet'>
    <style>
        .logo-umb {
            height: 100px;
            width: 100px;
            float: left;
        }
        .link {
            padding-left: 30px;
            padding-right: 30px;
            padding-top: 80px;
            padding-bottom: 30px;
            border: none;
        }
        .link-home, .link-about, .link-events, .link-guests, .link-contact {
            font-family: 'Chakra Petch';
            color: #005A8B;
        }
        .about-title {
            font-family: 'Chakra Petch';
            color: white;
        }
        .about-cs-club {
            background-color: #005A8B;
            float: right;
        }
        .university-hall {
            float: left;
        }
        .about-p {
            font-family: 'Chakra Petch';
            color: white;
            float: right;
        }
        .abouttext {
            float: right;
        }
        th, td {
            padding-left: 15px;
            padding-right: 15px;
            padding-top: 10px;
            padding-bottom: 10px;
        }
        .Address {
            font-family: 'Chakra Petch';
            color: #005A8B;
        }
        .links {
            top: 100px;
        }
    </style>
</head>
<body>
    <div >
        <img src="https://scontent-bos3-1.xx.fbcdn.net/v/t39.30808-6/275365687_1556735314708607_360968714522368993_n.jpg?stp=dst-jpg_s1080x2048&_nc_cat=108&ccb=1-5&_nc_sid=730e14&_nc_ohc=XIlEE10wTp8AX_QciOa&_nc_ht=scontent-bos3-1.xx&oh=00_AT-k3_5tH_E0qLKbssSfMKsHl9M7srtmIoECCQR1ZV5okQ&oe=622BBB6A" >
    </div>
    <div >
        <table>
            <tr>
                <td ><a >HOME</a></td>
                <td ><a >ABOUT</a></td>
                <td ><a >EVENTS</a></td>
                <td ><a >GUESTS</a></td>
                <td ><a >CONTACT US</a></td>
            </tr>
        </table>
    </div>
    <div class ="about-cs-club">
        <div >
            <img src="https://hga.com/wp-content/uploads/2019/08/University-of-Massachusetts-Boston-–-University-Hall-interior-lobby-1.jpg" width="600" height="400">
        </div>
        <div ><h1 >What is the UMass Boston Computer Science club?</h1>
        <p >For motivated students who are interested in computer science and technology and attend UMass Boston, this student run
             computer science club is right for you. Taking place at the University Hall Room 4140 between 3:00-4:00 pm on Mondays, the computer science 
             club at UMass Boston is conveniently located in one of the newest and sexiest buildings at UMass Boston, and since anybody can attend the 
             computer science club, when you attend the CS Club, you can learn everything, from web design to app development to learning extra programming 
             languages such as HTML, Java, JavaScript, Python, and Swift, and even, learning about operating systems and the history of computers as well. 
             So everybody, come and join this CS Club. We plan events, run competitions and competition training, share knowledge, and run excursions.</p>
            </div>
        </div>
    <p >
        University of Massachusetts Boston
        <br>
        100 Morrissey Blvd.
        <br>
        Boston, MA 02125-3393
        <br>
        617.287.5000
    </p>
</body>
</html>

But is it failing to show the text on the right and picture on the left. I need help trying to adjust it so that the picture is on the left and the text is on the right. I am curious how could I merge it so that the paragraph is on the right side of the page and that the image is on the left? I tried every possible way, but every way kept on failing.

CodePudding user response：

You can use .about-cs-club{ display: flex;} and .about p{ margin: 1rem 1rem 0;} .abouttext h1{ margin-left: 1rem; }

.logo-umb {
    height: 100px;
    width: 100px;
    float: left;
}
.link {
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 80px;
    padding-bottom: 30px;
    border: none;
}
.link-home, .link-about, .link-events, .link-guests, .link-contact {
    font-family: 'Chakra Petch';
    color: #005A8B;
}
.about-title {
    font-family: 'Chakra Petch';
    color: white;
}
.about-cs-club {
    display: flex;
    background-color: #005A8B;
    float: right;
}
.university-hall {
    float: left;
}
.about-p {
    font-family: 'Chakra Petch';
    color: white;
    float: right;
    margin: 0 1rem;
}
.abouttext {
    float: right;
}
.abouttext h1{
    margin-left: 1rem;
}
th, td {
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
}
.Address {
    font-family: 'Chakra Petch';
    color: #005A8B;
}
.links {
    top: 100px;
}

<div >
    <img src="https://scontent-bos3-1.xx.fbcdn.net/v/t39.30808-6/275365687_1556735314708607_360968714522368993_n.jpg?stp=dst-jpg_s1080x2048&_nc_cat=108&ccb=1-5&_nc_sid=730e14&_nc_ohc=XIlEE10wTp8AX_QciOa&_nc_ht=scontent-bos3-1.xx&oh=00_AT-k3_5tH_E0qLKbssSfMKsHl9M7srtmIoECCQR1ZV5okQ&oe=622BBB6A" >
  </div>
  <div >
    <table>
        <tr>
            <td ><a >HOME</a></td>
            <td ><a >ABOUT</a></td>
            <td ><a >EVENTS</a></td>
            <td ><a >GUESTS</a></td>
            <td ><a >CONTACT US</a></td>
        </tr>
    </table>
  </div>
  <div class ="about-cs-club">
    <div >
        <img src="https://hga.com/wp-content/uploads/2019/08/University-of-Massachusetts-Boston-–-University-Hall-interior-lobby-1.jpg" width="600" height="400">
    </div>
    <div ><h1 >What is the UMass Boston Computer Science club?</h1>
    <p >For motivated students who are interested in computer science and technology and attend UMass Boston, this student run
         computer science club is right for you. Taking place at the University Hall Room 4140 between 3:00-4:00 pm on Mondays, the computer science 
         club at UMass Boston is conveniently located in one of the newest and sexiest buildings at UMass Boston, and since anybody can attend the 
         computer science club, when you attend the CS Club, you can learn everything, from web design to app development to learning extra programming 
         languages such as HTML, Java, JavaScript, Python, and Swift, and even, learning about operating systems and the history of computers as well. 
         So everybody, come and join this CS Club. We plan events, run competitions and competition training, share knowledge, and run excursions.</p>
        </div>
    </div>
  <p >
    University of Massachusetts Boston
    <br>
    100 Morrissey Blvd.
    <br>
    Boston, MA 02125-3393
    <br>
    617.287.5000
  </p>

CodePudding user response：

just add display:flex to about-cs-club class

CodePudding user response：

It would be nice to use flex. But if you still want to customize your code then try adding it to the .abouttext class with width:50%