Question 45481 in Html Question posted in
Some basic documentation can be found here.

How to align side by side in HTML

<div class="w3-row w3-padding-64 ws-black">
  <div style="max-width:1400px;margin:auto">
    <div class="w3-col l6 w3-center" style="padding:2% 3%;">
      <div class="w3-card-2 w3-round" style="color:black;background-color:#FFC0C7;padding:24px">
        <h2 style="font-size:45px;float:left;font-weight:700">COM</h2>
        <div style="height:50px;">
        </div>
        <a href="com.html" class="w3-button tut-button black-color w3-margin-bottom">Learn COM</a>
      </div>

    </div>
    <div class="w3-col l6 w3-center" style="padding:2% 3%;">
      <div class="w3-card-2 w3-round" style="background-color: #FFF4A3;color:black;padding:24px">
        <h2 style="font-size:45px;float: left;font-weight:700">PduR</h2>
        <div style="height:50px;">
        </div>
        <a href="Pdur.html" class="w3-button tut-button black-color w3-margin-bottom">Learn PduR</a>
      </div>
    </div>

Here

  1. I need to make com and pdur to be in side by side, but it’s coming down
  2. And next thing is I need to remove the learn com link and instead of that if a person clicks on com it should move to next page
  3. I have attached the screenshot

enter image description here

Tags:

2

Answers


  1. 0

    You can use flex property of css to align content side by side

    .main{
display: flex}
    <div class="main">
<div>1</div>
<div>2</div>
</div>
    Login or Signup to reply.
  2. 0

    You can align the two items next to one another using a flexbox.

    The CSS is as follows:

    .flex-container {
  display: flex;
}

.flex-item {
  flex: 1;
}
    <div class="flex-container">
  <div class="flex-item">Div 1</div>
  <div class="flex-item">Div 2</div>
</div>

    You’ll add the flex-item class to your two divs:

    <div class="w3-col l6 w3-center" style="padding:2% 3%;">

    You can also use float if you don’t wish to use a flexbox:

    .float-item {
  float: left;
}
    <div class="float-container">
  <div class="float-item">Div 1</div>
  <div class="float-item">Div 2</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search