I have a rectangle area on my page that needs to be filled with a square in the center. This rectangle can be both horizontal and vertical. This means that the plethora of existing questions based on making a square from just the width of a containing box don't work. [1] [2]
This square can also change dynamically and this approach doesn't resize the square. I'd also like to not use JavaScript or JQuery if possible. This is the only thing that I'd use JQuery for.
Below you can see what the code should do at the beginning, but when you resized the box it doesn't resize the square.
/* based on https://stackoverflow.com/a/5445536*/
$('.body').resizable();
var containingBlock = $('.box-rect');
var cmin = Math.min(containingBlock.width(), containingBlock.height());
$('#box-square').css({
'height': cmin+'px',
'width': cmin+'px'
});
.body{
width: 200px;
height: 100px;
}
.box-rect {
width: 100%;
height: 100%;
min-width: 50px;
min-height: 50px;
display: flex;
justify-content: center;
align-items: center;
/* example bounding box */
border: 1px solid gray;
}
.box-square {
width: 50px; /* min(box-rect.height, box-rect.width) */
height: 50px; /* box-rect min */
}
/*
The following is using a mix between the following two answers:
https://stackoverflow.com/a/6615994
https://stackoverflow.com/a/20117454
*/
.box-reset {
position: relative;
height: 100%;
width: 100%;
}
.box-reset:before {
content: "";
display: block;
padding-top: 100%;
}
.box {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
/* example gray box */
height: 100%;
background-color: gray;
}
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class='body'>
<div class="box-rect">
<div class="box-square">
<div class="box-reset">
<div class="box">
Not working at all
</div>
</div>
</div>
</div>
</div>
<br />
<div class='body'>
<div class="box-rect">
<div class="box-square" id="box-square">
<div class="box-reset">
<div class="box">
Fills to the bounds of the rectangle on load.
</div>
</div>
</div>
</div>
</div>
To be completely clear:
The first example above doesn't resize the gray square at all.
The second example resizes the gray square to the bound of the rectangle. (What I want)
However, it doesn't resize the gray square to the bound of the rectangle when resizing the containing block.
I want to resize the square to the bound of the rectangle. Like in the second example, when I resize the containing block.
I would prefer to do this all in pure CSS.
You may look at the jQuery example. It's better to understand how it worked.
I made a similar example on jsfiddle.
* {
margin: 0;
padding: 0;
box-sizing:border-box;
}
#resizable {
display:flex;
justify-content:center;
align-items:center;
width: 150px;
height: 150px;
min-width:100px;
min-height:100px;
}
#resizable h3 {
display:flex;
justify-content:center;
align-items:center;
height: 100px;
width: 100px;
text-align:center;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Resizable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#resizable" ).resizable();
} );
</script>
</head>
<body>
<div id="resizable" class="ui-widget-content center-center">
<h3 class="ui-widget-header">Resizable</h3>
</div>
</body>
</html>
<!-- Reference link https://jqueryui.com/resizable/ -->
Removed the static height and width that was getting applied from js and added
width: 50%; and height: 50%; to .box-square
$('.box-rect').resizable();
.body{
width: 400px;
height: 200px;
}
.box-rect {
width: 100%;
height: 100%;
min-width: 100px;
min-height: 100px;
display: flex;
justify-content: center;
align-items: center;
/* example bounding box */
border: 1px solid gray;
}
.box-square {
width: 100px;
height: 100px;
/* width: 100px; min(box-rect.height, box-rect.width) */
/* height: 100px; box-rect min */
}
/*
The following is using a mix between the following two answers:
https://stackoverflow.com/a/6615994
https://stackoverflow.com/a/20117454
*/
.box-reset {
position: relative;
height: 100%;
width: 100%;
}
.box {
height: 100%;
background-color: gray;
}
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class='body'>
<div class="box-rect">
<div class="box-square">
<div class="box-reset">
<div class="box">
</div>
</div>
</div>
</div>
</div>
Related
Tried a lot of ways and a lot of Codes, but its not working website width does not stay in screen. Always enables space to the right side and content is bigger than screen.
tried width and height 100vw; max-width: 100%;
also tried giving the body a specific width
`body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
}
body {
margin: 0;
overflow-x: hidden;
border: solid;
padding-left: 2px;
}
* {
box-sizing: inherit;
}
.container {
display: grid;
grid-template-columns: 1fr;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
width: 100%;
padding: 0 0px;
}`
<
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Try</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="galery.css">
</head>
<body>
<div class="container">
<div class="logo-wrapper">
<a href="index.html"><img src="/Users/Desktop/Website/images/AdobeStock_491355559.jpeg" style="width: 100%;"></div>
<div class="nav-wrapper">
<div class="nav-link-wrapper">
Home</div>
<div class="nav-link-wrapper">
Stuff</div>
<div class="nav-link-wrapper">
About</div>
<div class="nav-link-wrapper">
contact</div>
</div>
I nearly spend 4 hours trying to make this layout. I tried absolute positioning but obviously, It's not responsive.
Image is 660px and Right container is 860px.
<div className="container">
<div className="image-container">
<img src={image} />
</div>
<div className="right-container">
<div className="insde-some-text">
</div></div>
As far as my knowledge goes, you can only do this by position absolute and then changing the widths at certain breakpoints using media queries.
To add to what Khubaib said, you would want to use position: absolute in your .css file. Also, using scalable quantities for the boxes will help you for the certain screen sizes that you want your site displayed on.
Also, you can use position: relative on blue block and make the attribute top: -100px or so. This blue-block will always be relative to its normal position.
.red-block
{
width: 20rem;
height: 20rem;
background-color: red;
position: absolute;
}
.blue-block
{
width: 20rem;
height: 20rem;
background-color: blue;
position: absolute;
top: 50%;
left: 25%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css.css">
<title>Document</title>
</head>
<body>
<div class = "red-block">
</div>
<div class = "blue-block">
</div>
</body>
</html>
You could use this for reference. Simple demonstration using flex and margin.
.wrapper {
width: 100%;
}
.container {
display: flex;
align-items: center;
justify-content: center;
margin-top: 5%;
width: 100%;
}
.right-container {
border: solid red 1px;
border-radius: 5px;
width: 860px;
height: 860px;
background-color: #e1e1e1;
text-align: center;
}
textarea {
height: 80%;
width: -webkit-fill-available;
text-align: center;
background-color: lightblue;
}
.img {
margin-right: -3em;
position: relative;
}
img {
max-width: 100%;
}
<div class="wrapper">
<div class="container">
<div class="img">
<img src="https://dummyimage.com/660x400/000/fff" alt="">
</div>
<div class="right-container">
<textarea placeholder="hello world"></textarea>
<p>foooooooooooooooooooooo</p>
</div>
</div>
</div>
Desired layout:
So I have this layout which should be centered and should not exceed 1440px, it is split in 2 parts, let's call them 'sider' and 'content'. sider is max-width: 560px and container is max-width: 880px, together 1440px.
Makes sense right? Content can be infinitely long AND scrollbar ABSOLUTELY has to be on the side of the screen.
So the million dollar question is how do I center these guys?
Here is a replicated, simplified code of my layout: https://codepen.io/andrisladuzans/pen/yLOajrX
HTML:
<div class="content-body">
<div class="sider-container">
<div class="sider-content">
sider
</div>
</div>
<div class="content-container">
<div id="populate" class="content">
</div>
</div>
</div>
CSS:
body{
padding:0px;
margin:0px;
}
.content-body{
background-color: skyblue;
height: 90vh;
width:100%;
overflow: hidden;
display:flex;
}
.sider-container{
background-color: pink;
width:40%;
height: 100%;
overflow:scroll;
display:flex;
justify-content:flex-end;
}
.content-container{
background-color: #ddd;
width:60%;
height:100%;
overflow:scroll;
}
.sider-content{
background-color:magenta;
height: 100%;
width: 100%;
max-width: 560px;
}
.content{
background-color: lime;
width: 100%;
max-width: 880px;
}
JS helper:
const content = document.getElementById("populate")
const populate = () => {
for(let i = 0; i<50; i++){
const textElement = document.createElement("div");
textElement.className = "textElement";
textElement.innerText = 'some text';
content.appendChild(textElement)
}
}
populate();
The problem with my approach is that, on larger screens, you can clearly tell that one side is growing larger than the other and is not centered.
edit:
just realised, stackoverflow, has exact same layout i'm looking for.
solution:
a bit hacky, but here's what i finally managed to come up with (not responsive) https://codepen.io/andrisladuzans/pen/MWyjxLY
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
body {
padding: 0px;
margin: 0px;
height: 100%;
}
.content-body {
background-color: skyblue;
width: 100%;
height: 100vh;
overflow: hidden;
}
.container {
background-color: pink;
display: block;
width: 100%;
height: 100%;
overflow: scroll;
}
.inner-wrapper {
max-width: 1000px;
margin: 0 auto;
min-height: 100%;
border: 1px solid green;
display: flex;
position: relative;
}
.sider-container {
position: fixed;
z-index: 1;
background-color: magenta;
height: 100vh;
overflow: scroll;
width: 300px;
}
.sider-content {
background-color: magenta;
}
.content-container {
background-color: #ddd;
border: 1px solid midnightblue;
min-height: 100%;
width: 100%;
display: flex;
}
.content-spacer {
width: 300px;
height: 100%;
flex-shrink: 0;
}
.content {
background-color: lime;
flex: 1;
margin-left: auto;
}
</style>
</head>
<body>
<div class="content-body">
<div class="container">
<div class="inner-wrapper">
<div class="sider-container">
<div id="spacer" class="sider-content"></div>
</div>
<div class="content-container">
<div class="content-spacer"></div>
<div id="populate" class="content"></div>
</div>
</div>
</div>
</div>
<script>
const content = document.getElementById("populate");
const spacer = document.getElementById("spacer");
const populate = (element, text) => {
for (let i = 0; i < 150; i++) {
const textElement = document.createElement("div");
textElement.className = "textElement";
textElement.innerText = text;
element.appendChild(textElement);
}
};
populate(spacer, "spacer");
populate(content, "content");
</script>
</body>
</html>
The problem with my approach is that, on larger screens, you can clearly tell that one side is growing larger than the other and is not centered.
Not in my experience. At least from what I can tell from your codepen, everything works like you'd expect. Here is an image that shows that when I expand the window way past 4K size the container is still perfectly centered. Perhaps there is something on your browser or local machine causing a strange issue. Have you tried viewing your code on a different browser/computer?
I am trying to create a sticky footer but I'm getting empty space above and below my header & footer.
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
header {
background-color: orange;
position: relative;
height: 400px;
width: 100%;
color: white;
text-align: left;
}
footer {
background-color: #202020;
color: white;
position: absolute;
width: 100%;
height: 60px;
bottom: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Porfolio</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<header>
<h1>header</h1>
<p>header</p>
</header>
<div class="wrapper">
content
</div>
<footer>
footer
</footer>
</body>
</html>
What is the best way to create a sticky footer?
Can anyone explain why I've got this space appearing above header & below footer when I have content (h1 p) in in my header section.
For the header gap, your h1 and p tags have a default padding and margin, you may want to remove them or reduce them to your liking
h1, p {
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
h1,p {
padding: 0;
margin: 0;
}
header {
background-color: orange;
position: relative;
height: 400px;
width: 100%;
color: white;
text-align: left;
}
footer {
background-color: #202020;
color: white;
position: absolute;
width: 100%;
height: 60px;
bottom: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Porfolio</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<header>
<h1>header</h1>
<p>header</p>
</header>
<div class="wrapper">
content
</div>
<footer>
footer
</footer>
</body>
</html>
A "sticky" div can be achieved using position: fixed; in your footer CSS. Fixed means that the on-screen position will never change. Or rather you should follow the instructions posted there.
Concerning the space, it is probably because of the default styles applied to h1. Use a debugger to see those default styles and override them with your custom css.
Firefox and Chrome have built in debuggers that also let you view styles and are very efficient for debugging. Usually right click > "inspect element" then go for the CSS tab which lets your select and see styles applied to elements.
In your example, you are not "resetting" the h1 and p tags. By default these elements have some extra margin.
Try adding the following code to your css.
h1, p {
margin: 0;
}
Also check out the HTML5 CSS Sticky Footer.
you may use flex prperties
.wrapper may scroll, header & footer are sticky
/* demo purpose */
.wrapper:hover:before {
content:'test';
display:block;
height:1000px;
}
/* end demo purpose*/
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
display:flex;
flex-flow:column;
}
header {
background-color: orange;
position: relative;
width: 100%;
color: white;
text-align: left;
}
footer {
background-color: #202020;
color: white;
width: 100%;
height: 60px;
bottom: 0;
}
.wrapper {
flex:1;
overflow:auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Porfolio</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<header>
<h1>header</h1>
<p>header</p>
</header>
<div class="wrapper">
content
</div>
<footer>
footer
</footer>
</body>
</html>
or just footer is sticky ?, needs an extra imbrication
/* demo purpose */
.wrapper:hover:before {
content:'test';
display:block;
height:1000px;
}
/* end demo purpose*/html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body, main {
display: flex;
flex-flow: column;
}
header {
background-color: orange;
position: relative;
color: white;
text-align: left;
}
footer {
background-color: #202020;
color: white;
height: 60px;
bottom: 0;
}
.wrapper, main {
flex: 1;
}
main {
overflow: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Porfolio</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<main>
<header>
<h1>header</h1>
<p>header</p>
</header>
<div class="wrapper">
content
</div>
</main>
<footer>
footer
</footer>
</body>
</html>
footer {
background-color: #202020;
color: white;
//replace absolute with fixed for sticky footer (as in, it sticks at the bottom.)
position: fixed;
width: 100%;
height: 60px;
bottom: 0;
}
I saw this comment you posted on another answer:
If desktop only, then I would go with fixed positioning; however, iOS has problems rendering fixed positioning at times. – SergeantHacker
Try removing height 100% from body and html.
Here's a simple puzzle that's been frustrating me for a while today:
Consider this page markup:
<head>
<style type="text/css">
#wrapper { overflow: hidden; }
#content { width: 750px; height: 100px; background: orange; }
</style>
</head>
<body>
<div id="wrapper">
<div id="content">Foo bar</div>
</div>
</body>
How can I get div#content centered in the page regardless of viewport width?
I've tried a variety of tricks (including text-align: center; display: inline-block;) and absolute positioning, but with all of them the div#content is left-aligned when the browser window is brought under 750px in width.
I've seen a few high-profile websites do this in the past. For example on Apple.com when they advertised the new retina iPad: the iPad pictured was a very wide image that extended past the main page area (note it was not a CSS background image of the <body> element), but it didn't cause scrolling when the browser window only fit the main page content. Unfortunately I can't seem to find any existing sites that do this so I can't find a reference.
Thanks.
Is this it? Take a look -> http://jsfiddle.net/joplomacedo/CkvuG/
HTML
<div id="page">
<div id="main">
<div id="extended-out"><img src="http://myfreeipad.us.com/wp-content/uploads/2011/10/ipad.png" /></div>
</div>
</div>
CSS
#page {
overflow: hidden;
min-width: 200px; /*same as #mains width*/
}
#main{
position: relative;
height: 500px;
width: 200px;
margin: 0 auto;
background-color: lightgreen;
}
#extended-out {
height: 200px;
margin: 0 -100px;
background: indianred;
border: 1px solid red;
}
#extended-out img {
width: 100%; height: 100%;
}
http://jsfiddle.net/CNNcV/
<head>
<style type="text/css">
#wrapper { overflow: hidden; }
#content { width: 750px; height: 100px; background: orange;
margin:0px auto;
width:100%;}
</style>
</head>
<body>
<div id="wrapper">
<div id="content">Foo bar</div>
</div>
</body>
Is that what you're looking for?
Add margin: auto to this,
#content { width: 750px; height: 100px; background: orange; margin: auto}