DIV changes to Browser Screen Size changes [Solved]

[J2913]

Hello Again!

Currently this is the webpage I've been working on.

http://j2913.weebly.com/

 

My goal this time is to figure out how to code situational changes.

Currently the width and height for my divs are strictly related to my own google chrome browser without the tabs.

I would like to learn how to code it differently it terms of how to set it in order so that no matter what the screen/browser size, the

 

.container would always be center of the screen, the

.top would always be on top of the .container, the

.bottom would always be on the bottom of the .container, the

.left would always be on the left of the . container, and the

.right would always be on the right of the .container.

 

Furthermore, what I'm ultimately desiring would be this situation.

An example is this website.

https://css-tricks.com/forums/topic/setting-a-div-height-to-the-window-viewport-size/

 

I do not know the term of what I'm hoping to accomplish but it is this.

If I resize my current webpage in Chrome by decreasing the width only I would like it that at a certain size, only my

.right would be visible and the .left would be hidden.

 

Just as the example website, as the width of the browser window decrease to a certain size only their left div is visible whereas

their "log in" div on the right is hidden.

 

What is this term called, and how do you to this?

The example site mentioned jQuery.

I'm only learning html and css so far, is it necessary?

Thanks!

 

 

Edited August 18, 2015 by J2913

[J2913]

CSS

html {background: url(Autumn.jpg) no-repeat center center fixed;} body { margin: 0px;border: 0px;padding: 0px;} .container {  width: 1000px;  height: 956px;  margin: 0 auto;} .top {  width: 100%;  height: 18px;  line-height: 18px;  margin-bottom: 1px;     background-color:rgba(255,255,255,0.8);   font-size:18px;  text-align: center;} .top a {    color: inherit;    text-decoration: none;}   .left {width: 310px;  height: 920px;  margin-right: 1px;  margin-bottom: 1px;     background-color:rgba(255,255,255,0.8);  float: left;   padding-top: 2px;} .left h1 {  margin: 0px;  border: 0px;  padding: 0px;  line-height: 1em;   font-size: 24px;  font-family: Georgia;  text-align: center; } .right {  width: 669px;  height: 920px;  margin-bottom: 1px;    background-color:rgba(255,255,255,0.8);  float: left;   padding-top: 2px;  padding-left: 10px;  padding-right: 10px;   overflow:scroll;} /*Right: Parable Title*/.right h1 {  margin: 0px;  border: 0px;  padding: 0px;  line-height: 1em;   font-size: 28px;  font-family: Georgia;  }  /*Right: Parable Verse*/.right h2 {  margin: 0px;  border: 0px;  padding: 0px;  line-height: 1em;   font-size: 18px;  font-family: Georgia;} /*Right: Parable Verse Content*/.right p {  margin-top: 7px;  margin-left: 21px;  margin-bottom: 15px;  line-height: 1.25em;   border: 0px;  padding: 0px;   font-family: Georgia;  }   .bottom {  width: 100%;  height: 15px;  line-height: 15px;   background-color:rgba(255,255,255,0.8);   font-size: 15px;  text-align: center;   clear:both;}

Edited August 15, 2015 by J2913

[J2913]

Or is this a javascript problem?

[J2913]

I think it is

@media codes am I right?

http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

 

Or is there a different way of coding this?

[dsonesuk]

As the devices get smaller you usually lose left, right columns OR they stack below or above main content depending how relevant it is that must be shown, as in images for page links, that would be to heavy for smaller devices, same with full broswer width background images for desktop layout but would be not practical for smaller mobile devices.This can be controlled using media queries, javascript should be used to make useability easier and enhance the site AFTER you have usable site that works without javascript because this is what search engine bots pick up, it will not pick up dynamic content, links created using javascript.

[J2913]

Thanks!