I have a basic webpage, but the html or body elements are too wide and they make a scrollbar pop up at the bottom. The width of the html/body tag stay at 980px. This happens in the Chrome dev tool. Pick the responsive resizer. The html/body wont resize below 980px. Im concerned small devices will get the scroll bar.
<html>
<head>
<style>
.con {
display: flex;
flex-direction: row;
width:95%; justify-content: space-around;
}
html { width: auto; }
#one {
background-color: white;
width:600px; height: auto;
}
#two {
background-color: #aaa;
width: 500px; height:300px;
}
img { width:100%; }
#media (max-width: 1099px) {
.con {
flex-direction: column;
}
#one, #two { width:95%; margin: 0 auto; }
}
</style>
</head>
<body>
<div class="con">
<div id="one"><img src="images/backwide.jpg"></div>
<div id="two"><h1>Hello world</h1></div>
</div>
</body>
</html>
I tried setting the width of the html, I tried setting the width of the body too, but nothing worked. I am trying to keep the page neat. I understand that these elements are too wide, but they are unresponsive. This happens in Chrome's F12 responsize resizer tool.
Try to edit like that.
#one {
background-color: white;
max-width: 600px;
width: 100%;
height: auto;
float: left;
}
#two {
background-color: #aaa;
max-width: 500px;
width: 100%;
height: 300px;
float: left;
}
the simple method is to use max-width outside of the html elements so they will not make any scroll.I have added the wraper for all the body elements.
<html>
<head>
<style>
.con {
display: flex;
flex-direction: row;
width:95%; justify-content: space-around;
}
.my-wraper{max-width:100%; width:100%; height:auto;}
html { width: auto; }
#one {
background-color: white;
width:600px; height: auto;
}
#two {
background-color: #aaa;
width: 500px; height:300px;
}
img { width:100%; }
#media (max-width: 1099px) {
.con {
flex-direction: column;
}
#one, #two { width:95%; margin: 0 auto; }
}
</style>
</head>
<body>
<div class="my-wraper">
<div class="con">
<div id="one"><img src="images/backwide.jpg"/></div>
<div id="two"><h1>Hello world</h1></div>
</div>
</div>
</body>
</html>
Related
I want to make 3 column layout with flex box. The goal is to make first and last div widths dynamic. But the 2nd div max-width is static.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html, body{
min-height: 100% !important;
height: 100%;
}
body{
margin: 0;
background-color: #ddd;
display: flex;
justify-content: space-between;
}
.left , .center, .right{
height: 100%;
}
.left{
width: auto;
background-color: antiquewhite;
}
.center{
display: flex;
min-height: 100vh;
flex-direction: column;
width: 100%;
max-width: 1200px;
background-color: green;
}
.right{
width: auto;
background-color: blue;
}
</style>
</head>
<body>
<div class="left">
</div>
<div class="center">
</div>
<div class="right">
</div>
</body>
</html>
Now I am getting the center max width is constant that I expected. But left & right div's not appear always. I want to make right & left div appear with dynamic width that based on browser window size.
Update - current layout:
Expected layout:
How can I make it work?
Here you go.
Just apply flex:1 to all of the divs but flex: 1 0 100%; to the center div so it defaults to as wide as it can before hitting the max-width you wanted.
html,
body {
min-height: 100% !important;
height: 100%;
}
body {
margin: 0;
background-color: #ddd;
display: flex;
}
.left,
.center,
.right {
flex: 1;
height: 100%;
}
.left {
width: auto;
background-color: red
}
.center {
display: flex;
min-height: 100vh;
flex-direction: column;
flex: 1 0 100%;
width: 100%;
max-width: 1200px;
background-color: green;
}
.right {
width: auto;
background-color: blue;
}
<div class="left">
</div>
<div class="center">
</div>
<div class="right">
</div>
does this help?
.flex-container {
display: flex;
justify-content: space-between;
background-color: DodgerBlue;
}
.flex-container > .side {
background-color: green;
width: 100%;
}
.flex-container > .center {
background-color: #f1f1f1;
color: green;
max-width: : 100%;
height: 100px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="flex-container">
<div class="side"></div>
<div class="center">
this will expand as your content grows
</div>
<div class="side"></div>
</div>
</body>
</html>
I can't seem to get the red div stack on top of the blue when the width gets to the specified width from the #media declaration.
.descleft {
background-color:blue;
float: right;
width: 250px;
min-height: 50px;
}
.descright {
overflow: hidden;
min-height: 50px;
background-color:red;
}
#media (max-width:700px) {
.descleft{
width:100%;
}
.descright{
width:100%;
}
}
<div class="descleft"></div>
<div class="descright"></div>
http://jsfiddle.net/SpSjL/6580/
I think the easiest way to accomplish what you want is using flexbox. Here is how I was able to implement it:
HTML
<div class="container">
<div class="descright"></div>
<div class="descleft"></div>
</div>
CSS
.container {
display: flex;
}
.descleft {
background-color:blue;
width: 250px;
min-height: 50px;
}
.descright {
overflow: hidden;
min-height: 50px;
background-color:red;
width: 100%;
}
#media (max-width:700px) {
.container {
flex-direction: column;
}
.descleft {
width:100%;
}
.descright {
width:100%;
}
}
You can find a working demo here: http://jsfiddle.net/SpSjL/6631/
For more information about flexbox check this MDN links: https://developer.mozilla.org/en-US/docs/Glossary/Flexbox
I'm experimenting with Flexbox a bit and I was wondering whether there is a property, such as flex: 1, that allows the height of an element to be 100% of the page height without adding scroll bars to scroll down. If I was to resize it, it would stick and not add scroll bars. I hope you understand. I added a fiddle with height just set at 1000px and I was hoping if any of you guys/girls would know how to set it to be 100% of the page.
https://jsfiddle.net/mL594h73/
HTML:
<div class="wrapper">
<div class="box-1"></div>
<div class="box-2"></div>
</div>
CSS:
.wrapper {
display: flex;
}
.box-1 {
flex: 1;
width: 200px;
height: 1000px;
background-color`enter code here`: #2ABB9B;
}
.box-2 {
flex: 1;
width: 200px;
height: 1000px;
background-color: #16A085;
}
use height:100vh in .wrapper and remove default margin from body
body {
margin: 0
}
.wrapper {
display: flex;
height: 100vh
}
.wrapper>div {
flex: 1;
width: 200px;
}
.box-1 {
background-color: #2ABB9B;
}
.box-2 {
background-color: #16A085;
}
<div class="wrapper">
<div class="box-1"></div>
<div class="box-2"></div>
</div>
Just remove the default margin from the body and add min-height to your parent div wrapper like this:
body {
margin: 0px;
}
.wrapper {
min-height: 100%;
display: flex;
}
Maybe an alternative is to set a ´position:absolute´ to get height:100% working properly. Also you can set display:table for the main container, and display:table-cell to containers inside to fit the height:100%
.wrapper {
display:table;
position:absolute;
width:100%;
height:100%;
}
.box-1 {
display:table-cell;
vertical-align:middle;
text-align:center;
width: 200px;
background-color: #2ABB9B;
}
.box-2 {
display:table-cell;
vertical-align:middle;
text-align:center;
width: 200px;
background-color: #16A085;
}
Example working: https://jsfiddle.net/mL594h73/1/
I have a couple divs, placed side by side and using a media query to stack them, which they do stack but I need the yellow one to be on top and the blue below it. So opposite of what you see when the script is ran and not sure on how to do it.
#wrapper {
width:1000px;
}
#mydivLeft {
background:blue;
height:250px;
width:50%;
float:left;
}
#mydivRight {
background:yellow;
height:250px;
width:50%;
float:right;
}
#media only screen and (max-width:768px){
#wrapper {
width:100%;
}
#mydivRight, #mydivLeft {
display:block;
float:none;
width:100%;
}
}
<body>
<div id="wrapper">
<div id="mydivLeft">
</div>
<div id="mydivRight">
</div>
</div>
</body>
you can use flexbox using order to reverse the order of how the elements are stacked
#wrapper {
width: 1000px;
max-width: 100%;
display: flex;
flex-wrap: wrap;
height: 250px;
}
#wrapper div {
flex: 1;
}
#mydivLeft {
background: blue;
}
#mydivRight {
background: yellow;
}
#media only screen and (max-width: 768px) {
#wrapper div {
flex: 0 100%
}
#mydivRight {
order: -1
}
}
<body>
<div id="wrapper">
<div id="mydivLeft">
</div>
<div id="mydivRight">
</div>
</div>
</body>
You can use flexbox layout. By default the flex-direction is row, in the media queries change it to column-reverse.
#wrapper {
max-width: 1000px;
display: flex;
}
#mydivLeft, #mydivRight {
flex: 1;
height: 250px;
}
#mydivLeft {
background: blue;
}
#mydivRight {
background: yellow;
}
#media only screen and (max-width: 768px) {
#wrapper {
flex-direction: column-reverse;
}
}
<div id="wrapper">
<div id="mydivLeft"></div>
<div id="mydivRight"></div>
</div>
You can just reverse the order of the divs in the HTML to be whatever order you want them to be.
#wrapper {
width:1000px;
}
#mydivLeft {
background:blue;
height:250px;
width:50%;
float:left;
}
#mydivRight {
background:yellow;
height:250px;
width:50%;
float:right;
}
#media only screen and (max-width:768px){
#wrapper {
width:100%;
}
#mydivRight, #mydivLeft {
display:block;
float:none;
width:100%;
}
}
<div id="wrapper">
<div id="mydivRight">
</div>
<div id="mydivLeft">
</div>
</div>
Alternatively, a more complicated solution is to use flexbox, and use the order property or flex-direction: column-reverse; to re-order the flex children.
#wrapper {
width: 1000px;
display: flex;
}
#wrapper > div {
width: 50%;
height: 250px;
}
#mydivLeft {
background: blue;
}
#mydivRight {
background: yellow;
}
#media only screen and (max-width:768px) {
#wrapper {
width: auto;
flex-direction: column-reverse;
}
#wrapper > div {
width: auto;
}
}
<div id="wrapper">
<div id="mydivLeft">
</div>
<div id="mydivRight">
</div>
</div>
I have 2 div's in parent wrapper. I would like to make the following:
these 2 divs share 100% space in width, so there is no gap between them, everything is red color.
When you scale the wrapper down, div b falls into new line below div a (this behaves as it should), but in this case I want both divs to be 100% width, so they make 2 lines of red color.
Is it possible to do this just with css (no tables!) and no additional elements?
Making wrapper background color red to compensate for this is not the solution.
<div class="wrapper">
<div class="a">left</div>
<div class="b">right</div>
</div>
http://jsfiddle.net/EAkLb/75/
Just change the CSS to width:50%; for both a and b, add a media query to set them to 100% at smaller viewports.
.wrapper{
position: relative;
max-width: 400px;
height:30px;
background-color: #fff;
}
.a{
float: left;
background-color: red;
text-align: left;
width:50%;
height:30px;
}
.b{
float: right;
background-color: red;
text-align: right;
width:50%;
height:30px;
}
#media screen and (max-width: 500px) {
.a, .b {
width: 100%;
}
}
<div class="wrapper">
<div class="a">left</div>
<div class="b">right</div>
</div>
Flexbox can do that:
JsFiddle demo
.wrapper {
position: relative;
max-width: 400px;
height: 30px;
background-color: #fff;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.a {
background-color: red;
text-align: left;
flex: 0 0 110px;
height: 30px;
}
.b {
background-color: red;
text-align: right;
flex: 0 0 120px;
height: 30px;
}
#media screen and (max-width: 400px) {
.a,
.b {
flex: 1 0 100%;
}
}
<div class="wrapper">
<div class="a">left</div>
<div class="b">right</div>
</div>
Consider you are using CSS media queries, you can simply change the width and the css float property of your divs. It's not the modern way, but it's work.
.wrapper{
position: relative;
max-width: 400px;
height:30px;
background-color: #fff;
}
.a, .b {
float: left;
width: 50%;
}
.a{
background-color: red;
text-align: left;
height:30px;
}
.b{
background-color: red;
text-align: right;
height:30px;
}
#media screen and ( max-width: 400px ) {
.a, .b {
float: none;
width: 100%;
}
}
The beauty of flex is that mediaqueries can often be avoided.
Using a combination of flex with min-width and flex-wrap we can achieve the desired effect without a media query.
.wrapper{
position: relative;
max-width: 400px;
height:30px;
background-color: #fff;
display: flex;
flex-wrap: wrap;
}
.child {
flex-grow: 1;
background-color: red;
height:30px;
}
.a{
min-width:110px;
text-align: left;
}
.b{
min-width:120px;
text-align: right;
}
<div class="wrapper">
<div class="child a">left</div>
<div class="child b">right</div>
</div>
Here's a JSFiddle.
My solution uses also Flex - but I use a min-width attr. to tell the flex container when to switch to 2 lines
.wrapper{
position: relative;
max-width: 100%;
height:30px;
background-color: #fff;
display: flex;
flex-wrap:wrap ;
}
.a,.b {
background-color: red;
width:50%;
min-width:130px;
height:30px;
flex-grow:1;
flex-shrink:0;
flex-basis:50%
}
.b {
background-color:green;
text-align:right;
}
fiddle
use the slider to make the window smaller
I used green as back for the 'b' element