CODEWITHSUNDEEP
javascripthtmlcssreactjstypescript
user13067694
user13067694

Reputation:

position two components as columns

I have a screen that looks like this:

enter image description here

The text is at the top while the red section (VideoComponent) is at the bottom. I want the VideoComponent to appear on the left side while all the text should move towards the right. Like a flex box. Or like in 2 columns.

    return (
        <div>
            <main className="content">
   <div className="text">
                In this section.....TEXT
<div className="video">
                    <VideoComponent />
                </div>
 </div>
            </main>
        </div>
    );

I tried adding float right/left to the css but it does not make a difference.


.content{
    padding-left: 280px;
    padding-top: 100px;
    background-color: white;

}

.buttons{
    padding-top: 20px;
    flex-direction: column;
    display: flex;
    width: 200px;
}

.heading{
    font-size: 25px;
}

.text{
    float: left;
}


.video{
    float: right;
}

How else can I fix this? Here's a codesandbox: https://codesandbox.io/s/vibrant-turing-tulc2?file=/src/VideoComponent.tsx

Upvotes: 0

Views: 556

Answers (4)

Numan Ashiq
Numan Ashiq

Reputation: 146

The solution to the problem is very simple that you can use cross-browser too.

<main>
   <div class="text">text goes here</div>
   <div class="video">video here</div>
</main>

Now for the CSS part, you can do this

main{
  display:flex;
}

main .text{
    order:2;
}

main .video{
     order:1;
}

and you can test it on cross-browser we have another CSS property too which is already used by ''Medi'' flex-direction but it does not support Firefox, So you can use "order" which is supported in all browsers.

Upvotes: 0

Kishore Chandra
Kishore Chandra

Reputation: 606

You didn't nested your elements properly.. your JSX should be like this below

<div>
  <main className="content">
    <div className="video">
        <VideoComponent />
      </div>
    <div className="text">
      In this section.....TEXT
    </div>
  </main>
</div>

Simply update with the below css.

    .content{
        padding-left: 280px;
        padding-top: 100px;
        background-color: white;
        display:flex;
    
    }
    
    .buttons{
        padding-top: 20px;
        flex-direction: column;
        display: flex;
        width: 200px;
    }
    
    .heading{
        font-size: 25px;
    }
    
    .text{
        // float: left;
    }
    
    
    .video{
        // float: right;
    }

This problem will be reolved

Upvotes: 0

Paula Diniz
Paula Diniz

Reputation: 68

You could use Flexbox to achieve this. I know you're working with react, but this is just HTML and CSS. Maybe try something like this:

<div class="wrapper">
  <div class="text">
    My text
  </div>
  <div class="image">
    <img src="imageurl">
  </div>
</div>

.wrapper {
  display:flex
}
.text {
  margin: 10px
}

https://codepen.io/pauladiniz/pen/abpxeLK

Upvotes: 1

Melwiin
Melwiin

Reputation: 1

Set the "text" class in the css file to "display: flex;" this should automatically change the objects (the text and the video) to a row. Maybe float will cancel it out but i am not sure about that. Just try it out.

Upvotes: 0

Related Questions