A have a <section> and <article>s. I would like to move all <article> elements and resize to width 100%, when user resizes browser. I try to do it with flex-box. Here is what I want to achieve
JSFiddle here
section, article {
display: box;
}
article {
background: red;
margin: 10px;
display:-moz-box; /* Firefox */
display:-webkit-box; /* Safari and Chrome */
display:-ms-flexbox; /* Internet Explorer 10 */
display:box;
max-width: 300px;
min-width: 50px;
padding: 20px;
width: 100%;
overflow: hidden;
}
section {
display: -moz-box-flex;
background: blue;
}
Remove the max-width you have set on them.
Updated jsFiddle - I removed the left/right margins.
Related
In one of my website pages, I would like to add a picture with a dynamic size.
To do this, I follow the excellent tutorial of W3school : link
This method works perfectly on Safari and Chrome; but gives me an error on firefox..
Doing the analysis of the containers sizes, I thought the calculation seems to be different..
First, here is the Chrome and Safari method:
Red block has a width of 50% (respect to the blue one)
Red block has a height of 40% (because we also use the width of the blue one as basis for % calculation)
Then, in firefox it gives me this result :
Red block has a width of 50% (respect to the blue one)
Red block has a height of 40% of the height of the blue one, and not 40% of his parent width !
body {
background-color: blue;
}
.home_box {
margin: auto;
margin-bottom: 40px;
width: 90%;
display: -webkit-box;
/* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;
/* OLD - Firefox 19 */
display: -ms-flexbox;
/* TWEENER - IE 10 */
display: -webkit-flex;
/* NEW - Chrome */
display: flex;
flex-direction: row;
}
#home_picture {
width: 32%;
height: 0px;
padding-top: 18.1%;
background-color: red;
/*background: url('../Img/picture.jpg') no-repeat;
background-size: contain;*/
}
.home_box p {
width: 68%;
}
<div class="home_box">
<div id="home_picture"></div>
<p>Lorem ipsum</p>
</div>
Could you help fixed this issue please ?
Perhaps it's a problem with your Firefox version. When I run this code (slightly tweaked from yours and shown below) on Firefox 72 I get an output shown in the image below, same as what I get in old Microsoft Edge, Chromium-based Edge and Safari. Is the output correct?
body{
background-color: blue;
}
.home_box
{
margin: auto;
margin-bottom: 40px;
width: 90%;
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19 */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex;
flex-direction: row;
}
#home_picture
{
width: 32%;
height: 0px;
padding-top: 18.1%;
background-color: red;
background-size: contain;
}
.home_box p
{
width: 68%;
}
<div class="home_box">
<div id="home_picture"></div>
</div>
Here is a jsfiddle containing basic html and css for what I'm trying to do.
Here is my html:
#mother {
width: 100%;
height: 100vh;
background-color: white;
}
#header,
#footer {
width: 100%;
height: 20px;
background-color: pink;
}
#title {
width: 100%;
background-color: grey;
}
#main {
width: 100%;
background-color: cyan;
}
<div id="mother">
<div id="header">
</div>
<div id="title">
Title content of indeterminate length
</div>
<div id="main">
Main body content of indeterminate length
</div>
<div id="footer">
</div>
</div>
I am trying to create a website which will fill 100% of the window height and no more.
The layout needs to consist of 4 sections:
- header
- title
- main
- footer
The header and footer have a fixed height. The title and main will have content of unknown length.
My ideal behaviour would be for the title container to shrink to fit its content, and the main container to expand to fill the remaining available space before the footer. There will be divs within the main container which will need to be sized to 100% of its height.
The use of absolutely positioned elements or tables is acceptable as long as it has IE support (only need to support most recent version, but support for older versions would be amazing).
Try using Flexbox.
The flex:1 means it will fill as much space as it can. So leaving the title without flex:1 allows it to shrink to fit its content.
Also, don't forget to use all the prefixes required for your browser support.
http://shouldiprefix.com/
Here's the jsfiddle
html, body{
height:100%;
}
#mother {
width: 100%;
height: 100vh;
background-color: white;
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
flex-direction:column;
}
#header, #footer {
width: 100%;
height: 20px;
background-color: pink;
}
#title {
width: 100%;
background-color: grey;
}
#main {
width: 100%;
background-color: cyan;
flex:1;
}
You can use calc in css3.
Include title in main and give height to main content using calc .
#main{
height: calc(100% - 40px);
}
Title and the inner content should place inside the main.
I'd like to place an <img> with known width and height to the left, a <div> with known width and height to the right, and a <div> that will fill up the width in between the above <img> and <div> and flexibly stretch in height depending on the content. How can I achieve this without Javascript?
You can use a flexBox model to archieve this, this is a css3 module soported by all modern browser and some old browser with polyfill.
this is an example of this.
.container {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.fixedWidth {
width: 100px;
height: 100px;
margin-right: 20px
}
.flexibleDiv {
-webkit-box-flex: 1;
-moz-box-flex: 1;
width: 80%;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
http://fiddle.jshell.net/2y1c5deL/
This is a Flexbox polyfill
https://github.com/doctyper/flexie
You don't need flexbox for this. You can position the <img> and <div> left and right by applying respective float value and stretch the middle <div> by applying position absolute and giving leftand right values equal to the width of the element at the respective side.
Regarding the height, unless explicitly specified, absolute positioned elements shrink wrap to fit their content by default so you don't have to worry about it:
* {
margin: 0;
padding: 0;
}
.fixed {
width: 100px;
height: 100px;
background: hotpink;
}
#left {
float: left;
}
#right {
float: right;
}
#flexible {
position: absolute;
left: 100px; /*width of image*/
right: 100px; /*width of div*/
background: dodgerblue;
}
<img id="left" class="fixed" src="http://cdn-media-2.lifehack.org/wp-content/files/2014/10/widescreen-adam-levine-background-1024x640.jpg" />
<div id="flexible">Some Content</div>
<div id="right" class="fixed"></div>
I have an image in an anchor tag, and I need to center it.
I have managed to do so using this technique that I just came across messing about in the DOM inspector: http://jsfiddle.net/m6e3m/
it uses:
display: table;
margin 0 auto;
I tried using:
display: block;
margin: 0 auto;
width: (?)px;
but I found it wasn't actually centering it unless I messed with the width a lot which isn't really very good as anchor tag widths seem to not work as well (imo), it was like basically using a margin-left.
Curious as to whether any of you have used this before or found an even better technique as display: table isn't supported on IE 7 and back
You can use text-align: center; on the #container to center elements within it.
Example here: http://jsfiddle.net/m6e3m/3/
use -ms-flexbox supported by all browser. DEMO
#container{
width: 600px;
height:600px;
background: red;
}
.centre{
height: 100%;
width:100%;
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-pack:center;
box-align:center;
}
It will work out for you..
.center
{
width: 100%;
display:block
text-align: center;
}
Demo Fiddle
Try:
#container{
width: 600px;
height:600px;
background: red;
display: table-cell; /* <-- allows use of vertical align */
text-align:center; /* <-- horizontal centering */
vertical-align:middle; /* <-- vertical centering */
}
Use the above and you wont need any more CSS for the img
you can add to container text-align: center and vertical-align: middle;
My goal is to prevent "hello" span from being pushed down by window resize.
http://jsfiddle.net/5MjNL/5/
HTML
<div id='main'>
<div class='container'>
<input type='text' class='input-field'></input>
<span class='foo'>hello</span>
</div>
</div>
CSS
#main
{
border:1px solid red;
width: 100%;
height: 300px;
}
.input-field
{
border: 1px solid blue;
width:70%;
}
In jsfiddle, if you drag the browser window to reduce the size horizontally, at some point, the SPAN containing "hello" text will get pushed down.
How do I set my style so that only text field width is reduced?
Try adding white-space: nowrap to the `.container:
.container {
white-space: nowrap;
}
Or try using flexbox (this covers old and new syntax):
.container {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex;
}
Another option can be to, specify the min-width that you would like and define overflow as auto,
This will make sure that the div is still fluid and expands, but stops contracting where the page structure starts getting messed up, and the user can scroll
http://jsfiddle.net/5MjNL/6/
#main
{
border:1px solid red;
width: 100%;
min-width:300px;
height: 300px;
overflow: auto;
}
.input-field
{
border: 1px solid blue;
width:70%;
}
.foo{
}
}
If you really want this behavior you might consider using percentages. You could, but don't have to, do something like:
#main{
width:/*percentage of choice here*/;
}
.contianer{
width:/*percentage of choice here*/;
}
.input-field{
width:/*percentage of choice here*/;
}
.foo{
width:/*not a percentage width here*/;
}