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>
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 have a flex container, and in that container, I have a bunch of images. Using flexwrap, and a flex-item width of 33%, this presents the images nicely ... in Chrome (that is, they maintain their aspect ratios). In Safari, however, the images get stretched in the vertical direction which looks terrible.
Is there a fix for this?
(Note: For the code snippet below, you will have to open this post in both Chrome and Safari to see what I am talking about)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<img src='https://swipestack.s3.amazonaws.com/s/q/1.jpg' alt='1'>
<img src='https://swipestack.s3.amazonaws.com/s/q/2.jpg' alt='2'>
<img src='https://swipestack.s3.amazonaws.com/s/q/3.jpg' alt='3'>
<img src='https://swipestack.s3.amazonaws.com/s/q/4.jpg' alt='4'>
<img src='https://swipestack.s3.amazonaws.com/s/q/5.jpg' alt='5'>
<img src='https://swipestack.s3.amazonaws.com/s/q/6.jpg' alt='6'>
<img src='https://swipestack.s3.amazonaws.com/s/q/7.jpg' alt='7'>
<img src='https://swipestack.s3.amazonaws.com/s/q/8.jpg' alt='8'>
</div>
</body>
<style>
.container{
display: flex;
flex-wrap: wrap;
overflow: auto;
width: 400px;
height: 550px;
padding: 10px;
background-color: green;
}
.container > * {
width: 33.33333%;
}
</style>
</html>
you can try this, which works only if you give the first and second images the same height of 475px as the others :
<style>
.container {
width: 400px;
height: 550px;
padding: 10px;
background-color: green;
overflow: auto;
}
.container:first-child {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
.container > * {
width: 33.33333%;
height: auto;
}
</style>
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>
Here is my HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>A+Tec</title>
<style type="text/css" >
* {
margin: 0px;
padding: 0px;
}
#wrapper {
width: 100%;
height: auto;
background-color: #ABEBC1;
position: fixed;
}
#nav {
width: 720px;
height: auto;
margin: auto;
}
.buttons {
height: 25x;
width: 150px;
background-color: #ABEBFF;
background-repeat: repeat-x;
float: left;
margin: 0px 10px;
text-align: center;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="nav">
<div class="buttons">
</div>
<div class="buttons">2</div>
<div class="buttons">3</div>
<div class="buttons">4</div>
<div class="buttons">5</div>
<div class="buttons">6</div>
</div>
</div>
</body>
</html>
I have the wrapper with the divs inside. There is clearly enough space for all the divs yet one of them overflows to next line as in picture:
I have no idea what is wrong but the div with 6 in it has overflowed onto the next line but the wrapper is plenty big enough to accomodate it. Can you please help me?
Thanks
I'd like to create a layout that acts like a titlebar from iphone:
I tried to put together the following example, but I'm not sure how to get the middle column to expand in width so it uses all left over space. I can do this in javascript at runtime, but wondering if there's a css solution. Here it is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style type="text/css">
html, body {
margin: 0px;
padding: 0px;
}
#parent {
background-color: #eee;
width: 100%;
}
#colLeft {
background-color: #ff8b8b;
height: 48px;
display: inline;
}
#colMiddle {
background-color: #c9ffc3;
height: 48px;
display: inline;
text-align: center;
}
#colRight {
background-color: #c3d0ff;
height: 48px;
display: inline;
}
</style>
</head>
<body>
<div id="parent" style="width:100%">
<div id="colLeft">left</div>
<div id="colMiddle">title</div>
<div id="colRight">right</div>
</div>
</body>
</html>
Thank you
A simpler way to approach this is to use an HTML structure like this:
<div id="parent" style="width:100%">
<div id="colLeft">left</div>
title
<div id="colRight">right</div>
<div>
Float the left and right divs to the appropriate sides and set the text align on the parent to center. Any styles from the middle div for text, etc can be applied to the parent.
I'm a bit late in the answer, but see if this is more like what you need, without the need to sacrifice the middle <div>:
You'll have to float the 3 columns and make the inner column have a 100% width. Then, setting the inner column's margin (based on left and right columns' widths), you achieve the result.
Have a look at this fiddle: http://jsfiddle.net/fabio_silva/d7SFJ/
The HTML/CSS:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style type="text/css">
html, body {
margin: 0px;
padding: 0px;
}
#parent {
background-color: #eee;
width: 100%;
}
#colLeft {
background-color: #ff8b8b;
height: 48px;
width: 100px;
float: left;
}
#colMiddle {
height: 48px;
text-align: center;
float: left;
width: 100%;
margin-left: -100px; /* negative colLeft width */
margin-right: -150px; /* negative colRight width */
}
#colMiddleInner
{
margin-left: 100px;
margin-right: 150px;
height: 48px;
background: #c9ffc3;
}
#colRight {
background-color: #c3d0ff;
height: 48px;
width: 150px;
float: left;
}
</style>
</head>
<body>
<div id="parent" style="width:100%">
<div id="colLeft">left</div>
<div id="colMiddle">
<div id="colMiddleInner">
title
</div>
</div>
<div id="colRight">right</div>
</div>
</body>
</html>
You need to define the widths...
#colLeft {
background-color: #ff8b8b;
height: 48px;
width: 50px
display: inline;
}
#colMiddle {
background-color: #c9ffc3;
height: 48px;
display: inline;
width: auto;
text-align: center;
}
#colRight {
background-color: #c3d0ff;
height: 48px;
width: 50px;
display: inline;
}
Note: default value for width is auto.