I have a specific layout that is causing me HUGE headaches. Here is an image:
My goal is to have the "Side panel" ALWAYS equal the height of the container. The "Enrollment Application" section is at 100% height already.
Current Markup
<body>
<div id="container" class="pure-g">
<div class="pure-u-md-1-4 pure-u-1 panel" id="left-panel">
<div class="panel-row">
<div class="panel p">
<div class="inner-panel">
<div class="panel-logo">
"Logo here text"
</div>
</div>
</div>
</div>
<div class="panel-row">
<div class="panel p">
<div class="inner-panel">
<nav class="panel">
</nav>
</div>
</div>
</div>
</div>
<div id="right-panel" class="pure-u-md-3-4 pure-u-1 panel p">
<div class="inner-panel">
<header class="pure-g">
<div class="pure-u-md-1-4 pure-u-1 header-logo">
LOGO Would go here, of course.
</div>
<div class="pure-u-md-3-4 pure-u-1 header-title">
<h1>Consumers Energy</h1>
<h1><strong>CARE 3.0 Program</strong></h1>
<h1>Enrollment Application</h1>
</div>
</header>
<div id="content">
"Enrollment application text..."
</div>
</div>
</div>
</div>
</body>
Current CSS
.panel {
box-sizing: border-box;
height: 100%;
display: table-cell;
}
.panel.p {
padding: 3px;
}
.panel .panel-row {
display: table-row;
}
.panel .inner-panel {
border-radius: 5px;
padding: 10px;
width: 100%;
box-sizing: border-box;
background-color: red;
}
Here is an alternative fiddle to play with: http://jsfiddle.net/3c3tqo3e/ but I really don't want to use a table...
Q How can we stack two divs and make their heights = 100% of parent? The "Logo here.." section will be an auto height.
NOTE I would really prefer an answer that is responsive-friendly. I am using PureCSS for the sections. (This means that absolute positioning is not preferred) Also, strongly prefer just css/html. Thanks!
I have created a demo for you, but it will work on all modern browsers only. and you might have to read flexbox and its demos in details to make your work more meaningful in terms of performance and maintenance.
Also read on calc() here
HTML:
<main>
<aside>
<div class="logo">Logo</div>
<div class="aside-content">Other Content</div>
</aside>
<section>Section</section>
</main>
CSS:
html, body{ height: 100%; }
main{
height: 100%; background: teal; padding: 2em; box-sizing: border-box;
display: flex; flex-direction: row;
}
aside{
height: inherit; margin: 0 1em 0 0; width: 200px;
}
aside .logo{
background: #fff; height: 140px;
}
aside .aside-content{
background: #fff; height: calc(100% - 150px); margin: 10px 0 0 0;
}
main section{
height: inherit; background: #fff; flex-grow: 2;
}
Demo Fiddle: http://jsfiddle.net/vpqqyo9L/1/
Edit:
Here's one for IE9: http://jsfiddle.net/vpqqyo9L/3/
Related
Hello I am just making a base template to help me make a website a lot better, I have just recently started using bootstrap and have noticed that when I resize my browser (for example to a mobile size) it is overlapping on my footer?
Does anyone know why this is happening?
Here are some images of when I add more text or resize:
Like I say I am fairly new to bootstrap and am most likely doing something really stupid which is easy to fix :)
Here is my css:
html, body { height:100% }
nav {
margin: 0;
padding: 0;
}
div {
display: block;
}
.col-centered {
float: none;
margin: 0 auto;
}
.center {
margin-left:auto;
margin-right:auto;
margin: 0 auto;
}
.left {
float: left;
}
.right {
float: right;
}
.container {
width: 100%;
margin: 0;
padding: 0;
height:100%;
background:red;
}
.content {
padding: 5rem 1.5rem;
text-align: left;
height:90%;
width:75%;
margin:0 auto;
background: green;
}
footer {
background: grey;
height:10%;
width:75%;
margin:0 auto;
}
Here is my main HTML:
<div class="container">
<div class="content">
<div class="row">
<div class="col-md-auto col-centered">
<h1>Base Template Title</h1>
<p>Text would go here...</p>
</div>
</div>
</div>
<?php include "footer.php" ?>
EDIT: I forgot to include the footer, if you think that I need to add this for you then please let me know.
Thank you very much for even looking at this post!
EDIT 2:
Here is the code for my footer:
<footer>
<div class="row">
<div class="col-md-auto">
<p class="float-right">Back to top</p>
<p>© 2017 Company, Inc. · Privacy · Terms</p>
</div>
</div>
</footer>
Here is the link to the website:
http://81.131.193.35/
Remove the height of .content
.content {
padding: 5rem 1.5rem;
text-align: left;
width: 75%;
margin: 0 auto;
background: green;
}
and also remove the height of .container
.container {
width: 100%;
margin: 0;
padding: 0;
background: red;
}
I would wrap the footer.php in a pair of divs and apply a row and col-md-auto class to it. It looks like the footer is maybe styled with an absolute or even a static display. This is making the footer not play along with the other divs
<div class="container">
<div class="content">
<div class="row">
<div class="col-md-auto col-centered">
<h1>Base Template Title</h1>
<p>Text would go here...</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-auto">
<?php include "footer.php" ?>
</div>
</div>
</div>
Apologies if this has been asked and answered already, as I was not able to find an appropriate solution to this problem.
I need to work on a site navigation that require some numbers to be placed inside circles. The circles will increase in diameter based on the length of the text inside. I'm looking for a very elegant, preferably css only solution for this. Please note the alignment of the circles here with respect to the entire row and label text on the mock up attached.
It required some CSS trickery to get this working, but this works in the latest version Chrome and Firefox. Let me know if you have any other questions.
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
color: #9653DA;
font: 600 14px sans-serif;
}
.nav-table {
display: table;
text-align: center;
}
.nav-row {
display: table-row;
}
.nav-col {
display: table-cell;
}
.text {
margin: 1em;
}
.icon {
display: inline-block;
border-radius: 100%;
border: 2px solid;
min-width: 10px;
padding: 0.5em;
margin: 0.5em;
}
.icon div {
position: relative;
height: 0;
padding: 50% 0;
top: -7px; /* Half of font-size, in our case it is (14px / 2) */
}
<div class="nav-table">
<div class="nav-row">
<div class="nav-col">
<div class="icon">
<div>20</div>
</div>
</div>
<div class="nav-col">
<div class="icon">
<div>300</div>
</div>
</div>
<div class="nav-col">
<div class="icon">
<div>50</div>
</div>
</div>
<div class="nav-col">
<div class="icon">
<div>1</div>
</div>
</div>
</div>
<div class="nav-row">
<div class="nav-col">
<div class="text">Japanese</div>
</div>
<div class="nav-col">
<div class="text">Main Course</div>
</div>
<div class="nav-col">
<div class="text">Non Vegetarian</div>
</div>
<div class="nav-col">
<div class="text">Beginners</div>
</div>
</div>
</div>
A common, modern design technique for responsive websites is to use a screen-height element as the above-the-fold content wrapper, and have all other content available below. Here's a good discussion on this technique. Here's a demo at CodePen:
#fullscreen {
width: 100%;
height: 100%;
display: table;
}
#fullscreen .fullscreen-content {
display: table-cell;
text-align: center;
vertical-align: middle;
}
<div id="fullscreen">
<div class="fullscreen-content">
...
</div>
</div>
How can I make a Bootstrap 3 row behave in this manner?
I'm facing this challenge. Here's my current solution.
.full-ht {
height: 100vh;
position: relative;
}
.full-ht-content {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
margin-left: -15px;
padding-left: 15px;
}
<div class="container-fluid">
<div class="row full-ht">
<div lass="col-xs-12 full-ht">
<div id="page-top-content" class="full-ht-content">
Above-the-fold content.
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
Other content.
</div>
</div>
</div>
Fiddle demo
I created a sample of the situation in JSFiddle
I updated JSFiddle Here: http://jsfiddle.net/x11joex11/r5spu85z/8/ (this shows in more detail how the sticky footer works so well, just height issue).
I want the table to take up the remaining height, for some reason the height: 100% is not working?
From my tests it appears to be related to min-height: 100%. I need that to make the sticky footer work.
So a solution for me is another way to do the sticky footer, or a way to still give 100% height to the elements within.
HTML
<div class="wrapper">
<div class="wrapper_content">
<!--Header-->
<div class="header">Header</div>
<div class="content table">
<div class="row">
<div class="l_cell">left</div>
<div class="r_cell">right</div>
</div>
</div>
<div class="push"></div>
</div>
</div>
<!--Footer-->
<div class="footer">Footer</div>
CSS
body, html {
margin: 0;
padding: 0;
height: 100%;
}
.wrapper {
min-height: 100%;
margin: 0 auto -50px;
background-color: black;
}
.container {
}
.table {
display: table;
height: 100%;
width: 100%;
background-color: yellow;
}
.row {
display: table-row;
}
.l_cell {
display: table-cell;
width: 265px;
background-color: orange;
}
.r_cell {
display: table-cell;
background-color: purple;
}
.header {
background-color: red;
width: 100%;
}
.footer {
height: 50px;
background-color: green;
}
.push {
height: 50px;
}
Here is one solution, http://jsfiddle.net/7t4RT/
This question has been asked many times before. I recommend viewing some of the answers already provided here at StackOverflow.
The reason that we're unable to use height: 100% in your example is because no height has defined. The CSS is wondering... well how high is 100%? There are many ways to get our elements to fill their containers in either HTML or CSS. Simply choose one you feel works better for you.
The following is one of many ways to solve this problem.
HTML:
<div class="fill-height">
<p>Filled</p>
</div>
<div class="cant-fill-height">
<p>Not Filled</p>
</div>
CSS:
body {
background-color: #ccc;
}
.fill-height {
background-color: #0ff;
width: 200px;
position: absolute;
top: 0;
bottom: 0;
}
.cant-fill-height {
background-color: #ff0;
width: 200px;
height: 100%;
margin-left: 200px;
}
I found an answer to my problem for now, but it requires the use of display:table which I recall causes other errors down the road, but it does appear to work right now to create the layout I had in mind.
http://jsfiddle.net/x11joex11/r5spu85z/10/
CSS
body,html{margin:0;padding:0;height:100%;}
.wrapper{}
.table{
height:100%;
width:100%;
display:table;
background-color:yellow;
}
.row{display:table-row;}
.cell{display:table-cell;}
.footer{background-color:green;height:50px;}
.header{background-color:red;height:30px;}
.left{background-color:purple;}
.right{background-color:orange;}
HTML
<div class="wrapper table">
<div class="header row">
Header<br/>
Header2
</div>
<div class="content table">
<div class="row">
<div class="cell left">leftt<br/>left2</div>
<div class="cell right">right<br/>right2</div>
</div>
</div>
<div class="footer row">
Footer
<br/>
Footer2
</div>
</div>
An answer not requiring the use of display:table or table tags is preferred.
Notice the sticky footer effect remains.
I managed to overflow a parent div which is a content wrapper with the following CSS, however now this div hides content behind it. How can I do this right?
jsfiddle: http://jsfiddle.net/YMSvU/
My HTML File
<div class="contentwrapper">
<div class="promotional_outer">
<div class="promotional">
...
</div>
</div>
<div class="footer">
... this footer is overflown by the promotional div ...
</div>
</div>
My CSS File
.contentwrapper {
width: 1150px;
text-align: left;
margin: 0px auto;
}
.promotional_outer{
background-color: #8fcbe5;
position:absolute;
left: 0;
width: 100%;
overflow: auto;
margin: 0px auto;
clear: both;
}
.promotional {
background-color: #30a3da;
padding: 75px;
color: #fff;
width: 1000px;
margin: 0px auto;
clear: both;
}
I had exactly the same problem on a site I'm working on at the moment.
Turns out the only solution is to do it like this:
<div class="wrapper">
<div class="header">
...
</div>
</div>
<div class="promotion_outer">
<div class="wrapper">
<div class="promotion_inner">
...
</div>
</div>
</div>
I think it would be best to adjust your html to do something like this:
<div class="inner">
<p>Content</p>
</div>
<div class="promo">
<div class="promo--inner">
<p>Content</p>
</div>
<div class="promo--callout">
<p>Promo callout</p>
</div>
</div>
<div class="inner footer">
<p>Footer content</p>
</div>
Check out this fiddle: http://jsfiddle.net/kFShb/2/
You can bypass the element's flow by using z-index.
.footer {
position: relative;
z-index: 10;
}
Fiddle
Remove position: absolute from .promotional_outer.
Absolute positioning removes an element from the normal document flow.
Just delete position: absolute; and left: 0; in your CSS
.promotional_outer{
background-color: #8fcbe5;
width: 100%;
overflow: auto;
margin: 0px auto;
clear: both;
}
This should solve your problem.