How to implement this on a div?

Good afternoon. Please help me to implement it all on div'Ah. Either they do not understand in the markup... I need to actually "rubber". If you put the header width:100% cap is stretched only on the visible area, and it turns out if you scroll the horizontal scroll caps will not.

I need a hat in which in the middle of the block on 1200px(permanent!), but if there is space left and right of it empty, if no block does not become smaller, the left container is below a constant 800px, right, 350px, all the other padding to rubber, help please...

PS But in Paint'e - I am God! :-)

5b4f550e98814539714642.jpeg
June 3rd 19 at 21:02
1 answer
June 3rd 19 at 21:04
This problem is solved through the media to stand
@media (min-width: 900px){
 .top-element { width: 1200px }
}

@media (min-width: 700px) {
 .top-element { 
 width: 650px;
 margin: 1px 1px 1px 1px;
}
}

From above example

And in such a manner prescribe this layout

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp - a reference to the w3c, if you have questions
all nonsense written. - Janick.Rutherford commented on June 3rd 19 at 21:07
why nonsense? not correct? - Michale80 commented on June 3rd 19 at 21:10
- Yes all right there, only labels sometimes change is necessary. First, narrow screens to describe, and then those that "poshirshe" because it is min-width: . That's just to work this thing would be choppy, not like a rubber... - jordon_Saue commented on June 3rd 19 at 21:13
and here is the "Asker" really neponyatki. Quote:
I need to actually "rubber".
and then:
I need a hat in which in the middle of the block on 1200px(permanent!)
- so the cap is not rubber.
the left container is below a constant 800px, right, 350px,
container - too not rubber. Given that the site consists of only caps and two containers with pre-specified dimensions - it's hard to understand how it can be rubber... (?) - jordon_Saue commented on June 3rd 19 at 21:16
I need to (for the hat) when the browser is less than 1200 then show only cap at 1200px, without spaces left and right, and as browser extensions so that the indentation appeared. - Michale80 commented on June 3rd 19 at 21:19
and that was not choppy? - Michale80 commented on June 3rd 19 at 21:22
first read this:
If you put the header width:100% cap is stretched only on the visible area, and it turns out if you scroll the horizontal scroll caps will not.
but the question immediately arises: If the cap is stretched by 100%, not 120% or more %, where did horizontal scrolling? And if horizontal scrolling is still there - so, in addition to the caps there is already "something broader" that "author" is silent... (?) In such cases, said: "the Manual - in the Studio!!!"... And read the empty space is useless.
Now I have a cap-an example of a simple menu. - Where is the horizontal scrolling?
- That's right, he's not here and not yet in sight, because in this sandbox does not contain elements wider than one hundred percent... - jordon_Saue commented on June 3rd 19 at 21:25

Find more questions by tags HTMLAdaptive design