short question: how does one center a responsive set of dynamic height div blocks on a page. see simplified code below:
long: i have a set of data that goes into each block. tables, graphs, etc. the data is all mysql driven and dynamically changes all day long so the height of these blocks is not determined and is dynamic. I want the blocks to auto position themselves as they do in the example code. basic responsive page layout. example: the pink table could be 50px or 5000px. the float left is critical so that multiple block stack to the right as needed.
the challenge is for the blocks to be in the center of the page. i can not seem to be able to figure that one out.
i have tried and research everything. Flex does not seem to support this concept.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.statusC, .statusC2 {
float: left;
}
</style>
</head>
<body>
<div class="statusC" style="height: 300px; width:500px; background-color:pink;">table</div>
<div class="statusC" style="height: 200px; width:500px; background-color:yellow;">progress</div>
<div class="statusC" style="height: 200px; width:500px; background-color:red;">clean</div>
<div class="statusC" style="height: 200px; width:500px; background-color:green;">stat</div>
<div class="statusC" style="height: 200px; width:500px; background-color:blue;">stat2</div>
</body>
</html>
make a wrapper around the blocks and give it a width:
<div class="wrapper">
<div class="statusC" style="height: 300px; width:500px; background-color:pink;">table</div>
<div class="statusC" style="height: 200px; width:500px; background-color:yellow;">progress</div>
<div class="statusC" style="height: 200px; width:500px; background-color:red;">clean</div>
<div class="statusC" style="height: 200px; width:500px; background-color:green;">stat</div>
<div class="statusC" style="height: 200px; width:500px; background-color:blue;">stat2</div>
</div>
and the CSS:
.wrapper {
margin: 0 auto;
position :relative;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
the float of the blocks is granted.
https://jsfiddle.net/Marouen/0s2pwz5t/
i found a TOTAL HACK that shows what i am trying to produce but not in a elegant way at all. i hope there is a better solution. there must be a solution that does not require setting the width...
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8">
<style>
.statusContainer2 {
display: flex;
justify-content: center;
}
.statusContainer3 {
}
#media screen and (max-width: 1999px) { .statusContainer3 { width:1500px; } }
#media screen and (max-width: 1499px) { .statusContainer3 { width:1000px; } }
#media screen and (max-width: 999px) { .statusContainer3 { width:500px; } }
.statusC {
float: left;
}
</style>
</head>
<body>
<div class="statusContainer2" >
<div class="statusContainer3" >
<div class="statusC" style="height: 300px; width:500px; background-color:pink;">table</div>
<div class="statusC" style="height: 200px; width:500px; background-color:yellow;">progress</div>
<div class="statusC" style="height: 200px; width:500px; background-color:red;">clean</div>
<div class="statusC" style="height: 200px; width:500px; background-color:green;">stat</div>
<div class="statusC" style="height: 200px; width:500px; background-color:blue;">stat2</div>
</div>
</div>
</body>
</html>
Related
#div {}
img {
height: 200px;
}
#img1 {
float: left;
}
#img2 {
float: right;
}
#img3 {
float: right;
}
<div id="div">
<img id="img1" src="https://image.freepik.com/free-photo/blue-mountains-famous-tourism-scenery-lijiang_1417-1143.jpg" alt="">
<img id="img2" src="https://images.pexels.com/photos/490411/pexels-photo-490411.jpeg?auto=compress&cs=tinysrgb&h=350" alt="">
<img id="img3" src="https://previews.123rf.com/images/smileus/smileus1505/smileus150500016/40147459-colorful-sunset-scenery-in-rural-landscape-with-a-bench-and-a-path-in-the-foreground-gold-fields-and.jpg" alt="">
</div>
Currently, when you shrink the screen horizontally, the images start stacking vertically, which I don't want, I want them to all stay on the same horizontal line.
I'm looking how to do the following things:
Make an image disappear when it starts overlapping another image.
Make the images push to the right past the vertical scroll bar when the images start to overlapping.
The reason I ask for both is because I've now got two projects where each require one of those two and I don't know how to do it :P
I'd also like to avoid #media only screen and (max-width: ---px) if possible.
You need to add separate div for each image, and arrange it by display: flex element. Also use margin for align contents inside the flex div.
#div {
display: flex;
}
.new {
max-height: 200px;
}
.left {
margin-right: auto;
}
img {
max-width: 100%;
max-height: 200px;
}
#media (max-width: 768px) {
.hidden-xs {
display:none;
}
}
<div id="div">
<div class="new left">
<img id="img1" src="https://image.freepik.com/free-photo/blue-mountains-famous-tourism-scenery-lijiang_1417-1143.jpg" alt="">
</div>
<div class="new hidden-xs">
<img id="img2" src="https://images.pexels.com/photos/490411/pexels-photo-490411.jpeg?auto=compress&cs=tinysrgb&h=350" alt="">
</div>
<div class="new">
<img id="img3" src="https://previews.123rf.com/images/smileus/smileus1505/smileus150500016/40147459-colorful-sunset-scenery-in-rural-landscape-with-a-bench-and-a-path-in-the-foreground-gold-fields-and.jpg" alt="">
</div>
</div>
Try this code
#div::after {
display: table;
content: "";
clear: both;
}
#div img {
float: left;
width: 33.33%;
max-width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="demonstration.css" type="text/css">
<title>Demo</title>
</head>
<body>
<div id="div">
<img id="img1" src="https://image.freepik.com/free-photo/blue-mountains-famous-tourism-scenery-lijiang_1417-1143.jpg" alt="">
<img id="img2" src="https://images.pexels.com/photos/490411/pexels-photo-490411.jpeg?auto=compress&cs=tinysrgb&h=350" alt="">
<img id="img3" src="https://previews.123rf.com/images/smileus/smileus1505/smileus150500016/40147459-colorful-sunset-scenery-in-rural-landscape-with-a-bench-and-a-path-in-the-foreground-gold-fields-and.jpg" alt="">
</div>
</body>
</html>
Try this Code::
ul.img {
margin: 0;
padding: 0;
white-space: nowrap;
width: 500px;
overflow-x: auto;
}
ul.img li {
display: inline-block;
width: 200px;
height: 200px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="demonstration.css" type="text/css">
</head>
<body>
<ul class="img">
<!-- Inline styles added for demonstration purposes only. -->
<li style="background-color: #000"></li>
<li style="background-color: #cdc"></li>
<li style="background-color: #fed"></li>
</ul>
</body>
</html>
try this code, And modify your image height according to need.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="demonstration.css" type="text/css">
<title>Demo</title>
<style>
#div {
display: flex;
flex-wrap: wrap;
}
#div img{
width: 33.33%;
height: 200px;
}
</style>
</head>
<body>
<div id="div">
<img id="img1" src="https://image.freepik.com/free-photo/blue-mountains-famous-tourism-scenery-lijiang_1417-1143.jpg" alt="">
<img id="img2" src="https://images.pexels.com/photos/490411/pexels-photo-490411.jpeg?auto=compress&cs=tinysrgb&h=350" alt="">
<img id="img3" src="https://previews.123rf.com/images/smileus/smileus1505/smileus150500016/40147459-colorful-sunset-scenery-in-rural-landscape-with-a-bench-and-a-path-in-the-foreground-gold-fields-and.jpg" alt="">
</div>
</body>
</html>
The problem is you are using a float for positioning.
Floats will automatically move to a new line when their containers becomes too small.
You could either set the size of the image container to a width of 600px with no resize in which your images would remain in place when the window becomes smaller.
Or you could use the fixed position which is what I would go for.
#img1 {
position: fixed;
width:200px;
left: 0px;
top: 0px;
border: 0px;
padding: 0px;}
#img2 {
position: fixed;
width:200px;
left: 200px;
top: 0px;
border:0px;
padding: 0px;}
#img3 {
position: fixed;
width:200px;
left: 400px;
top: 0px;
border: 0px;
padding: 0px;}
If you dont care about image resize, set the div with a minimum width of a total px sum of the image widths. That way you have less containers.
I need 2 div with one is floated left so when we resize the window into a small window the second div will move downward.
body,
html {
width: 100%;
height: 100%;
}
.container {
overflow: hidden;
}
.container div {
width: 500px;
height: 500px;
border: 1px solid black;
}
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
</head>
<body>
<div class="container">
<div style="float: left">
aaa
</div>
<div>
bbb
</div>
</div>
</body>
</html>
this code will make the second div overlap with the first div, if I add display:flex in the container it won't overlap anymore but the div size is resizing with the windows size and the second div won't go downward.
What is wrong? I need my div to be exactly 500px.
Thanks :)
From what I understand, you want to make the second div go down after resizing the browser. So you can use media queries for that:
body,
html {
width: 100%;
height: 100%;
}
.container {
overflow: hidden;
}
.container div:first-child {
float: left;
width: 500px;
height: 500px;
border: 1px solid red;
}
.container div:last-child {
width: 500px;
height: 500px;
border: 1px solid black;
}
#media (max-width: 500px) {
.container div:last-child {
clear: both;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<div>
aaa
</div>
<div>
bbb
</div>
</div>
</body>
</html>
I separated the style of the two divs, and removed the float:left from the inline style. The <meta> is also important for the media query to work. I used clear:both to clear the float of the first div from the second, thus not affecting the second div.
I didn't put this in a snippet because the media does not seem to work there, but is working in my computer
You have to set float in second div also. Or in media query you have to set the display: block in both div. check updated snippet below..
body,
html {
width: 100%;
height: 100%;
}
.container {
overflow: hidden;
}
.container div {
width: 500px;
height: 500px;
border: 1px solid black;
}
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
</head>
<body>
<div class="container">
<div style="float: left">
aaa
</div>
<div style="float: right">
bbb
</div>
</div>
</body>
</html>
Say I have 2 divs next to each other in a container of fixed width. Horizontally next to each other that is. Then say one div is removed, how can i get the other div to fill up the space next to it where the other div was? As in it should expand its width.
Here's a way to do it without Javascript.
I don't think this will work in IE... I've tested it in Chrome, Firefox and Safari, but this might work for you.
Here is a fiddle for it.
CSS:
#container {
width: 400px;
}
#left {
width: 200px;
height: 200px;
background: #ddd;
float: left;
}
#right {
width:100%;
float: right;
height: 200px;
position: relative;
background: #CCC;
}
#left + #right {
width: 200px;
}
Javascript:
function removeElement(divNum) {
var d = document.getElementById('container');
var olddiv = document.getElementById(divNum);
d.removeChild(olddiv);
}
HTML:
<div id="container">
<div id="left"></div>
<div id="right"></div>
<input onclick="removeElement('left')" type="button" value="X"/>
</div>
You can use jQuery to manipulate the CSS properties and visibility. In this example I alter the widths.
You can do it with display: table; but it won't work in IE 7 and below. Here's the code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test div</title>
<style type="text/css">
#container {
width: 400px;
display: table;
}
#row-container {
display: table-row;
}
#left, #right {
display: table-cell;
height: 200px;
}
#left {
background-color: red;
}
#right {
background-color: blue;
}
</style>
</head>
<body>
<div id="container">
<div id="row-container">
<div id="left"></div>
<div id="right"></div>
</div>
</div>
</body>
</html>
I have the following HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Table-cell issue</title>
<style type="text/css">
html, body { height: 100%; }
.table
{
display: table;
height: 100%;
}
.row
{
display: table-row;
}
.aside
{
display: table-cell;
}
.center
{
background-color: red;
display: table-cell;
width: 100%;
}
.wide
{
background-color: green;
width: 16000px;
}
</style>
</head>
<body>
<div class="table">
<div class="row">
<div class="aside">
Left column
</div>
<div class="center">
<div class="wide"> </div>
</div>
<div class="aside">
Right column
</div>
</div>
</div>
</body>
</html>
The problem is that the div.center stretches to fit its content, while the div.table is meant to occupy the whole viewport, and the rest of the div.center's content should be invisible. Neither overflow:hidden nor explicit width setting in pixels (900px, for instance) helps.
I would be very grateful for any idea on how to fix the issue.
Use table-layout:fixed on the table div. This disables the automatic cell resizing and will make the center only as wide as you allow it to be.
Ive been banging my head with why MSIE8 doesnt overlap the floating div just as webkit a mozilla both do. I hope you guys can help me out with this one.
I have the following code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="style" href="style.css" type="text/css" />
</head>
<body style="margin: 0px; background: #3b0404;">
<div align="center">
<div id="top" style="height: 100px; background: yellow; width: 100%;max-height: 100px; ">
<div style="overflow: visible; width: 800px; height: 100px; max-height: 100px; background: aquamarine;">
<div id="logo" style="float: left; margin-left: -3px; width: 203px; height: 201px; background: pink; overflow: visible;"></div>
<div id="menu" style="float: right; width: 595px; height: 100px; background: blue;"></div>
</div>
</div>
<div id="content" style="width: 800px; margin-left: auto; margin-right: auto;">
<div style="background: purple; height: 215px;"></div>
<div style="background: green; height: 350px;"></div>
</div>
<div id="bottom"></div>
</div>
</body>
</html>
I need the pink div to overlap the purple one while maintaining dimensions, however MSIE8 keeps expanding the containing divs so it pushes everything down instead of the desired behaviour.
I hope my question is clear, I dont know if Im doing something wrong and should take a different approach.
Thanks for your help!!
It was the transitional DOCTYPE .. it looked fine on JSFiddle cause it added the strict dtd.
Thanks to everyone for your time.