I have a grid of divs, each responsive to the browser size so that their width changes in proportion to their height (their ratio stays the same). I'd like a separate div (its height determined only by the text it contains) to sit underneath all these, creating additional space for itself at the foot of the page. At the moment it sits under the first row. Is there a solution?
Thanks for your help.
https://jsfiddle.net/Ly008adL/
CSS:
* {
margin: 0;
padding: 0;
}
.wrapper {
width: 100%;
display: inline-block;
position: relative;
}
.wrapper:after {
padding-top: 71%;
display: block;
content: '';
}
.main {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.ratio {
display: inline-flex;
float: left;
width: 50%;
height: 100%;
}
.red {
background-color: red;
}
.yel {
background-color: yellow;
}
.foot {
position: relative;
}
HTML:
<div class="wrapper">
<div class="main">
<div class="ratio yel"></div>
<div class="ratio red"></div>
<div class="ratio red"></div>
<div class="ratio yel"></div>
<div class="ratio yel"></div>
<div class="ratio red"></div>
</div>
</div>
<div class="foot">
<p>Text for the foot of the page </p>
</div>
A friend helped me figure out a potential solution involving dividing the height by the number of rows, but I'm not sure on the total number of rows yet so something more flexible would be ideal...
The css ratio trick you are using was being applied to the .wrapper and not the individual elements.
I simply removed it from the .wrapper and applied it to the individual .ratio elements. I also had to double the padding-top from 71% to 142% to maintain the right ratio because these elements were 50% width and not 100% like the .wrapper was.
I also changed the .main div to position:relative; so that all the children would render out properly and so the .foot div would render after it.
See the updated fiddle here.
Related
I am using bootstrap, I wanted one div behind the other div, so used z-index en position: absolute and relative.
When doing this, every div under the div with z-index: 1 goes behind this div, while I want it to stay under it.
The div also becomes wider than the max-width when using 100%
<div class="row" id="MENUROW">
<div class="col-md-12" id="MENUCOLUMN"><h1>SHOP</h1></div>
</div>
<div class="row" id="MAINROW"> <!-- this has the background-image -->
<div class="col-md-12" id="MAINCOLUMN">
</div>
</div>
CSS:
#MENUROW
{
position: relative;
height: 80px;
background-color: transparent;
z-index: 2;
}
#MAINROW
{
position: absolute;
z-index: 1;
top: 60px; /*because there is 1 div above the menu div, this div needs to be just under that div, behind the menu div */
width: 100%;
background-image: url(../images/background.jpg);
background-size: cover;
}
when doing this the background image goes wider (to the right) than the width of the parent div.
https://jsfiddle.net/2cs60vrr/3/ example, just made the background red to show how wide it should be, the background image goes much wider
Point 1
You didn't used .container class in your HTML. Bootstrap has a structure to get it's maximum feature. You must need to use .container. Bootstrap structure is below:
<div class="container">
<div class="row">
<div class="col-*-*">
Your Content
</div>
</div>
</div>
Make your html as above to solve this issue.
Point 2
If you want not change your html, then use this code below to any .row to solve this issue.
margin-left:0;
margin-right:0;
I am sorry if we are unsure what you are looking for but is that what you want?
.grid {
margin: 0 auto;
max-width: 100%;
width: 100%;
background-color: #fff;
}
.row {
width: 100%;
margin-bottom: 0px;
display: flex;
}
#MENUROW {
position: absolute;
height: 80px;
background-color: red;
z-index: 2;
}
#MAINROW {
position: absolute;
z-index: 1;
top: 0;
width: 100%;
max-width: 1400px;
background-image: url(https://upload.wikimedia.org/wikipedia/commons/e/ed/Palais_Garnier.jpg);
background-size: cover;
}
https://jsfiddle.net/norcaljohnny/xt9c9d2r/2/
You should put the wrapper around the whole thing to position:relative;
And both rows to position:absolute;
That's it.
When using position:absolute; the block goes to the absolute top left corner of the closest parent html tag that has a position:relative;. If there is no parent with position:relative; your absolute positioned items go to the upper left corner of your screen.
(the first row is not a parent of the second, but they are siblings. The wrapper "grid" is the parent of the 2 rows)
<div class="grid">
<div class="row" id="MENUROW">
<div class="col-md-12" id="MENUCOLUMN">
<h1>SHOP</h1>
</div>
</div>
<div class="row" id="MAINROW">
<div class="col-md-12" id="MAINCOLUMN">
text
</div>
</div>
</div>
And CSS
.grid {
position: relative;
}
.row {
width: 100%;
}
#MENUROW {
position: absolute;
background-color: red;
z-index: 1;
}
#MAINROW {
position: absolute;
z-index: 2;
background-image: url(https://upload.wikimedia.org/wikipedia/commons/e/ed/Palais_Garnier.jpg);
background-size: cover;
}
Here is your updated example:
https://jsfiddle.net/2cs60vrr/6/
This is the code: https://jsfiddle.net/twy161er/6/
HTML:
<div id="top">
Logo. Menu
</div>
<div id="content">
Text Text Text
</div>
<div id="bottom">
Text in the bottom
</div>
CSS:
#top {
width: 100%;
height: 100px;
background-color: red;
}
#bottom {
width: 100%;
height: 100px;
background-color: blue;
margin: 0;
bottom: 0;
left: 0;
overflow: hidden;
position: absolute;
}
#content {
}
I want the "content" div to be in the center and in the middle of the page.
How should I do it?
Create a parent div .main for the three DIV and add a wrap DIV tag for content text and use display table table-row table-cell.
html, body {
height: 100%;
margin: 0;
}
.main {
display: table;
width: 100%;
height: 100%;
}
.top {
height: 0; /* make it dynamic */
background-color: red;
display: table-row;
}
.bottom {
height: 0; /* make it dynamic */
background-color: lime;
display: table-row;
}
.content {
display: table-row;
vertical-align: middle;
background: yellow;
}
.content div {
text-align: center;
vertical-align: middle;
display: table-cell;
}
<div class="main">
<div class="top">
Logo. Menu<br />
Dynamic content
</div>
<div class="content">
<div>Text Text Text</div>
</div>
<div class="bottom">
Text in the bottom<br />
Dynamic content
</div>
</div>
Jsfiddle demo : https://jsfiddle.net/twy161er/15/
Why use display:table? Because the content text always show even if the window height less than 200px; and you get IE8/9 support.
That is pretty simple!
You can make the contents of the #content like this:
<div id="content">
<div>Text Text Text</div>
</div>
Then, all you need to do is add this CSS:
#content {}
#content div {
position: absolute;
padding: 0;
margin: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Explanation
You firstly absolute your text. Then, you reset the margin and padding of the element <div>. What you do then is, push the inner <div> down by 50% of the page height and push left by 50% of the page width. Then, you have to move it towards the left, 50% of its width, and move it towards the top, 50% of it's height. That way, you can get the exact center of the <div>.
Working example: JSFiddle.
CSS rule "margin: auto" to the #content div should put it on the middle horizontally.
In order to put it in the middle of the screen, try:
#content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
taken from here How to position a div in the middle of the screen when the page is bigger than the screen
Notice that your top and bottom divs are in absolute position, so no way to tell the #content div to position itself relatively to them.
Your content is missing reference to id "#".
And i hope this is solution to your problem.
#content {
display: table;
margin: 0 auto;
}
I've got a group of divs like so:
<div id="container">
<div id="tabs">
<div class="row"><div class="tab">....</div></div>
...
</div>
</div>
with the following css:
#container {
position:absolute;
top:48px;
bottom:0px;
width:100%;
}
#tabs {
display:table;
height:100%;
}
.row {
display:table-row;
}
.tab {
display:table-cell;
text-align:center;
vertical-align:middle;
}
This creates a group of element all the same height vertically down the left side of my area. The problem is, I want the .tabs to be square. Since the tabs are dynamically sized to fit the vertical space, I can't define a width. How can I make the width match the height? Ideally this should be done without JavaScript, and pure css/html.
Here's a fiddle as requested.
See this fiddle
I've used a simple JS as below
<script>
var th = $('.tab').height();
$('.row').css({'width':th+'px'});
</script>
Please note that this <script> should be loaded in document.ready only after the body has loaded.
If you can do away for the 48px position from top, you can use this solution:
body {
margin: 0;
}
#container {
bottom: 0;
position: absolute;
width: 100%;
}
.row {
padding-bottom: 14.28571429%;
position: relative;
width: 14.28571429%;
}
.tab {
bottom: 0;
font-size: 20px;
height: 20px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
}
Explanation
It leverages the fact that padding is bound to the width of the element it's attached to. You make the outer element .row square by this, using 1/7th of the available screen size in height. By setting a position on the outer element and the inner .tab to position: absolute, you can also use a nifty trick by setting margin: auto along with top, right, bottom and left to 0. You need to specify a height for this element for it to work. Hence the font-size and corresponding height, assuming you only need to center one line of text. By adjusting the height, you can fine tune possible off-positioning caused by a fonts' baseline shift.
I have tinkered with the idea and here's what I have come up with, for what it's worth. As written in a previous comment, I do not believe there is a CSS only solution. However, the JS required is minimal.
HTML
<div id="container">
<div id="tabs">
<div class="row">
<div class="tab"><span>1</span></div>
</div>
<div class="row">
<div class="tab"><span>2</span></div>
</div>
<div class="row">
<div class="tab"><span>3</span></div>
</div>
<div class="row">
<div class="tab"><span>4</span></div>
</div>
<div class="row">
<div class="tab"><span>5</span></div>
</div>
<div class="row">
<div class="tab"><span>6</span></div>
</div>
<div class="row">
<div class="tab"><span>7</span></div>
</div>
</div>
</div>
CSS
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
#container {
width: 100%;
height: 100%;
}
#tabs {
width: 100%;
height: 100%;
}
.row {
position: relative;
height: 14.28571429%;
}
.tab {
display: block;
position: relative;
background-color: #008000;
}
.tab span {
position: absolute;
height: 20px;
font-size: 20px;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
text-align: center;
}
JS
var adjustHeight = function() {
var rowHeight = $('.row').height();
$('.tab').each(function(){
$(this).height(rowHeight);
$(this).width(rowHeight);
});
}
adjustHeight();
$(window).on("resize", function() {
adjustHeight();
});
In case you want to play around with it, I have created a Codepen: http://codepen.io/anon/pen/WvvWPE
Update: I have edited the Codepen to calculate the height of the rows automatically instead of setting it via CSS.
I have an HTML page which is divided into 4 sections.
Header
Menu
Content
Footer
I am using 1 div for each section and 1 div which wraps all the 4 divs.
My header's height is 50px, the menu's height is 50px, and the footer's height is 20px.
Then I try setting the menu's height to 100%. Menu div is taking the height of its container which is creating scrollbars in my page.
The CSS is as follows:
html, body {
margin: 0px;
height: 100%;
width: 100%;
min-width: 1024px;
min-height: 500px;
}
#container {
width: 100%;
height: 100%;
}
#header {
width: 100%;
height: 50px;
}
#menu {
width: 100%;
height: 50px;
}
#content {
width: 100%;
height: 100%;
}
#footer {
width: 100%;
height: 20px;
}
Is it possible with CSS alone or I have to use JavaScript also?
Here is another Pure CSS solution, that works without specifying any height whatsoever.
[this solution deserves its own answer]
Here's a Working Fiddle
Why is it good?
because maybe your header will change one day affecting his height, or your menu will grow, or your footer will need an extra line causing his height to grow..
all of that changes will cause you to re-fix another height for the changing element, and recalculate the right height for the content.
my solution makes it easier, because all the parts are fluid.
let them take the space they need in the page, and the content will always take the remaining height.
Browser support:
Tested On: IE10, Firefox, Chrome, Safari, Opera. (not working on older IE, not tested on other browsers)
any Downsides?
yes. unfortunately, because of the way that this trick works, you will need to change the arrangement of your HTML.
I found a Pure CSS way to create a div container, with two child div's.
the first will take the exact height he needs, and the second will take the remaining of the container height's.
but what if I want the opposite scenario,
What if I want second div to take his exact space and the first div to take the container's remaining height?
I didn't find an easy way to do that with Pure CSS.
thats why, I actually reverse the order of the divs, the first holds the second data, and the second holds the first data, now we let the first div to take his exact height, and the second stretch to the end of the container as we want, and then I rotate their view via CSS to make them appear in order.
For your case it means that you will have to create the HTML in that order.
Header
Menu
Footer
Content
The Solution:
HTML:
<div class="Container">
<div class="Header">I'm in the header</div>
<div class="Menu">I'm in the menu</div>
<div class="HeightTaker">
<div class="Wrapper Container Inverse">
<div>
<div class="Footer">I'm in the footer</div>
</div>
<div class="HeightTaker">
<div class="Wrapper">
<div class="Content">
I'm in the content
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
*
{
margin: 0;
padding: 0;
}
html, body, .Container
{
height: 100%;
}
.Container:before
{
content: '';
height: 100%;
float: left;
}
.HeightTaker
{
position: relative;
z-index: 1;
}
.HeightTaker:after
{
content: '';
clear: both;
display: block;
}
.Wrapper
{
position: absolute;
width: 100%;
height: 100%;
}
.Inverse, .Inverse > *
{
-moz-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-o-transform: rotate(180deg);
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.Header
{
/*for demonstration only*/
background-color: #bf5b5b;
}
.Menu
{
/*for demonstration only*/
background-color: #6ea364;
}
.Content
{
height: 100%;
overflow: auto;
/*for demonstration only*/
background-color: #90adc1;
}
.Footer
{
/*for demonstration only*/
background-color: #b5a8b7;
}
Here's a thought. May not work for your specific problem, but it does address the issue of mixing pixels and percents. Under the current definition of the problem, you use a fixed height for both the top (header, menu) and bottom (footer). But you want to have the content take up the rest. One solution would be to pad the top and bottom of the container with the same height of the header and menu on top and the same height as the footer on the bottom. The problem then is that you have a 100% height container plus 100px on top and 20px on bottom. But there's a CSS convention for that. It's called box-sizing and is very cross browser compatible (as long as you include -moz). in effect, it calculates 100% height after including the padding. Therefore, 100% height plus all the padding still equals 100% height.
In practice it looks like this
HTML
<div class="container">
<div class="header"></div>
<div class="menu"></div>
<div class="content"></div>
<div class="footer"></div>
</div>
CSS
html, body, .container {
min-height: 100%;
background:#eee;
}
.header {
height: 50px;
position: relative;
z-index: 1;
}
.menu {
height: 50px;
position: relative;
z-index: 1;
}
.footer {
height: 20px;
width: 100%; /* needed because this one is position absolute */
bottom: 0%;
position:absolute;
}
.content {
height: 100%;
width: 100%; /* needed because this one is position absolute */
top: 0%;
left: 0%;
padding-top: 100px;
padding-bottom: 20px;
position:absolute;
box-sizing: border-box; /* here's the kicker */
-moz-box-sizing: border-box;
overflow: auto; /* don't panic. they take the place of normal scroll bars*/
}
Demo
http://jsfiddle.net/WLR5S
Source
http://jsfiddle.net/WLR5S/show
http://jsfiddle.net/WLR5S/6/show (with -moz for firefox)
Pros
Obviously, the point is that you can have 100% height elements with padding to compensate for footer and header
Cons
You have to use position absolute for the content and footer, and you have to apply position relative with z-index to the header area
EDIT
After a little more experimenting, I found that it's probably best to use height instead of min-height and apply overflow:auto or the like. That way the page has appropriate sidebars if the content gets to be too large: http://jsfiddle.net/WLR5S/2/ or http://jsfiddle.net/WLR5S/3/
Pure CSS Solution
using calc() (CSS3)
Working Fiddle
HTML:
<div id="container">
<div id="header">header</div>
<div id="menu">menu</div>
<div id="content">content</div>
<div id="footer">footer</div>
</div>
CSS:
html, body {
margin: 0px;
height: 100%;
/*min-width: 1024px;
min-height: 500px;*/ /*You can uncomment that back if you want)*/
}
#container {
height: 100%;
}
#header {
height: 50px;
}
#menu {
height: 50px;
}
#content {
height: calc(100% - 120px); /*120 = 50 + 50 + 20*/
overflow: auto;
}
#footer {
height: 20px;
}
notice I removed your width:100% because this is the default behavior of a block element like a div.
This can also be done without stating any height at all, with Pure CSS.
Check my second answer in that page.
SO,
I've created a four-column fluid-width layout for a site, and I'm working on placing a fluid square DIV within one of my columns. There are a few techniques I've found to achieve this - namely, setting padding-bottom to the same percentage as the width - but none of these seem to work when the DIV contains content.
Is there a way to maintain a 1:1 (square) ratio on a fluid DIV when that DIV contains content?
Here's my HTML:
<div id="leftmostcolumn">
<div id="logo"></div>
</div>
<div id="leftcolumn"></div>
<div id="rightcolumn"></div>
<div id="rightmostcolumn"></div>
And my CSS:
body {
width: 100%;
height: 100%;
background-color: red;
}
#leftmostcolumn {
position: absolute;
top: 0;
left: 0;
width: 25%;
height: 100%;
background-color: blue;
}
#leftcolumn {
position: absolute;
top: 0;
left: 25%;
width: 25%;
height: 100%;
background-color: green;
}
#rightcolumn {
position: absolute;
top: 0;
left: 50%;
width: 25%;
height: 100%;
background-color: yellow;
}
#rightmostcolumn {
position: absolute;
top: 0;
left: 75%;
width: 25%;
height: 100%;
background-color: gray;
}
#logo {
width:100%;
padding-bottom:100%;
background-color: #aa2d2d;
color: white;
}
And here's a JsFiddle.
The DIV "logo" is the one I'm trying to maintain as a square. Right now, I've used the padding-bottom approach but that doesn't do the trick when there's content in the DIV. Any input is greatly appreciated!
Marca
EDIT:
Getting there...I'm adapting a script I found to find the width of the DIV and then apply that value to the height to keep it a square. However, as it stands now the script doesn't constantly resize the DIV, and it won't allow it to shrink below a certain size. Any thoughts on how to correct either of these issues?
HTML:
<div id="box"></div>
CSS:
#box { width: 75%; height: 50px; background-color: black; }
JQUERY:
$("#box").css("height", function() {
return $(this).width();
});
JsFiddle is here.
This is something I've actually been messing around with for a while, and have come up with a quasi (but not entirely) hacky, CSS-only solution that seems to work on most browsers in the past decade. The trick is to use images, and positioning in a tricky fashion. Consider the following (simplification) of your code.
Markup:
<div class="sqr_box">
your content goes here!
</div>
CSS:
.sqr_box
{
width: 50%; /* or 100px, or 20em, or whatever you want */
border: solid 2px pink;
background-color: grey;
color: white;
}
Now, we can't set the height in terms of percent, so we won't; instead, first we'll go into Photoshop, and make an image that is 2x2 px, transparent, or background-colored. Next we'll add the following to your markup:
<div class="sqr_box">
<img src="images/sizers/2x2.png" class="sizer">
<div class="content">your content goes here!</div>
</div>
and THIS to your CSS:
.sqr_box
{
width: 50%; /* or 100px, or 20em, or whatever you want */
position: relative; /* static positioning is less than ideal for this scenario */
}
.sqr_box > img.sizer
{
display: block; /* images default to an inline-block like thing */
width: 100%;
height: auto; /* CLUTCH!!! this ensures that the image's height changes to maintain proportions with it's width */
visibility: hidden;
}
.sqr_box > .content
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; /* Our parent element now has a dynamically assigned height, this will work */
border: solid 2px pink;
background-color: grey;
color: white;
}
Best of all, this will work for any sized ratio of box you'd want! Just change the proportions of the image!
Hope this is all still relevant to you, 3 months later.
-Sandy
Put all four columns in one div. set that div to 100% width and set the font size to 100em
Have each of your four columns have a width of 25em instead of 25%
Have your logo width and height set to 25em each