Chrome is normal，Safari failure。How can that be compatible? height:100%;
I need to keep Chrome and use Safari. My Safari version 10.1.2 (12603.3.8)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
}
* ::-webkit-scrollbar {
width: 0;
}
html, body {
height: 100%;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: column;
}
body {
border: 5px solid red;
}
.d {
height: 100%;
border: 5px solid green;
}
<div class="d"></div>
<div class="d"></div>
Seems like a recent Safari rendering bug involving flex-direction: column. You're putting two height: 100% elements into the same space, and they're both rendering at 100% height and stacking instead of fitting into the same space.
Here are two solutions:
Change height: 100% to height: 50% so both elements are half the height of their parent, or...
Remove the height attribute and add flex: 1 so both children grow as large as they can in the parent's space, and split themselves 50/50 automatically.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
}
*::-webkit-scrollbar {
width: 0;
}
html,
body {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
}
body {
border: 5px solid red;
}
.d {
height: 50%;
border: 5px solid green;
}
<div class="d"></div>
<div class="d"></div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
}
*::-webkit-scrollbar {
width: 0;
}
html,
body {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
}
body {
border: 5px solid red;
}
.d {
flex: 1;
border: 5px solid green;
}
<div class="d"></div>
<div class="d"></div>
Related
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 1 year ago.
I want to create three colored boxes inside a box, here is the HTML/CSS code. When I inspect my code in browser the width would fit the parent box however the last colored box still position itself below the other boxes which should not happen.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 1000px;
height: 500px;
border: 10px solid black;
margin: 0 auto;
}
.green {
display: inline-block;
box-sizing: border-box;
width: 33.3333%;
height: 400px;
padding: 20px;
background-color: green;
}
.red {
display: inline-block;
box-sizing: border-box;
width: 33.3333%;
height: 400px;
padding: 20px;
background-color: red;
}
.blue {
display: inline-block;
box-sizing: border-box;
width: 33.3333%;
height: 400px;
padding: 20px;
background-color: blue;
}
<div class="container">
<div class="box green"></div>
<div class="box red"></div>
<div class="box blue"></div>
</div>
Because inline elements are sensitive to the white space in your code. Just remove it:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 1000px;
height: 500px;
border: 10px solid black;
margin: 0 auto;
}
.green {
display: inline-block;
box-sizing: border-box;
width: 33.3333%;
height: 400px;
padding: 20px;
background-color: green;
}
.red {
display: inline-block;
box-sizing: border-box;
width: 33.3333%;
height: 400px;
padding: 20px;
background-color: red;
}
.blue {
display: inline-block;
box-sizing: border-box;
width: 33.3333%;
height: 400px;
padding: 20px;
background-color: blue;
}
<div class="container">
<div class="box green"></div><div class="box red"></div><div class="box blue"></div>
</div>
I applied display: block to my other divs but my image is displayed in front. I thought display: block would force a line break. Why is my image in front?
https://codepen.io/El_Escandalo/pen/PoPzXPZ?editors=1100
That's because your .container div is limited to height: 200px;. Erase that to allow its height to adjust to the contents, and your image container will be below it.
You've got an extra closed after container C.
* {
padding: 0;
margin: 0;
}
.container {
height: 200px;
text-align: center;
padding: none;
}
.a {
height: 100px;
width: 33%;
background: red;
display: block;
padding: none;
border: 10px solid purple;
box-sizing: border-box;
}
.b {
height: 100px;
width: 33%;
background: green;
display: block;
padding: none;
border: 10px solid purple;
box-sizing: border-box;
}
.c {
height: 100px;
width: 33%;
background: blue;
display: block;
padding: none;
border: 10px solid purple;
box-sizing: border-box;
}
.d {
border: 25px solid pink;
margin: 0 auto;
width: 75vw;
height: auto;
text-align: center;
}
.d img {
width: 100%;
}
<div class="container">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="img-cont">
<div class="d">
<img src="https://cdn.pixabay.com/photo/2020/03/26/10/51/norway-4970019_1280.jpg" alt="view">
</div>
</div>
I am trying to build a layout with a menubar and a main container that includes a searchbar, left sidebar, and a results table.
I want the main container to always be as tall as possible for the window and the left sidebar and results table to also be as tall as possible within the main container.
This is how this would look with fixed heights on everything:
https://jsfiddle.net/m45cakne/1/
<div class="menubar"></div>
<div class="main-section">
<div class="searchbar">
</div>
<div class="section-content">
<div class="sidebar"></div>
<div class="results-table"></div>
</div>
</div>
* {
box-sizing: border-box;
}
html, body {
height: 100%;
}
.menubar {
height: 50px;
border: 1px solid black;
}
.main-section {
border: 1px solid black;
margin-top: 20px;
height: 600px;
}
.searchbar {
border: 1px solid black;
margin: 20px;
height: 50px;
}
.section-content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding-right: 25px;
padding-left: 25px;
flex: 1;
}
.sidebar {
-webkit-box-flex: 0;
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%;
border: 1px solid black;
position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
height: 490px;
}
.results-table {
-webkit-box-flex: 0;
-ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%;
position: relative;
width: 100%;
min-height: 1px;
border: 1px solid black;
height: 490px;
padding: 0px;
}
The menubar height can change as the page is viewed on different devices, and the searchbar height can also change as it is filled with search terms.
What would be the right method to build this responsive layout with CSS?
Just use flex properties all the way through:
body {
display: flex;
flex-direction: column;
height: 100vh;
margin: 0;
}
.menubar {
flex: 0 0 50px;
border: 1px solid black;
}
.main-section {
flex: 1;
display: flex;
flex-direction: column;
border: 1px solid black;
margin-top: 20px;
padding: 25px;
}
.searchbar {
flex: 0 0 50px;
margin-bottom: 20px;
border: 1px solid black;
}
.section-content {
flex: 1;
display: flex;
flex-wrap: wrap;
}
.sidebar {
flex: 0 0 25%;
border: 1px solid black;
}
.results-table {
flex: 1;
border: 1px solid black;
}
* {
box-sizing: border-box;
}
<div class="menubar">menu bar</div>
<div class="main-section">main container
<div class="searchbar">search bar</div>
<div class="section-content">
<div class="sidebar">side bar</div>
<div class="results-table">results table</div>
</div>
</div>
jsFiddle demo
I have a list with dynamically-populated items, I need it to be wider than its absolutely-positioned parent (it's a custom <select> element implementation).
#wrapper {
position: relative;
border: 1px dashed black;
width: 300px;
margin: 0 auto;
}
#testContainer {
display: inline-flex;
position: absolute;
right: 0px;
background-color: fuchsia;
list-style: none;
padding: 0;
border: 5px dashed orange;
}
#testLabel {
width: 300px;
background-color: yellow;
}
.testItem {
width: 200px;
height: 50px;
background-color: #aaa;
}
<div id="wrapper">
<div id="testLabel">label</div>
<ul id="testContainer">
<li class="testItem">aaaaaaaaaaaaaaaaaaaaaaaaaaapppppppppp</li>
<li class="testItem">www</li>
<li class="testItem">cccccccccccccccccc</li>
</ul>
</div>
It works everywhere (screenshot 1) except IE11 (screenshot 2). How can I achieve this? Here's a Codepen: https://codepen.io/montrealist/pen/VrrYem
you can do like this :
use display:flex instead of inline-flex in #testContainer
use width: calc(50vw - 50%)
[optional for tablet/mobile] - use left:-50% and width: calc(100vw - 50%)
use flex: 1 instead of width:200px in .testIem
to avoid overlapping letters (in IE at least) use word-wrap: break-word
#wrapper {
position: relative;
border: 1px dashed black;
width: 300px;
margin: 0 auto;
}
#testContainer {
display: flex;
position: absolute;
right: 0;
background-color: fuchsia;
list-style: none;
padding: 0;
border: 5px dashed orange;
width: calc(50vw - 50%)
}
#testLabel {
width: 300px;
background-color: yellow;
}
.testItem {
flex: 1;
height: 50px;
background-color: #aaa;
word-wrap: break-word
}
#media (max-width: 800px) {
#testContainer {
right: auto;
left: -50%;
width: calc(100vw - 50%)
}
}
<div id="wrapper">
<div id="testLabel">label</div>
<ul id="testContainer">
<li class="testItem">aaaaaaaaaaaaaaaaaaaaaaaaaaapppppppppp</li>
<li class="testItem">www</li>
<li class="testItem">cccccccccccccccccc</li>
</ul>
</div>
Let's work without the flex, as our grandfathers taught us!
#wrapper {
border: 1px dashed black;
margin: 0 auto;
position: relative;
width: 300px;
}
#testLabel {
background: yellow;
}
#testContainer {
background: fuchsia;
border: 5px dashed orange;
font-size: 0;
list-style: none;
padding: 0;
position: absolute;
right: 0;
white-space: nowrap;
}
.testItem {
background: #aaa;
display: inline-block;
font-size: 16px;
height: 50px;
min-width: 200px;
}
<div id="wrapper">
<div id="testLabel">label</div>
<ul id="testContainer">
<li class="testItem">aaaaaaaaaaaaaaaaaaaaaaaaaaapppppppppp</li>
<li class="testItem">www</li>
<li class="testItem">cccccccccccccccccc</li>
</ul>
</div>
Unless i'm understanding this wrong, I would simply add an overflow-x: auto; to the css for your #testContainer.
This will allow your List Items to be fully viewed the way they should be, just with the user having to scroll instead.
So just:
#testContainer {
display: flex;
position: absolute;
right: 0;
background-color: fuchsia;
list-style: none;
overflow-x: auto; /* Added this here */
padding: 0;
border: 5px dashed orange;
width: calc(50vw - 50%)
}
I am working on a page redesign that contains 3 divs and I want to make it responsive.
The problem I face is that the divs for large screen are arranged in the order 1,2,3. For responsive design however, I want to change the order to 1,3,2:
I tried different approaches like changing position to relative/absolute/static or changing the divs order with alternative CSS code but nothing proved to work so far.
Any ideas how I can achieve this?
.one {
float: left;
width: 150px;
border: solid 2px #eaeaea;
position: relative;
z-index: 0;
margin-bottom: 20px;
height: 100px;
}
.two {
float: left;
margin: 0 0 0 24px;
width: 150px;
border: solid 2px #eaeaea;
height: 100px;
}
.three {
float: left;
width: 900px;
border: solid 2px #eaeaea;
height: 100px;
}
#media only screen and (max-width: 500px) {
.one {
width: 93%;
padding: 3%;
}
.two {
width: 100%;
margin-left: 0px;
}
.three {
width: 100%;
margin: 0px;
}
}
<div class="one">Content1</div>
<div class="two">Content2</div>
<div class="three">Content3</div>
<div class="500markup">This box is 500px</div>
JSFIDDLE HERE
https://jsfiddle.net/fehrda1c/4/
<div class="container">
<div id="one">Content1</div><!--
!--><div id="three">Content3</div>
<div id="two">Content2</div>
</div>
.container {
padding: 5px;
position: relative;
}
#one, #two {
width: 50%;
display: inline-block;
box-sizing: border-box;
}
#two {
position: absolute;
top: 0;
right: 0;
}
#one {
position: absolute;
top: 0;
left: 0;
}
#three {
position: absolute;
top: 200px;
left: 0;
box-sizing: border-box;
}
#one, #two, #three {
margin: 0;
height: 200px;
border: 1px solid black;
}
#three {
width: 100%;
}
#media (max-width: 600px) {
#one, #two, #three {
width: 100%;
position: initial;
top: default;
}
}
This can be achieved using flexbox:
Contain the divs in a #container set to display: flex; this will tell the child divs to use the flexbox model
Add flex: 1; to .one and .two to tell them to grow if required
Add flex-basis: 100%; to .three to ensure it takes up the full width of the container
Add order: *n*; to .one, .two and .three to give them the desired order when they adapt to the smaller screen size
#container {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.one {
border: solid 2px #eaeaea;
flex: 1;
height: 100px;
margin-bottom: 20px;
}
.two {
border: solid 2px #eaeaea;
flex: 1;
height: 100px;
margin-bottom: 20px;
}
.three {
border: solid 2px #eaeaea;
flex-basis: 100%;
height: 100px;
margin-bottom: 20px;
}
#media only screen and (max-width: 500px) {
.one {
flex-basis: 100%;
order: 1;
}
.two {
flex-basis: 100%;
order: 3;
}
.three {
flex-basis: 100%;
order: 2;
}
}
<div id="container">
<div class="one">Content1</div>
<div class="two">Content2</div>
<div class="three">Content3</div>
</div>
Flexbox can do this.
JSfiddle Demo
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.container div {
height: 150px;
border: 1px solid red;
margin-bottom: 10px;
}
.container {
padding: 5px;
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 500px;
border: 1px solid grey;
}
#one,
#two {
width: 220px;
}
#three {
width: 500px;
}
#media (max-width: 600px) {
#one {
order: 1;
width: 500px;
}
#two {
order: 3;
width: 500px;
}
#three {
order: 2;
}
<div class="container">
<div id="one">Content1</div>
<div id="two">Content2</div>
<div id="three">Content3</div>
</div>
You can do like following:
#media only screen and (max-width:500px)
{
.one{width: 93%; padding: 3%;}
.two{width: 100%; margin-left: 0px; margin-bottom: 10px; position:absolute; top:320px;}
.three{width: 100%; margin: 0px;}
}
Check Fiddle Here.