html horizontal scrolling - html

i have a simple css example, and i can't understand the behavior of one of my divs, when the horizontal scroll is displayed. so...when my browser window needs to display the horizontal scroll(when the window width is less than my div "content" width(1024px)), my div "footer" (that have the same "content's" parent and 100% width), seems to get an "extra blank space" on the right side. this space grows when I reduce the width of the window. any ideas about how can i get it off, or why it happens??thanks!
heres my code:
css:
<style type="text/css">
html, body {
height: 100%;
width:100%;
font-family:"Arial Black", Gadget, sans-serif;
font-size:11px;
font-variant:normal;
}
* {
margin: 0;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
#content{
width:1024px;
margin:0px auto;
background-color:#990;
height:780px;
}
.footer, .push {
height: 4em;
width:100%;
}
#footer-content{
height:10px;
background-color:#09F;
width:100%;
}
</style>
html:
<body>
<div class="wrapper">
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque varius tortor vitae pretium. Quisque magna ipsum, accumsan sit amet pretium sed, iaculis feugiat nibh. Donec vitae dui eros, eu ultricies nulla. Morbi aliquet, nisi in tincidunt rutrum, nisl justo sagittis nisi, nec dignissim orci elit vitae tortor. </p>
</div>
<div class="push"></div>
</div>
<div class="footer" style="background-color:#900; width:100%;">
<div id="footer-content"></div>
</div>
</body>

I'm going to go with this is a side effect of having a statically defined width for your content DIV and having the footer width be defined as 100%.
If you notice the width of the 100% width section always corresponds to the visible width of the window, whereas the statically defined section always remains a static size (as you would expect). When the window size increases the 100% width section expands to fill that size. When the window size contracts it contracts to only fill that window. In that last case where the window goes below 1024px the static DIV stays at 1024 and the dynamic DIV decreases to fit the window, so you get the scroll bar at the bottom because you have the static content outside the visible width of the window. You scroll to the side and the dynamic div remains the same size, that being the visible width of the window and then you see white space next to it.
One solution would be to make the 1024 section a percentage width, say 80%, that way it contracts and expands with the bottom section. Either that or set min-width:1024px on your 100% section.

Related

What defines the width of my div element?

CSS. Never my strong point!
Consider the following styling:
.popupComponentContent{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
padding: 16px;
max-height:100vh;
max-width:100vw;
box-sizing:border-box;
background-color:white;
box-shadow: 2px 2px 5px 4px rgba(0,0,0,0.5);
overflow:auto;
}
noting that there are no specific rules for the width or the height of the targeted element.
Let's apply this styling to the following markup:
<div class="popupComponentContent" >
<p>
This is a popup!
</p>
</div>
And the outer div fits nicely around the content. See example on codepen right here.
Now, instead, let's apply it to this markup:
<div class="popupComponentContent" >
<p>
This is a popup!
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus gravida eget
dolor a interdum. Donec placerat turpis ac lacinia rhoncus. Cras urna magna,
imperdiet ut imperdiet ultrices, euismod non elit. Proin vel metus pretium,
bibendum tortor vel, congue quam. Sed ultrices lacus quam, nec porttitor
mi scelerisque eget. Praesent accumsan varius leo nec tincidunt. Maecenas
viverra ultricies purus quis rutrum.</p>
</div>
...ensuring that we have enough content to cover the width of the viewport. See example on codepen right here.
Why is the div in the second example half the width of the screen? What makes that happen? Why doesn't it extend to the full width of the screen?
You've applied .popupComponentContent to a div which is a block element. It covers 100% of the screen (parent element) unless a width is specified.
In .popupComponentContent, you use left: 50%. This doesn't actually position the element at where it supposed to be since the element is a block with no width specified. It basically shrinks the div. Right side of the div is snapped to right. left: 50% just moves the left side of the div to 50%, so you get 50% width for your div.
If you want to move your div to left: 50% while preserving its default width (which is 100%), you should apply display:table on the div.
So I'd say display:block on the div defines the width.
You can remove the transform attribute to understand it. If you do that you'll see the width of the element fits with the remaining space between left: 50% and the right side.
So you can play with this left attribute to adjust the maximum width for your popup (as well as adjusting the transform to keep it centered).
Take a look on flexbox, it can help you to improve this.
Removing the transform line and the left line will make it display full width.
As it is, it covers only 50 percent because left: 50%; bumps the left margin halfway across the window, then transform: translate(-50%, -50%); bumps the whole element back across the window the other way.

CSS: Align image right bottom of a div filled with text

I'm making myself a website but I'm a little stuck on an issue I am having.
Inside a div I have a block of text with variable height.
At the right side of the text I want to position an image width a variable width & height. It has to be aligned to the bottom
Above the image may not come any text.
It needs to be like this: https://www.dropbox.com/s/pqpttrvefrvci52/example.jpg
Here is the code I'm currently having:
HTML:
<div id="section">
<div id="image">
<img src="example.jpg" alt="image"/>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue, nisl et facilisis commodo, sem tortor suscipit massa, nec rutrum eros nunc et orci.
Maecenas nibh erat, pulvinar sed aliquam at, malesuada nec nibh.Curabitur fringilla justo odio. Aenean tristique consequat lorem vel tincidunt.
</p>
</div>
CSS
#section {
position: relative;
}
#image {
float: right;
margin-left: 20px;
position: absolute;
bottom: o;
right: 0;
}
With this code the image is aligned to the bottom right corner of the div, but the height of the div is lower then the height of the image.
Also the text just goes through the image.
you need a couple of things to fix this.
1) add padding-right to the section so it does not overlap with the image.
#section {
position: relative;
padding-right:<at least image width so the text doesn't overlap>
}
2) when you add a div and float in it, the float remove the image from the flow of the document so you need to add another internal div with the same height or make the height of the div the same height as your image or just add a floater div..
<div id="image">
<img src="example.jpg" alt="image"/>
</div>
<div style="clear:both"></div>
</div>
Here is a working solution: http://jsfiddle.net/zV3wm/
I can think of a way with variable image widths and text amounts, but it requires some duplication in the markup.
The gist is that you right-float a hidden version of the image, and then use overflow:hidden so that the paragraph against the float doesn't flow under it. Then, we use absolute positioning to place the non-hidden version of the image at the bottom of the container.
I have prepared a mockup at http://jsfiddle.net/UmGNZ/ (I have given the hidden image partial opacity, so you can see where it's being added to the document), but for a pseudo-HTML example:
<container with position:relative>
<right-float>
<hidden img tag with opacity: 0 />
<actual img tag with absolute positioning, bottom: 0, right: 0 />
</right-float>
<p with overflow:hidden (or auto) />
</container>
You could also try a pure CSS solution using CSS tables if you don't have to support IE7, but otherwise this should work down to IE6 if you use visibility:hidden in favour of opacity, and add a zoom:1 to the paragraph style.
This idea which allows a flexible image size: http://jsfiddle.net/David_Knowles/F3zZU/4/
.cell {display:table-cell;}
#section {
position: relative;
width:300px;
}
#image {
vertical-align: bottom;
}
<div id="section">
<div class="cell">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue, nisl et facilisis commodo, sem tortor suscipit massa, nec rutrum eros nunc et orci.Maecenas nibh erat, pulvinar sed aliquam at, malesuada nec nibh.Curabitur fringilla justo odio. Aenean tristique consequat lorem vel tincidunt.</p>
</div>
<div id="image" class="cell">
<img src="http://placeimg.com/120/80/any" alt="image"/>
</div>
</div>
I dont thing I am correct but you can achieve that by float right and margin-top.
#img {
float: right;
margin-top: -140px;
}
Check this out: http://jsfiddle.net/wrujx/
I think best solution is to use a little bit of jQuery (JavaScript) and let each part do its job keeping it as simple as possible. Here's what you'd have:
HTML
<div id="wrapper">
<p>yourtexthere</p>
<img src="whatever.jpg"/>
</div>
CSS
#wrapper{
width:600px;
border:1px solid #000000;
}
p{
display:inline-block;
margin-right:20px;
}
img{
vertical-align:bottom;
}
jQuery
var parentWidth = $('#wrapper').width()
var imgWidth = $('img').width()
$('p').width((parentWidth - imgWidth) - 20)
And there you go plain and simple without extra tags and messy positioning.

When a child element overflows horizontally, why is the right padding of the parent ignored?

Given this simple structure:
<div id="parent">
<div id="child">Lorem ipsum</div>
</div>
with this CSS:
#parent {
width: 200px;
height: 200px;
padding: 20px;
overflow-x: scroll;
}
#child {
width: 500px;
}
Live demo: http://jsfiddle.net/523me/5/
Notice that the parent has a 20px padding and that the child overflows horizontally (because it is wider). If you scroll the parent all the way to the right, you'll see that the child touches the right edge of the parent.
So, the parent should have a right padding, but it is ignored. It seems that when the child has a fixed width, the right padding of the parent does not apply. (Is this specified by a standard? I would love to know. Please let me know if you find anything!)
Is there a way to force the right padding to be applied in this scenario without having to remove any of the elements from the flow (by floating or positioning)?
Screenshot 1 - The right padding is ignored. This is how all current browsers behave.
Screenshot 2 - The right padding applies. This is what I'm trying to accomplish. (Btw, the screenshot is from IE7, which is the only browser which does not ignore the right padding.)
You're suffering from this problem.
I would solve it by giving a margin to the child (and not a padding to the parent):
body {
padding: 2em;
}
#parent {
width: 200px;
height: 200px;
overflow-x: scroll;
background: gray;
}
#child {
width: 500px;
background: yellow;
margin: 20px;
display: inline-block;
}
<div id="parent">
<div id="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et turpis eu lorem consectetur blandit sed vel ligula. In lorem ligula, lacinia sed aliquet sed, congue quis tortor. In sed magna eros, eget blandit arcu. Nulla sit amet volutpat ipsum. Duis
quis nisl massa. Sed ipsum magna, tempus non malesuada in, gravida et sapien. Fusce a odio nulla, quis ultrices mauris. Maecenas in tellus id massa fringilla molestie.</div>
</div>
Dunno but adding:
#child{
display: inline-block;
}
Seems to fix it: http://jsfiddle.net/523me/6/
I've only tested in latest Chrome, may not be cross-browser
You might change the padding to a border.
padding: 20px;
to
border: 20px solid gray;
No, the padding is not ignored, but it's still inside the parent.
See updated jsFiddle, where you can see that the padding hasn't moved from its original position.
Edit: Hm, there are some anomalies. If you give the inner div a right margin, that gets ignored too. Hm. Upvoting your question.
Apply padding-right to overflowing element itself, and move background to its direct child element.
<div id="parent">
<div id="child"><div>Lorem ipsum...</div></div>
</div>
<style>
#parent {padding-right: 0; }
#child {padding-right: 20px; }
#child > DIV {background: yellow; }
</style>
http://jsfiddle.net/523me/9/

CSS Float behaviour (even after checking W3C)

I have an issue with float and have included the sample code below. I am trying to create a two column layout: I know how to do this a number of other ways so this question is with a view to finding out why FLOAT behaves the way it does here.
The container DIV has two DIVs, both are floated left.
As expected, the size of the browser window determines whether or not the second floated block level element will go alongside or under the first floated element.
The problem arises with the length of the content in the second floated DIV (assume the browser window is maximized, at whatever resolution).
In the code below, I have commented out part of the second paragraph. On my browser this is the cut off mark: including any content after this causes the whole DIV to clear the first DIV, even though there is a lot of space left in the second DIV before it should need to clear the first DIV.
I cannot see anything in the code that should cause this to happen. I am aware of how float behaves in terms of block level and inline content and the consequences of placing non-floated blocks beside floated ones, but I cannot find anything in the documentation to explain why the block should clear when there seems to be sufficient room for its content.
Help much appreciated.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>CSS Float Problem</title>
<style>
body {
background:#5c604e;
}
#container {
position:relative;
background:yellow;
}
p {
background-color:#cccccc;
width:50%;
}
.block {
width: 200px;
height: 200px;
}
.float {
float: left;
}
.pink {
background: #ee3e64;
}
.blue {
background: #44accf;
}
</style>
</head>
<body>
<div id="container">
<div class="block pink float">Lorem ipsum dolor sit amet consectetuer Nam fringilla Vestibulum massa nisl. Nulla adipiscing ut urna ipsum Curabitur urna lacinia pretium feugiat Ut.
</div>
<div class="blue float"> <h2>Test Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum erat a neque eleifend vitae ultrices nisi tempor. Praesent facilisis lobortis nisl, <!--sit amet gravida orci mollis vitae. Maecenas porta turpis id urna porta id ornare velit dapibus. <!-- Proin sollicitudin, tortor viverra posuere mattis, nisl est rhoncus urna, nec elementum augue turpis vitae diam. Pellentesque ut quam sit amet elit tempus suscipit nec vel nulla. Proin ullamcorper sollicitudin metus in posuere. Aliquam a vehicula odio. Morbi scelerisque arcu ac nibh cursus ullamcorper. Aliquam pulvinar commodo nunc nec laoreet. -->
</p>
</div>
</div><!--end of container div -->
</body>
</html>
See it at http://cssdesk.com/86cPH
In your example, you have two block-level element floated next to each-other. Because they're block-level, they establish a new containing context in which their contents will live and affect layout.
The standard behaviour when calculating box sizes for floated elements is to base it on the contents of the element. Because your second floated box doesn't have an explicit width, the browser determines that its width should be based on its contents, which in the case of the floated element is going to be as wide as its contents can feasibly be.
Thus, the second box flows underneath the first because the intrinsic width of the paragraph affects the blue box, which is larger than the allotted explicit constraints of its container (i.e., the width of #container minus the width of the first floated element).
If you wanted the text to flow around the floated element, you should omit the "blue" box. Only when the float and the contents are nested in the same container (and the content isn't a block-level element) will the content then flow around the pink box as one might expect.
As far as getting a working two-column layout with equal-height columns, I'd recommend trying display: table if you don't need to support IE7.
What you want to achieve? you haven't fixed the width of second block and so its width is going mad with the content length.
Give it a fixed width.
If you want that rest width is covered by it then try this.
.block1 {
width:20%;
}
.block2 {
width:80%;
}
and in html
<div class="block1 pink float"> ..content.. </div><
div class="block2 blue float"> ..whatever content.. </div>
remember there should be no space between closing div of left block and opening div of right block else whitespace between them will cause them to stacked over one another

How to position a DIV to fill all available space between a header DIV and a footer DIV?

Let's say I have a parent DIV. Inside, there are three child DIVs: header, content and footer. Header is attached to the top of the parent and fills it horizontally. Footer is attached to the bottom of the parent and fills it horizontally too. Content is supposed to fill all the space between header and footer.
The parent has to have a fixed width and height. The content DIV has to fill all available space between header and footer. When the content size of the content DIV exceeds the space between header and footer, the content DIV should display scrollbars and allow appropriate scrolling so that the footer contents should never be obscured nor the footer obscure content.
Now comes the hard part: you don't know the height of the header nor footer beforehand (eg. header and footer are filled dynamically). How can content be positioned without using JavaScript?
Example:
<div style="position : relative; width : 200px; height : 200px; background-color : #e0e0ff; overflow : hidden;">
<div style="background-color: #80ff80; position : absolute; left : 0; right : 0; top : 0;">
header
</div>
<div style="background-color: #8080ff; overflow : auto; position : absolute;">
content (how to position it?)
</div>
<div style="background-color: #ff8080; position : absolute; bottom : 0px; left :0; right : 0;">
footer
</div>
</div>
To clarify this event further - the target layout that I'm trying to achieve will be used in a business web application. The parent DIV will have a fixed, but unknown size (for instance, it will be exactly the size of the browser viewport, sizing itself along with sizing the browser window by the user). Let's call the parent DIV a "screen".
The header will contain a set of filtering controls (like textboxes, drop down lists and a "filter" button) that should wrap to the next line if there is insufficient horizontal space (so its height can change any time to accomodate line breaking). The header should always be visible and attached to the top of the "screen".
The footer will contain a set of buttons, like on a dialog window. These too can wrap to next line if there is not enough space horizontally. The footer must be attached to the bottom of the "screen" to be accessible and visible at all times.
The content will contain "screen" contents, like dialog fields etc. If there are too few fields, the rest of the content will be "blank" (in this case the footer should not begin right after the content, but still be attached to the bottom of the "screen" which is fixed size). If there are too many fields, the content DIV will provide scrollbar(s) to access the hidden controls (in this case the content DIV must not extend itself below the footer, as the scrollbar would be partially hidden).
I hope this clarifies the question a little bit further, as I have too low rep to enter comments to your repsonses.
I'm going to get downmodded for this, but this sounds like a job for a table.
What you're trying to do is to set the total height of three contiguous divs as a unit, and a 1x3 table with height 100% is actually a cleaner solution.
Pure CSS Solution 1 - Flexbox:
You can create a column of divs that behave in this way by using the CSS3 display: flex; property (see W3 Specs)
Using a wrapper, you can align everything in a column with the flex-direction: column; declaration and then fill the vertical space with justify content: space-between; and height: 100vh;. Then all you need to do is make your content element expand with flex: 1 0 0; and give it a scrollbar with overflow-y: auto;.
Note on browser support - While flexbox is supported by most modern browsers, there are still a few limitations (see: http://caniuse.com/#feat=flexbox). I would recommend using the -webkit- and -ms- prefixes.
Working example: See the following snippet and this jsfiddle.
body {
display: -webkit-flex; /* Safari 6.1+ */
display: -ms-flex; /* IE 10 */
display: flex;
-webkit-flex-direction: column; /* Safari 6.1+ */
-ms-flex-direction: column; /* IE 10 */
flex-direction: column;
-webkit-justify-content: space-between; /* Safari 6.1+ */
-ms-justify-content: space-between; /* IE 10 */
justify-content: space-between; /* Header top, footer bottom */
height: 100vh; /* Fill viewport height */
}
main {
-webkit-flex: 1 0 0; /* Safari 6.1+ */
-ms-flex: 1 0 0; /* IE 10 */
flex: 1 0 0; /* Grow to fill space */
overflow-y: auto; /* Add scrollbar */
height: 100%; /* Needed to fill space in IE */
}
header, footer {
-webkit-flex: 0 0 auto; /* Safari 6.1+ */
-ms-flex: 0 0 auto; /* IE 10 */
flex: 0 0 auto;
}
/* Make it look a little nicer */
body {
margin: 0;
background-color: #8080ff;
}
header {
background-color: #80ff80;
}
footer {
background-color: #ff8080;
}
p {
margin: 1.25rem;
}
<body>
<header>
<p>header</p>
</header>
<main>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pellentesque lobortis augue, in porta arcu dapibus dapibus. Suspendisse vulputate tempus venenatis. Pellentesque ac euismod urna. Donec dui odio, ullamcorper in posuere eu, laoreet sed nisl. Sed vitae vestibulum leo. Maecenas mattis lacus eget nisl malesuada, quis semper urna ornare. Praesent id mauris nec neque aliquet dignissim.</p>
<p>Morbi varius dolor at lorem aliquet lacinia. Aliquam id lacinia quam. Sed vel libero felis. Etiam et pellentesque sem. Aenean bibendum, ante quis luctus tincidunt, elit mauris volutpat nisi, et tempus lectus sapien in mauris. Aliquam condimentum nisl ut elit accumsan hendrerit. Morbi mollis turpis est, id tincidunt ipsum rhoncus eget. Fusce in feugiat lacus. Quisque vel massa magna. Mauris varius congue nisl, vitae pellentesque diam ultricies at. Sed ac nibh ac diam tristique venenatis non nec nisl. Vivamus enim eros, pretium at iaculis nec, pharetra non sem. Aenean ac imperdiet odio.</p>
<p>Morbi varius dolor at lorem aliquet lacinia. Aliquam id lacinia quam. Sed vel libero felis. Etiam et pellentesque sem. Aenean bibendum, ante quis luctus tincidunt, elit mauris volutpat nisi, et tempus lectus sapien in mauris. Aliquam condimentum nisl ut elit accumsan hendrerit. Morbi mollis turpis est, id tincidunt ipsum rhoncus eget. Fusce in feugiat lacus. Quisque vel massa magna. Mauris varius congue nisl, vitae pellentesque diam ultricies at. Sed ac nibh ac diam tristique venenatis non nec nisl. Vivamus enim eros, pretium at iaculis nec, pharetra non sem. Aenean ac imperdiet odio.</p>
</article>
</main>
<footer>
<p>footer</p>
</footer>
</body>
For more information on how to use flexbox see these guides:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Pure CSS Solution 2 - Display Table [Old solution]:
This can also be done by using the CSS display: table; property (see W3 Specs).
The HTML:
<div id="screen">
<div id="header"></div>
<div id="content">
<div id="content_frame">
<div id="content_wrap"></div>
</div>
</div>
<div id="footer"></div>
</div>
The CSS:
html, body, #screen, #content, #content_frame {
height: 100%; /* Make #screen viewport height and #content fill space */
}
#screen {
display: table;
}
#header, #content, #footer {
display: table-row;
}
#content_frame {
overflow-y: auto; /* Add scrollbar */
position: relative;
}
#content_wrap {
position: absolute; /* Fix problem with overflow in FF */
}
The overflow property is unreliable on css table elements and their children, so I had to nest the content. In this case I was forced to nest twice and use position: absolute; in order to make it work in Firefox. Maybe someone else can come up with a more elegant solution to avoid this 'divitis'.
Here is a functioning jsfiddle.
Warning: This does not appear to work in Opera 12! The content div takes up 100% of the parent's height which causes the rows to overflow the table (as they did in firefox).
If you can get away with not having the main content scrollable, you might be better using the footerStickAlt method to make sure your footer stays at the bottom of the screen or the bottom of the content (if the content extends beyond the bottom of the screen).
Does the parent need to stay at a fixed height?
<div style="position : relative; width : 200px; background-color : #e0e0ff; overflow : hidden;">
<div style="float: left; clear: left; background-color: #80ff80;">
header
</div>
<div style="float: left; clear: left; background-color: #8080ff; overflow : auto; ">
content (how to position it?)
<BR />taller
<BR />taller
<BR />taller
<BR />taller
<BR />taller
<BR />taller
<BR />taller
<BR />taller
</div>
<div style="float: left; clear: left; background-color: #ff8080;">
footer
<BR />taller
</div>
if the height of the parent is fixed, this is the closest I'd know how to get to it offhand -- still not exactly right if those color blocks (as opposed to just text) are truly important and weren't just for illustrating the boundaries of the DIVs:
<div style="position : relative; width : 200px; height : 200px; background-color : #e0e0ff; overflow : hidden;">
<div style="float: left; clear: left; background-color: #80ff80; ">
header <BR .> taller
</div>
<div style="float: left; clear: left; background-color: #8080ff; overflow : auto; ">
content (how to position it?)<BR /> and another line
</div>
<div style="background-color: #ff8080; position : absolute; bottom : 0px; left :0; right : 0;">
footer <BR /> taller
</div>
Do you need to have the center div change size? If you're just trying to make sure that it appears that its background (#8080ff) appears between the header and the footer, why not just have the containing div's background be #8080ff. The header and footer background would override that, and the rest of the div's background would be correct.
Absolute positioning is messing you up. Try something like this:
HTML:
<div id="wrapper">
<div id="header">
header
</div>
<div id="content">
content
</div>
<div id="footer">
footer
</div>
</div>
CSS:
#wrapper {
width: 200px;
height: 200px;
overflow: visible;
background: #e0e0ff;
}
#header {
background: #80ff80;
}
#content {
background: #8080ff;
}
#footer {
background: #ff8080;
}
edit: perhaps I misunderstood, do you want everything to fit into the 200x200px box or do you want the box to increase its height to fit the content?
This can be solved by using different techniques. The first one is using media queries. Using them, you can define what your page should look like for each screen size. Secondly, there are several techniques for positioning your footer correctly (sticky footer). Thirdly, you can use different table styles or the flexbox approach to position your content correctly.