Two Divs Side by Side - Fluid Display

Two divs side by side - Fluid display

Using this CSS for my current site. It works perfect!

#sides{
margin:0;
}
#left{
float:left;
width:75%;
overflow:hidden;
}
#right{
float:left;
width:25%;
overflow:hidden;
}

Positioning two divs side by side using CSS

You can wrap the 2 div's in another div with a class of wrapperDiv:

<div class="wrapperDiv">
  <div class="progress-container"></div>
  <div class="input-wrapper">
    <div class="input">I have my first input here</input>
  </div>
</div>

Then you can define the wrapperDiv class as follows which will make them side by side:

.wrapperDiv {
  display: flex;
  flex-direction: row;
  align-items: center;
}

These css properties represent flexbox layout, in case you want to read more about it.

How to get these two divs side-by-side?

#parent_div_1, #parent_div_2, #parent_div_3 {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin-right: 10px;
  float: left;
}
.child_div_1 {
  float: left;
  margin-right: 5px;
}

Check working example at http://jsfiddle.net/c6242/1/

How to place div side by side

There are many ways to do what you're asking for:

Using CSS float property:

 <div style="width: 100%; overflow: hidden;">
     <div style="width: 600px; float: left;"> Left </div>
     <div style="margin-left: 620px;"> Right </div>
</div>

How can I make two divs appear next to eachother and not under eachother?

Use display:flex; on the parent element and they will be aligned in one row. You will need no more CSS.

CSS:

.subarticle{
  display:flex;
}

Codepen Link: https://codepen.io/emmeiWhite/pen/YzGjOgP

FULL CODE SNIPPET:

.subarticle{
  display:flex;
}

<article>
    <div class="subarticle">
        <div class="wrapper">
        <img src="img/logo2.jpg" alt="logo s textom good idea" class="goodidea">
        <div class="informacie">
            <h2 class="SOČ">SOČ</h2>
            
            <p class="datum"><i class="far fa-calendar-times"></i>6.1.2021</p>
            
            <h3>
                Stredoškolská odborná činnosť <br> <br>
                Prekonaj sám seba a ukáž, že máš talent...
            </h3>
            <p class="read">ČÍTAŤ VIAC</p>

         </div>

    </div>
        
        <div class="wrapper">
        <img src="img/logo2.jpg" alt="logo s textom good idea" class="goodidea">
        <div class="informacie">
            <h2 class="SOČ">SOČ</h2>
            
            <p class="datum"><i class="far fa-calendar-times"></i>6.1.2021</p>
            
            <h3>
                Stredoškolská odborná činnosť <br> <br>
                Prekonaj sám seba a ukáž, že máš talent...
            </h3>
            <p class="read">ČÍTAŤ VIAC</p>

        </div>
        </div>    
     </div> 
</article>

Two divs side-by-side, 1st is fluid on the right, 2nd is fixed-width on the left

There are various ways to do this. It's best to have both divs inside a container, even if set to width: 100%.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
.container {position: relative;}
#fixed
{
  width: 300px;
  height: 100px;
  background: #111;
  position: absolute;
  top: 0; left: 0;
}

#fluid
{
  height: 100px;
  background: #555;
  margin-left: 300px;
}

</style>
</head>
<body>
<div class="container">
    <div id="fluid"></div>
    <div id="fixed"></div>
</div>

</body>
</html>

A modern option is to use flexbox, but it's not reliably supported yet.

Two divs side by side inside wrapper

Yes you can use calc(550px - 20px) as width of right div.

.wrapper {  max-width: 800px;  height: 400px;  background-color: green;  margin: 0 auto;}.left {  width: 250px;  height: 300px;  background-color: blue;  float: left;  margin-right: 20px;}.right {  width: -moz-calc(550px - 20px);  width: -webkit-calc(550px - 20px);  width: -o-calc(550px - 20px);  width: calc(550px - 20px);  height: 300px;  background-color: red;  float: left;}

<div class="wrapper">  <div class="left"></div>  <div class="right"></div></div>

Two Divs Side by Side - Fluid Display