I have a very not typical site where content is aligned by the middle of screen I mean vertically and horizontally, for getting this result used vertical-align: middle; for each item and for the main container
text-align: center; height: calc(100% - header - footer ))
but when the user is changing size
for the window the footer is also change his position but should not do it
Js fiddle
https://jsfiddle.net/hm97o1sa/
is there any way to fix it without "flex" ?
updated:
expected behavior
scrolled to the top
scrolled to the bottom
A possible solution would be to use calc together with Viewport units vh.
With calc(), you can perform calculations to determine CSS property values.
With Viewport units, you can get work with Viewport size, for example in this case 100% of the Viewport height (vh).
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#header {
height: 100px;
background: blue;
}
#content {
height: calc(100vh - 150px);
min-height: 250px;
text-align: center;
}
#vert-align {
display: inline-block;
height: 100%;
vertical-align: middle;
}
#item_1 {
background: yellow;
height: 250px;
width: 250px;
display: inline-block;
vertical-align: middle;
margin-right: 50px;
}
#item_2 {
background: red;
height: 250px;
width: 250px;
display: inline-block;
vertical-align: middle;
}
#footer {
height: 50px;
background: green;
}
<div id="header">HEADER</div>
<div id="content">
<div id="vert-align"></div>
<div id="item_1"></div>
<div id="item_2"></div>
</div>
<div id="footer">FOOTER</div>
Modify your CSS and your Final code will be:
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#header {
height: 100px;
background: blue;
}
#content {
height: calc(100% - 150px);
text-align: center;
overflow-y: auto;
}
#vert-align {
display: inline-block;
height: 100%;
vertical-align: middle;
}
#item_1 {
background: yellow;
height: 250px;
width: 250px;
display: inline-block;
vertical-align: middle;
margin-right: 50px;
}
#item_2 {
background: red;
height: 250px;
width: 250px;
display: inline-block;
vertical-align: middle;
}
#footer {
height: 50px;
background: green;
}
<!DOCTYPE html>
<html>
<head>
<title>TA</title>
</head>
<body>
<div id="header">HEADER</div>
<div id="content">
<div id="vert-align"></div>
<div id="item_1"></div>
<div id="item_2"></div>
</div>
<div id="footer">FOOTER</div>
</body>
</html>
A quick fix is to apply a min-height: 250px on your #content
#content {
height: calc(100% - 150px);
min-height: 250px;
text-align: center;
}
Related
How can I make all the images the same size while having them still be responsive?
Here's the fiddle:
https://jsfiddle.net/2ko9g725/2/
This is all the css:
.ui.text.menu {
background-color: #eee;
margin-top: 0;
}
.ui.message {
padding: 50px 50px;
margin-bottom: 20px !important;
}
.ui.grid.stackable.container {
display: flex;
flex-wrap: wrap;
}
Check this Demo. It may help you
CSS
img.ui.image{
max-width: 100%;
height: auto;
max-height: 100px;
margin: auto;
display: block;
}
.ui.segment {
width: 100%;
}
Check this fiddle. You can put a wrapper div inside your ui segments for your image to sit in, then give that wrapper a height and width then add object-fit: cover to the img element in css with a width and height of 100%.
body {
margin: 0;
display: flex;
}
.segment {
width: 30%;
border: 1px solid black;
padding: 10px;
margin: 10px;
}
.seg-img {
height: 80%;
width: 100%;
}
img {
object-fit: cover;
height: 100%;
width: 100%;
}
<div class="segment">
<div class="seg-img">
<img src="https://images.unsplash.com/photo-1464061884326-64f6ebd57f83?auto=format&fit=crop&w=1500&q=80">
</div>
<p>TEST</p>
</div>
<div class="segment">
<div class="seg-img">
<img src="https://images.unsplash.com/photo-1440658172029-9d9e5cdc127c?auto=format&fit=crop&w=1652&q=80">
</div>
<p>TEST</p>
</div>
<div class="segment">
<div class="seg-img">
<img src="https://images.unsplash.com/photo-1474015833661-686ed67f9485?auto=format&fit=crop&w=1500&q=80">
</div>
<p>TEST</p>
</div>
i have just updated the fiddle with
images stretch on smaller viewports have been fixed
check this fiddle
i have just changed only in the css
img.ui.image{
overflow: hidden;
width: 100%;
max-width: 50%;
height: auto;
max-height: 100px;
margin: auto;
display: block;
}
How can I tell a div to use the entire area marked with the red arrows no matter the size of the browser and no matter the div contents?
I tried: <div style='height:100%;width:'100%'>...</div> but it only takes the horizontal area, not the vertical. Is there a way to do this?
Check out this Fiddle
https://jsfiddle.net/o7u9hxou/
html
<body>
<div id="sidebar"></div>
<div id="wrapper">
<div id="topbar"></div>
<div id="else"></div>
</div>
</body>
css
body {
box-sizing: border-box;
height: 100vh;
margin: 0px;
padding: 0px;
}
#else {
background-color: green;
height: 90vh;
}
#sidebar {
background-color: pink;
display: inline-block;
float: left;
height: 100%;
min-width: 50px;
width: 10%;
}
#topbar {
background-color: yellow;
height: 10vh;
min-height: 20px;
}
#wrapper {
display: inline-block;
float: right;
height: 100%;
width: 90%;
}
I have two divs that I want to float on the same line. I don't want the right one to wrap until the window gets around 250px wide.
I am setting the initial widths of the divs to percentages and this seems to be causing issues. The right div will wrap to a new line well before it shrinks to a min-width of 100px;
<div id="#container">
<div id="left">
<div id="box"></div>
</div>
<div id="right">
<h1>Hello World</h1>
</div>
</div>
#container {
display: table;
width: 100%;
}
#box {
width: 100px;
height: 100px;
background: gray;
display: inline-block;
max-width: 100%;
}
#left {
float: left;
width: 23.6%;
min-width:150px;
background: gold;
text-align: center;
}
#right {
float: left;
width: 76.4%;
min-width:100px;
background: pink;
}
http://jsfiddle.net/5C6GB/
Removing the width on the right div partially solved the problem.
But it looks like I had to resort to using display:table*
http://jsfiddle.net/5C6GB/3/
<div id="container">
<div class="tr">
<div id="left" class="td">
<div id="box"></div>
</div>
<div id="right" class="td">
<!-- <h1>Hello World</h1> -->
</div>
</div>
</div>
#container {
display: table;
width: 100%;
background: red;
height: 100px;
}
#box {
width: 100px;
height: 100px;
background: gray;
display: inline-block;
max-width: 100%;
}
#left {
width: 25%;
min-width:150px;
background: gold;
text-align: center;
height: 100%;
}
#right {
min-width:100px;
background: pink;
width: 75%;
vertical-align: bottom;
}
.tr {
display: table-row;
width: 100%;
}
.td {
display: table-cell;
}
#media only screen and (max-width: 600px) {
#left, #right {
display:block;
width: 100%;
min-height: 100px;
}
.tr {
display: block;
}
#container {
display: block;
}
}
It's the min-width:150px; in the left div which is causing the right div to wrap to a new line well before it shrinks to a min-width of 100px;
#left {
float: left;
width: 23.6%;
min-width:150px; /*remove or change this to a smaller amount */
background: gold;
text-align: center;
}
FIDDLE
I have a wrapper div that holds a header, navbar, and a content div. when the content expands I want the wrapper div to expand with it however it currently doesn't do this. In other word I want the edges of the content to remain in the wrapper div. Once the content div expand beyond the height of the screen I need the scrollbar to appear on edge of the edge of the edge of the window.
my css:
* {
margin: 0px;
padding: 0px;
}
html, body {
width: 100%;
height: 100%;
overflow-y: auto;
}
body {
background-image: url(../Images/background1.jpg);
background-size: cover;
min-width:1000px;
background-repeat: no-repeat;
}
#wrapper1
{
height: 100%;
width: 94%;
margin-left: auto;
margin-right: auto;
background-color: #006699;
position: relative;
overflow: hidden;
}
#wrapper
{
height: auto !important;
min-height: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
#header, #nav, #content
{
width: 94%;
margin-left: auto;
margin-right: auto;
}
#header
{
height: 15%;
background-color: Red;
}
#nav
{
height: 2%;
min-height: 35px;
background-color: Yellow;
}
#content
{
height: 100%;
background-color: brown;
}
HTML:
<body>
<div id="wrapper">
<div id="header"></div>
<div id="nav"></div>
<div id="content">
</div>
</div>
</body>
http://jsfiddle.net/VB3PM/
Try this:
<style type="text/css">
html,
body
{
height:100%;
}
#wrapper
{
position:relative;
min-height:100%;
}
</style>
<div id="wrapper">
<div id="header"></div>
<div id="nav"></div>
<div id="content">
</div>
</div>
Change the overflow CSS property of #wrapper from hidden to auto as shown below
#wrapper
{
height: auto !important;
min-height: 100%;
height: 100%;
position: relative;
overflow: auto;
}
I can't find an answer that is not on a fixed image size so I'm going to ask it.
I have a div with an image in it and that picture could be any size. I need it to auto scale AND auto align. I can scale it fine but vertically aligning it is a bit of a challenge. I need it to be center vertically aligned.
HTML + CSS
<div id="myDiv">
<img src="./img/example.png"></img>
</div>
#myDiv {
position: absolute;
height: 100%;
width: 100%;
top: 0%;
left: 0%;
text-align: center;
}
#myDiv img {
height: auto;
width: auto;
max-height: 70%;
max-width: 70%
}
This example forces both horizontal and vertical alignment of an image inside a box; in this specific case, constrained to 130x130px. Change the width and height defined as 130px in 2 separate places each in the css to change the constrained size.
[edit: added simplified example showing minimum required setup]
Simplified example:
html:
<div class="pic">
<img src="/path/to/pic.jpg"/>
</div>
css:
.pic {
display: inline-block;
width: 130px;
height: 130px;
outline: solid 1px #cccce3;
font-size: 0;
text-align: center;
}
.pic:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.pic img {
max-width: 130px;
max-height: 130px;
display: inline-block;
vertical-align: middle;
}
Complete example:
Original codepen showing more complex example: http://codepen.io/anon/pen/culvD .
Here's the html:
<ul class="pics">
<li>
<div class="pic">
<img src="/path/to/pic1.jpg"/>
</div>
</li>
<li>
<div class="pic">
<img src="/path/to/pic2.jpg"/>
</div>
</li>
</ul>
and here's the css:
ul.pics {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
ul.pics li {
display: inline-block;
width: 130px;
margin: 4px;
padding: 6px;
background-color: #e6e6ec;
outline: solid 1px #cccce3;
}
ul.pics li .pic {
height: 130px;
font-size: 0;
text-align: center;
}
ul.pics li .pic:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
ul.pics li img {
max-width: 130px;
max-height: 130px;
display: inline-block;
vertical-align: middle;
}
to center align an element to the center asign it a width, then margin-left and right to auto.