Line Two Divs Side by Side with CSS and React

Line two divs side by side with CSS and React

Solution to bring new Newsbox component next to Coursebox

import Coursebox from './Coursebox';
import Newsbox  from './Newsbox'
 class ContainerRow extends React.Component {
 render(){
    return (
        <div className='rowC'>
            <Coursebox />
            <Newsbox />
        </div>
    );
    }
 }

CSS

.rowC{display:flex; flex-direction:row;}

Place 2 elements per div side-by-side in React

In order to render more advanced loops in react, you need to get used to chunking your arrays. you can simply chunk the array twice using the following function, then you can map this array recursively to render your desired output:

function chunk_array(arr,chunkSize=2) {
  const result=[];
  for(let i=0;i<arr.length;i+=chunkSize) {
    result.push(arr.slice(i,i+chunkSize));
  }
  return result;
}

**NOTE: I made a JS fiddle so you can visualize how this array changes to become the shape we need to render your desired html output ** JS FIDDLE

now you can utilize this in render to accomplish what you want.

import React from 'react';

function chunk_array(arr,chunkSize=2) {
    const result=[];
    for(let i=0;i<arr.length;i+=chunkSize) {
        result.push(arr.slice(i,i+chunkSize));
    }
    return result;
}

const arr = [1,2,3,4,5,6,7,8,9,10];

const chunked = chunk_array(chunk_array(arr));// we chunk array twice to get desired structure.

class Example extends Component {

    render() {
        return (
            <div className="container">
                {chunked.map((container,i)=>(
                    <div className="base" key={i}>
                    {container.map((row,i2)=>(
                    <div key={i2} className={(i2===0?"left":"right")}>
                        {row.map((item,i3)=><span key={i3}>{item}</span>)}
                    </div>))}
                </div>))}
            </div>
        )
    }

}

How to put two react components side by side?

You can wrap your both elements in a container like div and specify flex direction "row" in style of this container. It will put all of your child elements in a row.

Having a Gradient go Across Two Side by Side Divs React

What happens with this is that only the left div is colored. Which makes me think I'm not doing this whole parent/child div thing correctly

The bug has to be elsewhere - my guess <Logo /> which breaks absolutely valid css.

As you are a beginner, a word of advice - don't use float and don't even touch flex, firstly - you don't need them, secondly they have more side effects than they're worth.

Snippet - without float, without redundancy, without troubles. Use borders in production - to see what you've done :)

body{
color: #fff;
text-align: center;
}
.blue, .green{
margin: 2vh 0;
padding: 0;
}
.blue{
background: linear-gradient(to right, rgb(2,0,36), rgba(0,0,139));
border: 1px solid red;
}
.green{
background: linear-gradient(to left, #cf8, #193);
border: 1px solid black;
}
.blue div, .green div{
height: 100%;
width: 49%;     /* kind of insurance - some space for weird devices and browsers */
margin: 0 auto;
display: inline-block;
vertical-align: middle;
box-sizing: border-box;
border: 1px dotted #fff;
}

<div class="blue">
<div><img src="blue.jpg" alt="one"></div>
<div>two</div>
</div>

<div class="green">
<div>three</div>
<div>four</div>
</div>

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/

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.

---

Related Topics