I am having trouble preventing a DIV from wrapping to the next line when I shrink the browser window. There must be something small and simple I am missing, but I've been at it for a while now and I cannot figure it out. It appears to only kick down the "blog" div, but not the "info" div. Any suggestions?
Here is an example:
http://www.spynsycle.com/portfolio/
CSS:
/* Level 1 */
#container {
min-width: 800px;
width: 100%;
min-height: 768px;
height: 100%;
background-color: lightgrey;
}
/* Level 2 */
#portfolio {
min-width: 396px;
width: 40%;
min-height: 768px;
height: 100%;
float: left;
background-color:lightgreen;
}
#information {
min-width: 108px;
width: 20%;
min-height: 768px;
height: 100%;
float: left;
background-color: lightcoral;
}
#blog {
min-width: 396px;
width: 40%;
min-height: 768px;
height: 100%;
float: left;
background-color: lightblue;
}
HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Portfolio</title>
<link rel="stylesheet" href="css/index.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="portfolio">
Port
</div>
<div id="information">
Info
</div>
<div id="blog">
Blog
</div>
</div>
</body>
</html>
Because you're assigning min-width in pixels, as your page gets smaller, eventually you're running out of enough pixels to maintain the sum of your widths, and you browser is forcing your blog div to wrap. Your widths are totaling to 900px, so once the browser window dips below 900px you'll start seeing wrapping.
What's happening is eventually your min-width of 396px becomes larger than 40% of the browser width.
Related
I am trying to create a responsive image gallery (JSFiddle) with CSS Grid but when I add images to the grid elements, the images don't fill their entire size. I don't care about aspect ratio, I just want the image to fit exactly into the parent div while the size of the parent div remains the same (squared).
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100vh;
width: 100vw;
}
.view-container {
padding: 20px;
width: 70%;
margin: auto;
border: solid red;
display: flex;
justify-content: center;
}
.view-grid {
flex: 1 1 auto;
display: grid;
gap: 20px;
grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
list-style: none;
}
.grid-el-container {
width: min(300px, 100%);
padding-bottom: min(300px, 100%);
background: blue;
border: solid;
position: relative;
overflow: hidden;
border-radius: 20px;
}
.grid-el-content {
position: absolute;
background: lightblue;
overflow: hidden;
}
.grid-el-bg {
max-height: 100%;
max-width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>CSS Grid</title>
</head>
<body>
<div class="view-container">
<div class="view-grid">
<div class="grid-el-container">
<div class="grid-el-content">
<img src="https://cdn.pixabay.com/photo/2014/12/28/13/20/wordpress-581849_960_720.jpg" alt="villa" class="grid-el-bg">
</div>
</div>
<div class="grid-el-container"><div class="grid-el-content">Box 2</div></div>
<div class="grid-el-container"><div class="grid-el-content">Box 3</div></div>
<div class="grid-el-container"><div class="grid-el-content">Box 4</div></div>
<div class="grid-el-container"><div class="grid-el-content">Box 5</div></div>
</div>
</div>
</body>
</html>
There are 2 main problems here. The first is that the div containing the element doesn't take up its entire parent, so the image is already at 100% height and width. The second is that you're only setting the max height and width of the image, not the actual height and width.
Let's address the parent first. This can simply be solved by adding width: 100%; and height: 100%; to the parent div. If you only want the div to have 100% height and width if it has an image inside of it, you will probably have to write some JavaScript to handle that.
Now let's go to the actual image. Really it's a matter of adding the exact same thing here (width: 100% and height: 100%). This alone should resolve your issue, but there is one more thing I would like to add. I know you said you don't care about the aspect ratio, but, if you would rather the image be cut off than distorted, you can use object-fit: cover; here as well.
Here is a JSFiddle with the revised CSS
The completed CSS after the changes:
.grid-el-content {
position: absolute;
background: lightblue;
overflow: hidden;
width: 100%;
height: 100%;
}
.grid-el-bg {
max-width: 100%;
max-height: 100%;
width: 100%;
height: 100%;
object-fit: cover;
}
Try this:
.grid-el-bg {
object-fit: cover;
}
Remove min-width and min-height from this class.
Hi I'm trying to make a full height banner for my website's homepage. I want my banner to always take the full height of the window, wether on computer, ipad or iphones. Anyone could help would be much appreciated.
You can give height:100vh to the banner. So that it will cover the whole window.
if your banner contains only an image ,it can be done by:
<html>
<head>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}
.banner-div{
background-size: 100% 100%;
background-image: url(http://www.wefms.com/speedtest/hello.JPG);
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div class="banner-div">
<!--displays an image banner for full screen size-->
</div>
</body>
</html>
or it can be done by
<head>
<title></title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
.banner{
height: 100vh;
width: 100%;
background-color:lightblue;
}
.inner-div{
background-color: lightgreen;
width: 200px;
}
.normal-div{
height: 140vh;
width: 100%;
background-color: lightgreen;
}
</style>
</head>
<body>
<div class="banner">
<div class="inner-div">banner div for full screen height</div>
</div>
<div id="normal-div">
Normal division for 140 vh
</div>
</body>
or you can also use javascript
screen.height
to detect device screen height and you can assign it to a div
i made a new layout but there are sidebands or sidelines(i mean the scroll lines "when too much content" and you have to scroll a lot" but this side line is on the bottom in google chrome) appears at full viewport dont know why does it happens. if i change the wrap width from 100vw to 90 there will be white space on the right side which is not good.
Here is the image:
And here is my code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="wrap">
<div class="el2">header</div>
<div class="el1">left</div>
<div class="el3">
<div class="el5">pakk1</div>
<div class="el6">pakk1</div>
phakk
</div>
<div class="el4">footer</div>
</div>
</body>
</html>
* {
box-sizing: border-box;
}
.wrap {
width: 100vw;
height: 100vh;
background: grey;
}
.el2 {
width: 100vw;
height: 30vh;
background: #C2FF76;
}
.el1 {
width: 20vw;
height: 70vh;
background: blue;
float:left;
}
.el3 {
float:left;
width: 80vw;
height: 70vh;
background: red;
}
.el4 {
width: 100vw;
height: 13vh;
background: purple;
float:left;
}
.el5 {
width: 30vw;
height: 13vh;
background: green;
float:left;
}
.el6 {
width: 40vw;
height: 13vh;
background: green;
float:right;
}
If you hide the overflow on your top-most container this issue will go away.
.wrap {
overflow: hidden;
}
It's good to figure out why you have an overflow though so you can fix the underlying issue.
https://css-tricks.com/findingfixing-unintended-body-overflow/
Note: you can also only change the overflow for the X and Y axis
https://css-tricks.com/almanac/properties/o/overflow/
Bootstrap uses negative side margins on some elements, that's what causes your problem.
Just change all the vw values to % values (same numeric values) - these consider the "real width" of the parent elements.
https://codepen.io/anon/pen/MopXrq
Actually the problem was some of the boxes height : vh exceeded the limit.
I'd like to set the div height using percentages that do not depend on items in it.
I got a fixed header on the top of the screen and a centered div. But set height in percentages does not work. It enlarges only if I add some items in there.
Please help.
I have this code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>lol</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div id="conteiner">
<header>
<p>header</p>
</header>
<div id="main">
<p>main info</p>
</div>
</div>
</body>
</html>
And this CSS.
html{
width: 100%;
height: 100%;
}
body{
overflow: hidden;
margin: 0;
width: 100%;
height: 100%;
}
header{
position: fixed;
top: 0px;
width: 100%;
height: 10%;
border: solid red 1px;
}
#main{
display: block;
width: 65%;
height: 80%;
border: solid green 1px;
margin: 8% auto 0 auto;
}
You forgot to make it's parent 100% height too.
#conteiner has automatic height by default because its div block. And default height is height of its children. If parent's height isn't set manually, children height in percents are ignoring by browser
#conteiner {
height: 100%;
}
at your style file you have to write style for container div code like
#container{
height:100%;
}
I have a web page that is 960px wide. Inside this page there's a section with an image inside that I want pushed all the way to the right so it's half way outside the page. The attached image below will show you an example of what I would wan this to look like.
I would also like it if the image is in the background so if the browser window is small in width it would just keep covering the image.
Here's a couple sites that has this:
http://cpanel.com/products/
At cpanel you can see the iPad on that page is only half way displayed when the browser window is smaller than image.
Another website with this effect is Doteasy.com here's the URL:
http://www.doteasy.com/
If you scroll down to the middle of their page you will see the Site builder section which includes a screenshot of the software. Their page is 980px wide and you can see that the screenshot is halfway outside the page wrapper.
The image should be 552px widde by 315px high.
.container {
width: 960px;
height: auto;
margin: 0 auto;
background-color: yellow;
}
section {
width: 100%;
height: 508px;
background-color: blue;
}
.image {
width: 552px;
height: 315px;
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<title>Site Example</title>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
</head>
<body>
<section>
<h1>This is the Section</h1>
<div class="container">
<div class="image">This would be the image.</div>
</div>
</section>
</body>
</html>
I hope you guys are able to help !
Thanks.
You can position absolutely relative to the container like so:
Add position: relative; to the container
Add absolute positioning to the image position: absolute; top: 0; right: -276px; (The right value is half the image width)
overflow-x: hidden on the container will stop the extra half of the image from being visible.
section {
width: 100%;
height: 508px;
background-color: blue;
}
.container {
position: relative;
width: 960px;
height: 400px;
margin: 0 auto;
background-color: green;
overflow-x: hidden;
}
.image {
position: absolute;
top: 0;
right: -276px;
width: 552px;
height: 315px;
background-color: red;
}
<section>
<h1>This is the Section</h1>
<div class="container">
This is the container
<div class="image">This would be the image.</div>
</div>
</section>
This should work for you. I added position: relative to the .container and section, then position: absolute to the image container. You can then use left: 25% to adjust how far off screen you would like the image to be. The 25% can be adjusted according to your needs. You can also use px instead of percentages if that works better for your needs.
.container {
width: 960px;
height: auto;
margin: 0 auto;
position: relative;
}
section {
width: 100%;
height: 508px;
background-color: blue;
position: relative;
}
.image {
width: 552px;
height: 315px;
background-color: red;
position: absolute;
left: -25%; /* -- Adjust this percentage as needed -- */
}
<!DOCTYPE html>
<html>
<head>
<title>Site Example</title>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
</head>
<body>
<section>
<h1>This is the Section</h1>
<div class="container">
<div class="image">This would be the image.</div>
</div>
</section>
</body>
</html>