I like using mosaic because when a user increases the size of their browser, it will automatically move around to find the best possible fit. 5 columns can resize to four columns quite nicely. I'd like an effect similar to this, but without the "move to find best fit".
Right now I'm using a table to store some data, each cell of size 300x250. The problem arises when a user increases the size of the page, since cells are rigid and will not reduce column size to compensate, and I end up with cells outside the width of the page, necessitating scrolling.
How can I achieve this effect? To summarize:
start with for example 5 columns that span the width of the page
if the user zooms in to the point where an element would go beyond the width of a page, make it into four columns instead
if the user zooms out, have it go back to five columns (but cap it at five)
Is there an easy method to get this tiling scheme? Here's an image to illustrate:
That's how display: inline-block elements are laid out. Combine with min-width if you want them to be uniform rather than dictated by their actual content.
Example: Live Copy
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
<style>
.box {
display: inline-block;
border: 1px solid black;
min-width: 100px;
text-align: center;
margin-bottom: 2px;
margin-right: 2px;
}
</style>
</head>
<body>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</body>
</html>
Note that some old versions of IE don't like you to take an element (like div) that defaults to display: block and make it inline-block instead. If you need to support them, use an element (like span) that defaults to inline-block instead.
Related
Three divs each above the other, within a parent container. Top div is fixed height. Bottom div has content that takes up an unknown amount of vertical space but needs all content within it to display. Top div should fill remaining vertical space. Every
<div id="container"> // 100% of visible window height but should not overflow
<div id="top"> // Fixed height
</div>
<div id="middle"> // Use remaining vertical space
</div>
<div id="bottom"> // Unknown height but contents should all be shown
</div>
</div>
I need to support recent-ish legacy browsers (e.g. IE9+) & mobile browsers (e.g. Android 4.4+), so flexbox based layouts are out. I tried Javascript (using JQuery) to try and set
middle div height = container height - (top div height + bottom div height)
but for some reason the browser was mis-reporting the bottom div height during page render (latest Chrome on Win 7) so result came out wrong. And I'd like to avoid JS if possible (tho am open if a solution works).
Need to support as many desktop and mobile browsers as possible.
Thanks
For old browser , where flex cannot be used , display:tablecan be a fall back but layout will be able to grow past window's height where content is too long to be shown at once.
A CSS only mix using flex and table as a fallback where flex is not supported: https://codepen.io/gc-nomade/pen/BdWXpp
Below, snippet with display:table/table-row CSS only (which works for almost any browser (IE8 and next)
html,
body,
#container {
height: 100%;
width: 100%;
margin: 0;
display: table;
background: turquoise;
}
#container>div {
display: table-row;
}
.buffer {
display: table-cell;
/* display is optionnal but element is required in HTML to keep layout as a single column and allow vertical-align to content*/
vertical-align: middle;
text-align: center;
}
#top {
background: orange;
height: 100px;
}
#middle {
height: 100%;
}
#bottom {
background: tomato;
}
<div id="container">
<div id="top">
<div class="buffer">top 100px, test me full page and in any medias
</div>
</div>
<div id="middle">
<div class="buffer">Use remaining vertical space
</div>
</div>
<div id="bottom">
<div class="buffer">Unknown height<br/> that fits <br/>to content to hold
</div>
</div>
</div>
This is what my webpage looks like on my computer
What I am trying to do is:
move my content (buttons, table, dropdown) to the center of the webpage (dynamically and automatically depending on the screen size).
Have the webpage fit properly on mobile browsers.(i.e. have the content take up the majority of the screen space)
I am a bootstrap and css noob. The following is a jsFiddle with similar code to what my webpage has: https://jsfiddle.net/zpvrspaq/18/
How would I go about just centering one of the rows, such as:
<div class="row no-gutter">
<div class="col-xs-1"><h5 class="text-center">Your grade</h5></div>
<div class="col-xs-1"> <h5 class="text-center">% of grade</h5</div>
</div>
<div class="row no-gutter">
<div class="col-xs-1"><input type="text" class="marks form-control"></div>
<div class="col-xs-1"> <input type="text" class="grades form-control"></div>
</div>
Anything to point me in the right direction would be great.
Try not to rely too much on Bootstrap's rows and columns for sizing things like tables. col-xs-[number] should really be limited to determining the way elements line up or break onto new lines when the viewport is expanded or shrunk.
I've given #table-of-grades a display type of table and auto margins to center it, and added a new class, .table-cell, to float the cells of the table within the width of #table-of-grades
#table-of-grades {
display: table;
margin: auto;
}
.table-cell {
width:50%;
float:left;
}
I also moved everything within the #table-of-grades container, so they will fill the width of that element when the viewport is shrunk or expanded. Also notice the change in markup, i.e. I removed the rows and columns in the table itself to create a layout that doesn't rely on bootstrap's rows and columns.
https://jsfiddle.net/Lzvz60u1/
Try putting the container in a and then use a margin-left:auto; and margin-right:auto; to center the div
DEMO
It would be very simple using flex box.
here's the gist of the demo
.container{
display: flex;
height: 100%;
justify-content: center;
align-items: center;
}
html
<div class="container">
<div class='content'> //you can size this anyway you want
put anything you want here,
</div>
</div>
boilerplate html/css/etc.
then
<div>
<div style="margin:0 auto; position:relative">
<div data-item data-ng-repeat="item in ItemCtrl.item"></div>
</div>
</div>
... the above uses an Angular template, which is incredibly simple. It just positions absolutely my content into one, two, or three columns. If I set the screen to two columns I'd like it to be centered. I'm able to do this via code, but I wanted a more fluid feel and I suspect CSS can do this, but I'm having trouble w/it.
Here's my template:
<div style="width:400px">
Content here ...
</div>
My Angular directive simply grabs the element above and changes its CSS position property to absolute and gives it a top and left property.
Why is this not working? Can this be done?
So in essence if I have one column, which is 400px and is put in my display at position 0, which would occur in this case, and the screen is at 1400px, I'd like the containing div to be displayed at x position (1400-400)/2.
If I have two columns, which are 400px and are put on my display at positions 0 and 410, which would also occur in this case, and the screen is at 1400px, I'd like the containing div to be displayed at x position (1400-810)/2.
UPDATE:
Here's a fiddle http://jsfiddle.net/0LLa1rs4/
UPDATE:
Here's a solution, although I'm not sure it's the most elegant. Any suggestions to make it better are welcome.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="background-color:blue; position:relative; width:100%; margin:20px auto;">
testing ...
<div style="position:absolute; width:400px; left:50%; margin-left:-200px">
<div style="top:100px; left:0px; width:400px; background-color:green; position:absolute">
Item #1
</div>
<div style="top:200px; left:0px; width:400px; background-color:green; position:absolute">
Item #2
</div>
</div>
</div>
</body>
</html>
Well I'm not sure what you're trying to achieve, you jsfiddle is not very clear. Do you want the number of columns to be dynamic or you choose it? I've made a jsfiddle that could answer the issue but I'm not sure:
http://jsfiddle.net/0LLa1rs4/1/
Basically you should play with
display: flex;
And on the child element
margin: auto;
From your fiddle, it looks like you're trying to center elements horizontally within a container. Your description camouflages this.
Here's a simple fiddle that does similar things to the fiddle you posted, but in a much more concise way: http://jsfiddle.net/gunderson/5eLx4r4p/1/
HTML
<div class="container">
<div class="item">Item 0</div>
<div class="item">Item 1</div>
</div>
CSS
.container{
margin: 20px;
width: 100%;
}
.item{
width: 400px;
margin: 20px auto; /* margin (horizontal) auto is what does the centering, as long as width is defined */
background: green;
}
I have 3 div boxes (with fixed width and dynamic height) that are set next to each other. This works fine in Chrome. But in Mozilla and IE, the boxes don't stay same, they break down themselves and sits on top of each other, what I definitely don't want to happen. Even if I minimize the window size (it happens with all browsers) the boxes break down and don't stay in the same row. I want to get rid of this problem. I want that whatever size the window have or what ever browser is used, the boxes shouldn't break down. They must still be able to fit next to each other.
See here
[NOTE/SIDE INFO: I have set the width of my each box 253 px because the max-width of my bosy is set as 1200px, and 253px is estimated so that they all can fit inside 1200px]
This piece of code I am working on:
.HTML:
<div class="box">box1box1box1box1box1<br>
</div>
<div class="box">Box2Box2Box2Box2Box2<br>
</div>
<div class="box">box3box3box3box3box3<br>
</div>
.CSS:
.box {
display:inline-block;
margin-top:100px;
-webkit-box-flex: 1;
-moz-box-flex: 1;
margin-bottom:60px;
margin-left:70px;
padding:15px;
width:253px;
border: 4px solid gray;
border-radius:5px;
}
All you need to do is to put your content in a block-level container element with a width that's wide enough for the elements to not wrap to the next line:
http://jsfiddle.net/o8r97fhf/
HTML:
<div class="container">
<div class="box">box1box1box1box1box1<br /></div>
<div class="box">Box2Box2Box2Box2Box2<br /></div>
<div class="box">box3box3box3box3box3<br /></div>
</div>
CSS:
.container {
width:1161px;
}
.box {
display:inline-block;
margin-top:100px;
-webkit-box-flex: 1;
-moz-box-flex: 1;
margin-bottom:60px;
margin-left:70px;
padding:15px;
width:253px;
border: 4px solid gray;
border-radius:5px;
}
The reason why it is doing this is because the <div class="box" /> elements have "display:inline-block;" - making them act more like an element such as <img /> where it has a height and width, but it is displayed inline, and if there's not enough room on one line, the elements will wrap to the next line.
Another thing you can try with the container <div /> element is to put "white-space: nowrap;" on it instead of specifying a particular width on it.
One thing I do when I'm messing around with CSS like this is, I will put a temporary "background-color:#F0F;" on the container <div /> element so I can see exactly what the dimensions look like, and what is really going on in the page.
This question already has answers here:
Auto-size dynamic text to fill fixed size container
(21 answers)
Closed 8 years ago.
I have been searching for a solution to resize the text size in a div to make the text fill out the entire div height and width, with no avail.
I have made some images to help understand this problem:
So this is a simple div with a height and width set. This height and width does not change, the text in the box does! So what I want to do is to make that text fill the whole width and height of the div just like in the image below.
I have been working on the simple example below and I simply cannot find out how to do this. I have tried setting relative font-sizes with percentage, doing things with overflow,
text-aligning all not giving me the result I want.
<html>
<head>
<title>Test</title>
<style type="text/css">
#box1, #box2{
width: 400px;
height: 300px;
color: white;
margin: 10;
font-size:larger;
text-align:justify;
letter-spacing: 100%;
}
#box1 { background-color: green;}
#box2 { background-color: blue;}
</style>
</head>
<body>
<div id="box1">
Llorem ipsum foo bar baz
</div>
<div id="box2">
Foobar
</div>
</body>
</html>
Is this problem even solvable with simple CSS or will I have to do some javascript/jQuery?
As I said this may be a dupe of
Auto-size dynamic text to fill fixed size container.
The OP did a jQuery plugin for that means, you can download it here
It doesn't seem to up to date though!
Good luck!
You can use FitText.js (github page) to solve this problem. Is really small and efficient compared to TextFill. TextFill uses an expensive while loop and FitText don't.
Also FitText is more flexible (I use it in a proyect with very special requirements and works like a champ!).
HTML:
<div class="container">
<h1 id="responsive_headline">Your fancy title</h1>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.fittext.js"></script>
<script>
jQuery("#responsive_headline").fitText();
</script>
You also can set options to it:
<script>
jQuery("#responsive_headline").fitText(1, { minFontSize: '30px', maxFontSize: '90px'});
</script>
CSS:
#responsive_headline {
width: 100%;
display: block;
}
And if you need it, FitText also has a no-jQuery version.
My guess is, this is not the kind of thing you can do with CSS. There isn't any kind of notion of percentage in fonts (as far as I know). You'll probably need to use Javascript.