I have something like this:
HTML:
<div id="container">
<img src="leftphoto.jpg" id="left">
<div id="right">Description</div>
</div>
CSS:
body {
margin: 0;
padding: 0;
background-color:#252525;
}
#container{
position: relative;
display: flex;
justify-content: center;
margin: 0 auto;
margin-top: 100px;
margin-bottom: 100px;
height: 40vw;
}
#left{
max-width: 75vw;
height:100%;
}
#right{
min-width: 300px;
height:100%;
color:white;
width:20vw;
background-color: red;
color: #ffffff;
font-size: 11px;
overflow: auto;
}
I want the right div to go down, under left div with the same width. How can I achieve that?
What I have:
When I resize window, it is smaller:
But I want the right div to go down, under the left div and also I would like to get the same width on both divs:
I was trying a lot of different things, but I couldn't achieve this. Do you have any advice?
You can use flex blox to achieve this. Simply place on the container of the divs. Once that is done you can change the divs placement by flex-direction row/column. Similarly, for placing the 2nd div above the first div once the size reduce, you can set media query for a specific screen where you can reverse the column and you done.
.container{
display: flex;
flex-direction: row;
}
#media screen and (max-width:768px){
.container{
display: flex;
flex-direction: column-reverse
}
}
<div class="container">
<div>
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg">
</div>
<div class="content">
<p>Content</p>
</div>
</div>
Create a second container in your html and they will naturally align under eachother
<div class="container">
<div class="content-Container">
<img src="leftphoto.jpg" id="left" />
<div id="right">Description</div>
</div>
</div>
and then position them to the middle of the page by adding style to the parent container
Related
I have a screen that looks like this:
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
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
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.
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
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.
I've got two images that need to be aligned on either side of the title, preferable on the edges of the page. I tried to use position relative but it's not responsive to other screen sizes.
Can someone show me an efficient way to do this, please?
Currently its like this, but i want the two images to be on either side of the title.
title{
width: 100%;
}
.web{
font-size: 120px;
}
.js{
height: 230px;
width: 240px;
}
.css{
height: 230px;
width: 440px;
}
<div class="intro py-3 bg-white text-center">
<img class="js" src="images/js-flat.png" alt="js">
<div class="title">
<h2 class="web text-primary display-3 my-4">Wev Dev Quiz</h2>
<img class="css" src="images/css2.png" alt="css">
</div>
</div>
never-mind, i fixed it with:
.intro {
display: flex;
justify-content: center;
flex-direction: row;
align-items: center
}
You can use display:flex property in your parent div. I did some changes of your html and css codes below.
Here is the html part. I deleted the div that has a title class because all elements that are needed to be align should be seperated each other if you use display:flex
Here is the HTML and CSS codes:
.intro {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center
}
.web{
font-size: 120px;
}
.js{
width: 240px;
}
.css{
width: 240px;
}
<div class="intro bg-white ">
<img class="js" src="images/js-flat.png" alt="js">
<h2 class="web text-primary">Wev Dev Quiz</h2>
<img class="css" src="images/css2.png" alt="css">
</div>
When you use display:flex all items are aligned as horizontally. But we want to align them vertically. So we need to use flex-direction:column (its default is row). To align these items center, we also need align-items because this is used to align in cross axis which is perpendicular to the main axis.
Codepen: you can check it here
I have this div with three inner divs.
ONE - I am div TWO - I am div THREE - I am div
But in mobile it can only fit two divs in a row horizontally, I need divs after 2nd to step down.
Like this:
ONE - I am div TWO - I am div
THREE - I am div
How do I do this?
I am using flex.
Edit
I have added HTML code.
I am using React and other UI component and I tried to minimize it in HTML. It's something like this right now.
<div class="parent">
<div class="child">
<span>ONE</span>
<p>I am div</p>
</div>
<div class="child">
<p>TWO</p>
<p>I am div</p>
</div>
<div class="child">
<span>THREE</span>
<p>I am div</p>
</div>
<div>
.parent {
display: flex;
justify-content: space-around;
margin-bottom: 3rem;
white-space: nowrap;
}
.child {
display: flex;
align-items: center;
margin-left: 1rem;
margin-right: 1rem;
}
You can use flex-wrap to continue on the next line. justify-content will center the div
.outer {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
/* Styles below are for demonstration purposes */
.inner {
height: 50px;
width: 300px;
}
.red {
background: red;
}
.green {
background: green;
}
.blue {
background: blue;
}
<div class="outer">
<div class="inner red">A</div>
<div class="inner green">B</div>
<div class="inner blue">C</div>
</div>
This will work for responsive layout, and it also permits them to fit in one line, if the screen size allows it. You can use media query to set it for mobile only.
.outer{
display: flex;
flex-flow: wrap;
text-align: center;
}
.inner{
flex-grow: 1;
}
I have a <div> like below
<div style="right:0px;bottom:0px;position:absolute;">
</div>
When my mobile site is opened in portrait mode, this div is displayed correctly at the bottom right corner.
But, when opened in landscape mode it is displayed at corner and overlaps the elements already present.
I want this div to be at the bottom of all elements at the bottom right corner of the page. How do I do it?
I would suggest to use flexbox - but it could need to reorganise a little your css code
.page {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
height:100vh;
}
.element {
height: 10px;
width: 80%;
border: 1px solid #000;
padding: 20px 0;
}
.element.bottom {
margin-top: auto;
background: red;
}
<div class="page">
<div class="element">
</div>
<div class="element">
</div>
<div class="element">
</div>
<div class="element bottom">
</div>
</div>
I am looking for some responsive equal height div by just using CSS. I don't want to specify the height. Looking somewhat similar to the image below but both the divs should adjust based on the other div height.
If the left side div is long then the right side div should adjust to the left side div and vice versa.
Also the right side div has 2 small divs which should also be of same height.
Can this be achieved using only CSS? Or should I make use of JS/jQuery?
Example here on the jsFiddle
img {
width: 100%;
border: 1px solid green;
}
.row {
display: table;
}
.column {
display: table-cell;
vertical-align: top;
}
.w100 {
width: 100%;
}
.w75 {
width: 75%;
}
.w50 {
width: 50%;
}
.w25 {
width: 25%;
}
<body>
<div class="row w100">
<div class="column w75">
<img src="http://placehold.it/500x500" alt="">
</div>
<div class="column w25">
<div class="col-row">
<img src="http://placehold.it/250x250" alt="">
</div>
<div class="col-row">
<img src="http://placehold.it/250x250" alt="">
</div>
</div>
</div>
You could use flex-box, for example:
.row {
display: flex;
flex-direction:row;
}
.column {
display: flex;
flex-direction:column;
}
And getting rid of the widths the browser does a great job aligning the items:
http://jsfiddle.net/2vLpx9k3/3/
You may need some prefixes for cross-browser support.
I've made something that might possibly be something that you are looking for.
http://jsfiddle.net/2vLpx9k3/4/
It adjusts the widht and height of the inner elements based on the outer element.
HTML:
<div class="outer">
<div class="left">
<div class="right"></div>
<div class="right bottom"></div>
</div>
</div>
CSS:
.outer {
height: 100vh;
}
.left {
background-color: red;
width: 100%;
height: 100%;
margin-right: 50%;
}
.right {
background-color: green;
height: 50%;
margin-left: 50%;
}
.right.bottom {
background-color: black;
}