My FeedDiscussionsHeadless CMS
New
Sign in
Log inSign up
Learn more about Hashnode Headless CMSHashnode Headless CMS
Collaborate seamlessly with Hashnode Headless CMS for Enterprise.
Upgrade ✨Learn more

Standard CSS question.

Michael Amay's photo
Michael Amay
·Nov 25, 2018

Can anyone please tell me how I can simply separate the two text boxes in the following picture. I have tried modifying the properties and adding bottom-margin x px; but haven't had any luck.

Screen Shot 2018-11-25 at 1.02.05 AM.png

Code below:

<!DOCTYPE html>
<html>

<head>
    <title>Tutorial</title>
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta name="keywords" content="">

<style>

    div.relative {
        float:left;<!-- img setup with border -->
        margin-left:auto;
        margin-right: auto;
        height: 359px;
        width:575px;
        border: 3px solid #73AD21;
        margin-left: 10px;<!-- left margin of the img --> 
    }
    div.columns {
        width: 500px; <!-- default column setup -->
    }
    div.columns div {
        width: 300px; 
        height: 366px; 
        float:left;

    }
    div.col {
        background-color:#0a1a33;
    }
    #p01{
        margin-top: 2.5px;
        margin-bottom: 0px;
    }

</style>

<style>
    #p01{
        margin-top: 2.5px;
        margin-bottom: 12px;
    }
</style>

</head>
<body>


<h2>Computer Science Workshops</h2>

    <div class="columns">

    <div class="col" > 

        <p style="font-family:Courier New;" id="p01"><font size="4" color="white">HTML/CSS/Javascript:</font></p>

        <p id="p01"><font size="2" color="white">This introductory workshop module is design for students with little or no prior experience. It introduces students to the basics concepts of HTML (Hyptertext Markup Language), CSS (Cascading Style Sheets), and Javascript.</font></p>

    </div>

    </div>

<div class="relative">
<img src="img_lite.jpg" alt="Paris" style="width:100%"> 
</div>


    <div class="columns">

    <div class="col" > 

        <p style="font-family:Courier New;" id="p01"><font size="4" color="white">HTML/CSS/Javascript:</font></p>

        <p id="p01"><font size="2" color="white">This introductory workshop module is design for students with little or no prior experience. It introduces students to the basics concepts of HTML (Hyptertext Markup Language), CSS (Cascading Style Sheets), and Javascript.</font></p>

    </div>

    </div>

<div class="relative">
<img src="img_lite.jpg" alt="Paris" style="width:100%"> 
</div>

</body>
</html>

Thank you!

4