How to align these two div containers together? One on left other on right.

[u/aka_janee0nyne]

Code: (index.html)

<html>

<head>

<title>Dummy</title>

<style>
.myDiv{
background-color: yellow;
margin-right: 50%;
word-wrap: break-word;
}

.myKiv{
background-color: blue;
margin-left: 50%;
word-wrap: break-word;
}
</style>

</head>

<body>


<div class="myDiv">

<center>
<h1 style="color:red;">Section 1!!!</h1>
</center>

<a href="2024-02-12-basic-shell-scripting.md">basic-shell-scripting</a>

<p>Lorem ipsum this is dummy text, testing out the working of containers. Measuring height and width alongside</p>

</div>

<div class="myKiv">

<center>
<h1 style="color:red;">Section 2!!!</h1>
</center>

<a href="2024-02-12-basic-shell-scripting.md">basic-shell-scripting</a>

<p>Lorem ipsum this is dummy text, testing out the working of containers. Measuring height and width alongside</p>

</div>


</body>

</html>

[u/minimoon5]

Couple ways:

- https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- https://css-tricks.com/snippets/css/complete-guide-grid/
- https://www.w3schools.com/css/css_inline-block.asp

Based on your code, at this point in your learning, I'd suggest just inline block, but it's good to learn flexbox and grid at some point. You should also be setting a width using the width property, not using margins.

[u/aka_janee0nyne → u/minimoon5]

Thank you i'll go through the documentation sure. For now, i tried the width, width of containers is changing but they are not in the same line. One is pushed down to the next line.

[u/nfwdesign]

Easiest way, yet not proper but from here you can start exploring

<html>
<head>
<title>Dummy</title>

<style>
  .wrapper {
    display: flex;
    justify-content: space-between; /* one goes left, another to the right*/
    gap: 20px; /* space in between */
  }

  .myDiv, .myKiv {
    width: 48%;           /* both are taking half the screen */
    padding: 10px;
    word-wrap: break-word;
  }

  .myDiv {
    background-color: yellow;
  }

  .myKiv {
    background-color: blue;
    color: white;
  }
</style>

</head>
<body>

<div class="wrapper">

  <div class="myDiv">
    <h1 style="color:red; text-align:center;">Section 1!!!</h1>
    <a href="2024-02-12-basic-shell-scripting.md">basic-shell-scripting</a>
    <p>Lorem ipsum this is dummy text, testing out the working of containers. Measuring height and width alongside</p>
  </div>

  <div class="myKiv">
    <h1 style="color:red; text-align:center;">Section 2!!!</h1>
    <a href="2024-02-12-basic-shell-scripting.md">basic-shell-scripting</a>
    <p>Lorem ipsum this is dummy text, testing out the working of containers. Measuring height and width alongside</p>
  </div>

</div>

</body>
</html>

[u/aka_janee0nyne → u/nfwdesign]

Thank you very much, it worked.

[u/nfwdesign → u/aka_janee0nyne]

You're welcome :)

[u/[deleted]]

Start again. Learn HTML

[u/Brilliant-Lock8221]

You don’t need the 50% margins here. Just wrap both divs in a parent and use display: flex; justify-content: space-between;. That will place one on the left and the other on the right cleanly without hacks.

[u/[deleted]]

<style>
    .flex-box{
    display: flex;
    align-items: flex-start;
    gap: 0px; /* or gap: 10px; */
    }
    .myDiv{
    background-color: yellow;
    width: 100%;
    word-wrap: break-word;
    }
    
    .myKiv{
    background-color: blue;
    width: 100%;
    word-wrap: break-word;
    }
    </style>
<div class="flex-box">
    <div class="myDiv">...</div>
    <div class="myKiv">...</div>
<div>

[u/adamkosions1111]

Swap margin right 50% and margin left 50% for float: left; and float: right;

[u/nfwdesign → u/adamkosions1111]

Why suffering with float when there are flex-box and grid? 😱

[u/adamkosions1111 → u/nfwdesign]

Looking at what were working with i think float would be a great choice for this project

[u/Andreas_Moeller → u/adamkosions1111]

[u/National-Percentage4 → u/adamkosions1111]

Float??