We Keep Coding

Creating a side by side div and responsive top bottom div in reactjs

I am using ReactJs to learn to build a site
<div>
<div className = "Home">
<div className = "wrapper">
<div className= "one" >
<img src={image} alt="clock" height = '590px' width='590px'></img>
</div>
<div className="two">
<center>
<p>Perfect tool to get your </p>
<p> service on <mark className = 'ser'>Word</mark></p>
</center>
<div className = 'btn_see'>
Explore
</div>
</div>
</div>
this is the code on js page
and here is css code for div:
.wrapper {
border : 2px solid #000;
overflow:hidden;
}
.wrapper div {
min-height: 200px;
padding: 10px;
}
.one {
float:left;
margin-right:20px;
width:50%;
border-right:2px solid #000;
}
.two {
overflow:hidden;
margin:10px;
border:2px dashed #ccc;
min-height:170px;
}
/*mobile*/
#media screen and (max-width: 800px) {
#one {
float: none;
margin-right:0;
width:auto;
border:0;
}
}
while on desktop, it works as intended but on mobile, it should go one below the another which it does not instead it stacks on one another is something wrong with my code.
How it should and is looking on desktop
side by side div
How it should look on mobile but isn't
top bottom div in responsive
is something wrong with my code, please help I am new.

I'm not seeing any element with ID one in your html, so i'm assuming you want to select the class name, in which case your selector in the media query should be .one as you've written above and not #one. # is used to select IDs . is used to select classes.

There are different approaches to make this happen.
1. Flex Box System
2. Grid System
Hint: You can do it with flex box and when it turns into its mobile version, all of the blocks must be in a horizontal direction.

You can use either Grid or Flex. They are both ways to make a layout responsive and with a lot of features that will make this task easy. Below is a snippet on how you could make it stack on mobile using flex. Also, here's some references on both grid and felxbox. Use whichever seems more fitting to your needs:
Grid: grid
Flexbox: Basic concepts of flexbox
#wrapper{
display: flex;
flex-direction: row;
}
#one {
background-color: #808080;
}
#two {
background-color: blue;
}
#wrapper div{
min-height: 200px;
padding: 10px;
}
#media screen and (max-width: 800px) {
#wrapper {
flex-direction: column;
}
}
<div id="wrapper">
<div id="one">
I'm the first
</div>
<div id="two">
I'm the second
</div>
</div>

have nested div fill up area within parent div

Been looking all over stack for answers and nothing fits my specific scenario:
I have a parent div and within that I have two child divs aligned horizontally next to each other. I want to pretty much fill up all that extra space in the parent div (shown in purple color). I want to take the div in red and pull it up and down to fill the parent so that column background is all red and similarly, the right div fills up and down and the background for that entire fills up to be blue. Below is my div structure
<div class="container">
<div id="parent" class="btn row-height" style="width:100%; margin:0%; margin-top:5%; padding-top:10%; padding-bottom:10%; border-solid:1px; border-radius:10px; background:#d3d3e5; overflow:hidden" type="submit">
<div class="row">
<div class="col-height col-middle col-xs-4 pull-left card" style="background-color:red">
<div class="col-xs-12 text-center">
<h3 class="heading-s1">TEXT</h3>\
</div>
</div>
<div class="col-height col-middle col-xs-8 pull-right card" style="background-color:blue;">
<div class="col-xs-12 text-center">
<h4>TEXT</h4>
<p>TEXT</p>
</div>
</div>
</div>
</div>
</div>
To make it clearer: I want my final thing to look like this:

I think you might be looking for something like this.
.container {
height:500px;
}
.container #parent {
height:100%;
}
.container #parent .row {
height:100%;
position: relative;
}
.container #parent .row #child-left {
height: 100%;
width:30%;
background-color: blue;
float:left;
}
.container #parent .row #child-right {
height: 100%;
width:70%;
background-color: yellow;
float: right;
}
I am not sure what styles .container, #parent and row have, so I included what could possibly be their styles. But the meat of the of the answer/solution here is the last two blocks of the styles. The idea is that both children of the parent must have 100% height of whatever is containing them.
Check demo here: https://jsfiddle.net/an6t1yj3/
In case you can't, this is the output of the fiddle:

You display: table values.
<style>
#parent {background: purple; overflow: hidden;}
.row {display: table; height: 300px; width: 100%}
.row > div {display: table-cell; text-align: center; vertical-align: middle;}
#child-left {background: red; width: 40%;}
#child-right {background: blue; width: 60%;}
</style>
<div class="container">
<div id="parent">
<div class="row">
<div id="child-left" class="pull-left">left<br>left</div>
<div id="child-right" class="pull-right">right<br>right<br>right</div>
</div>
<div>
<div>
https://jsfiddle.net/mj87kucy/

Odd CSS/div spacing issue with simple page

I have the following page:
HTML:
<div class="spacer">
<div id="conversation"></div>
</div>
<div class="colorbox">
</div>
<div class="box">
<div id="message"> XXXX </div>
</div>
CSS:
body {padding: 0; margin: 0; overflow: hidden; font-family: Helvetica;}
.box {
background-color: #FFFFFF;
height:200px;
width: 700px;
border-top-style:solid;
border-top-width: 2px;
border-top-color: #EEEEEE;
display: inline-block;
}
.spacer {
background-color: #FFFFFF;
height:40px;
}
.colorbox{
display: inline-block;
height:120px;
width:120px;
border:1px solid #000;
background-color:blue;
}
#message{
margin:5px;
}
JS Fiddle: http://jsfiddle.net/qtv4c10o/5/
I would like to be able to delete the XXX text without moving the line in that border box, but unfortunately that's not working. When I remove it the line moves to look like this:
http://jsfiddle.net/qtv4c10o/6/
I am eventually going to be updating the XXX text using javascript and don't want the border line to move as well.

The reason your line goes under the blue square is:
You gave a fixed width of 700px to the box class.
So if you reduce the size of the window, your line cannot reach 700px: it has to go where there is more space, ie below the box.
Solution: give it a width that can be achieved within the remaining space
The issue was resolved in chat. Here is a working solution:
Let's first wrap colorbox and box with an outer div.
<div class="outer">
<div class="colorbox"></div>
<div class="box">
<div id="message"> XXXX </div>
</div>
</div>
The outer class is so:
.outer {
width:100%;/* the whole width available */
height:120px;/* same height as blue square */
display:table;
}
We'll give outerbox the following property:
display:table-cell;
and add to box:
width: 100%; //the remaining width, actually
margin-top:105px; // blue square height minus height of message
Here is a working fiddle: http://jsfiddle.net/xzxn4rzf/1/

Css Rescaling Fixed Banner

So quick question, I haven't been able to find the correct phrasing perhaps in google but I'm attempting to make a fixed banner will scale when the page is resized. I've found that using a percentage width works for at least the large container, however my banner container within the main container will not rescale into that adequately (The banner is extending longer than the main container).
CSS:
.contMain {
width:80%;
position: top
padding-top: 0;
border-top: 0;
margin: 0 auto;
background-color: #F1EDCC;
}
.contMain-banner {
position:fixed;
width: inherit;
background: #87AADF;
}
HTML:
<div class="contMain">
<div class="contMain-banner">
<h1 class="contMain-title">Some Title</h1>
{{> MeteorTemplate}}
</div>
</div>
The only higher level css is a .body tag in css for a background color. I am using MeteorJS for this. Cheers

Try this - codepen here
css
body {
height:100%;
width:100%;
}
.contMain {
height:150px;
width:80%;
padding:0;
margin: 0 auto;
background-color: #333333;
}
.contMain-banner {
position:fixed;
width: inherit;
height:auto;
background: #d7d7d7;
}
span {
color:#fff;
position:absolute;
top:125px;
}
HTML
<body>
<div class="contMain">
<div class="contMain-banner">
<h1 class="contMain-title">Main Content Banner</h1>
{{> MeteorTemplate}}
</div>
<span>This is the main container</span>
</div>
</body>

How do I achieve this layout without using Javascript?

I want a basic full width layout with a 250px sidebar on the right. Here's roughly what I want:
<-------Content-------><--250px sidebar-->
<---------------100% width--------------->
Is this possible without Javascript or tables?

Yes, of course:
see http://jsfiddle.net/whTwg/4/
HTML:
<div id="wrapper">
<div id="sidebar-wrapper">
<div id="sidebar">Sidebar</div>
</div>
<div id="main-wrapper">
<div id="main">Main</div>
</div>
</div>
CSS:
#wrapper{
overflow:hidden;
}
#main-wrapper{
overflow:hidden;
}
#sidebar-wrapper{
float:right;
width:250px;
max-width:50%;/* You should set a max-width */
}
/*Here you can add borders, paddings and margins */
#main{
background:#aaf;
border:10px solid blue;
}
#sidebar{
background:#faa;
border:10px solid red;
}
Note: instead of #wrapper{overflow:hidden} (or something different than visible), you could add <div style="clear:both"></div> after main-wrapper.
Edit:
You are right, I forgot to add #main-wrapper{overflow:hidden;}. I have fixed the link and the code.

<div style="float: left">
..... content ......
<div>
<div style="float: right; width: 250px;">
..... sidebar .....
</div>
<div class="clear"></div>
... other content
This is the CSS for the class="clear":
div.clear {
clear:both;
}
You can set the first div width when you see how much space you have.
Is this helpful?