0

So this is my current code:

<!DOCTYPE html>
<html>
    <head>
        <title>StoryReader</title>
        <link rel="stylesheet" type="text/css" href="indexStyle.css">
    </head>
    <body>
        <center><h1 id="errorbox" style="background-color: red; border-radius: 20px; font: message-box; font-size: 20px;"></h1></center>
        <center><h1 style="font: message-box; font-size: 25px;">Welcome to StoryReader.</h1></center>
        <center><button onclick="ReturnToHomepage()" style="background-color: chartreuse; border-radius: 5px; font: message-box;">Return to the homepage.</button></center>
        <hr>
        <p>

        </p>
            <div class="inline-block" id="Readers1">
                <center><h3 style="font: status-bar; font-size: 20px;">Lion, Witch and the Wardrobe.</h3></center>
                <hr>
                <h4 style="font: message-box; font-size: 15px;">Description:</h4>
                <p style="font: status-bar; font-size: 15px;">When the Pevensie children - Peter, Susan, Edmund and Lucy - step through a wardrobe door in the strange country house where they are staying, they find themselves in the land of Narnia. Frozen in eternal winter, Narnia is a land of snow and pine forests, and its creatures are enslaved by the terrible White Witch.</p>
                <center><input type="button" value="Open" onclick="OnClickLion()"></center>
            </div>
            <p>
    
            </p>
            <div class="inline-block" id="Readers2">
                <center><h3>Unknown...</h3></center>
                <hr>
                <h4>Description:</h4>
                <p>Coming soon!</p>
            </div>
    </body>
    <script src="script.js"></script>
</html>

and I want to make it so Readers2 is next to Readers1 so on the left would be Readers one and right next to it to the right would be Readers2. I also want a gap between each div. Is this possible?

UltraDevelopment
  • 5
  • 2

4 Answers4

1

I'll suggest not to use inline css, instead use style tag and write your css there and then use that css. In that way you can reuse your defined styles.

Using flex you can easily able to achieve what you want , to know more about flexbox

.readers {
 display: flex;
}

.inline-block {
 margin-right: 8px;
}

h3 {
 font: status-bar; 
 font-size: 20px;"
}
<!DOCTYPE html>
<html>
    <head>
        <title>StoryReader</title>
        <link rel="stylesheet" type="text/css" href="indexStyle.css">
    </head>
    <body>
        <center><h1 id="errorbox" style="background-color: red; border-radius: 20px; font: message-box; font-size: 20px;"></h1></center>
        <center><h1 style="font: message-box; font-size: 25px;">Welcome to StoryReader.</h1></center>
        <center><button onclick="ReturnToHomepage()" style="background-color: chartreuse; border-radius: 5px; font: message-box;">Return to the homepage.</button></center>
        <hr>
        <p>

        </p>
        <div class="readers">
            <div class="inline-block" id="Readers1">
                <center><h3>Lion, Witch and the Wardrobe.</h3></center>
                <hr>
                <h4 style="font: message-box; font-size: 15px;">Description:</h4>
                <p style="font: status-bar; font-size: 15px;">When the Pevensie children - Peter, Susan, Edmund and Lucy - step through a wardrobe door in the strange country house where they are staying, they find themselves in the land of Narnia. Frozen in eternal winter, Narnia is a land of snow and pine forests, and its creatures are enslaved by the terrible White Witch.</p>
                <center><input type="button" value="Open" onclick="OnClickLion()"></center>
            </div>
            <p>
    
            </p>
            <div class="inline-block" id="Readers2">
                <center><h3>Unknown...</h3></center>
                <hr>
                <h4>Description:</h4>
                <p>Coming soon!</p>
            </div>
        </div>
    </body>
    <script src="script.js"></script>
</html>
Saswata Pal
  • 414
  • 2
  • 10
0

You can align divs easily in two ways -- using flex or grid. Each has their own pros and cons.

Learn more about flexbox here: Flexbox

Learn more about grid here: Grid

.flex {
  display: flex;
  gap: 10px;
}

.flex > div {
  flex: 1;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

div > div {
  background-color: gold;
}
<div class="flex">
  <div>
    <p>Readers 1</p>
  </div>
  <div>
    <p>Readers 2</p>
  </div>
</div>

<hr />
  
<div class="grid">
  <div>
    <p>Readers 1</p>
  </div>
  <div>
    <p>Readers 2</p>
  </div>
</div>
koralarts
  • 2,062
  • 4
  • 30
  • 48
0

You can use inline-block

#Readers1, #Readers2 {
    display: inline-block;
    width: 50%;
}

The good thing with this is that it has universal browser support.

Martin
  • 22,212
  • 11
  • 70
  • 132
corn on the cob
  • 2,093
  • 3
  • 18
  • 29
0

You can use display: flex to keep the divs in the same line. Give widths and use property justify-content to set the gap.


<div style="display: flex; justify-content: space-between;">
  <div class="inline-block" id="Readers1" style="width: 49%">
    <center>
      <h3 style="font: status-bar; font-size: 20px;">Lion, Witch and the Wardrobe.</h3>
    </center>
    <hr>
    <h4 style="font: message-box; font-size: 15px;">Description:</h4>
    <p style="font: status-bar; font-size: 15px;">When the Pevensie children - Peter, Susan, Edmund and Lucy - step
      through a wardrobe door in the strange country house where they are staying, they find themselves in the land of
      Narnia. Frozen in eternal winter, Narnia is a land of snow and pine forests, and its creatures are enslaved by the
      terrible White Witch.</p>
    <center><input type="button" value="Open" onclick="OnClickLion()"></center>
  </div>
  <p>

  </p>
  <div class="inline-block" id="Readers2" style="width: 49%">
    <center>
      <h3>Unknown...</h3>
    </center>
    <hr>
    <h4>Description:</h4>
    <p>Coming soon!</p>
  </div>
</div>
Vna
  • 532
  • 6
  • 19