I have a sidebar on the left which is fixed (width: 400px) and content on the right which should contain the rest of the space. While using fill-available: the sidebar changes its width to 309px.
Why doesn't fill-available work properly? Is there a possibility to set content in the remained space?
Please find the codepen here: https://codepen.io/ullaakut/pen/eQxbvY
Thanks!
As here
fill-available ???. One of life's great mysteries
You can use calc (400px of sidebar width + padding=480px)
body {
display: flex;
height: 100vh;
}
#sidebar {
width: 400px;
height: 100%;
}
#content {
width: calc(100% - 480px);
}
/* Just style related CSS rules, deleting those does not fix the problem. This is just to make the codepen clearer. */
body {
color: white;
font-size: 14pt;
margin: 0;
}
#sidebar {
padding: 20px;
background: #3c3c3c;
}
#content {
padding: 20px;
background: grey;
}
<body>
<div id="sidebar">This should be exactly 400 pixels but it is 336.83px</div>
<div id="content">This should fill the available space and not take space over the sidebar</div>
</body>
fill-avaible is something that have different behaver in different browser but if you add width: 100% before it can be used from that browser that don't support it.
body {
display: flex;
height: 100vh;
}
#sidebar {
width: 400px;
height: 100%;
}
#content {
width: 100%;
width: -moz-available;
width: -webkit-fill-available;
width: fill-available;
}
/* Just style related CSS rules, deleting those does not fix the problem. This is just to make the codepen clearer. */
body {
color: white;
font-size: 14pt;
margin: 0;
}
#sidebar {
padding: 20px;
background: #3c3c3c;
}
#content {
padding: 20px;
background: grey;
}
<body>
<div id="sidebar">This should be exactly 400 pixels but it is 336.83px</div>
<div id="content">This should fill the available space and not take space over the sidebar</div>
</body>
Related
Question
I have an aside div and a main div which have some content.
Is it possible to specify that the orange box (aside content) + the blue box (the main content) are overall centered on the page and that the remaining space should be distributed equally to each side of the content?
Moreover while the aside content's width is fixed, the main content width should be responsive. Which means that while shrinking the width of the viewport:
fist the space on the sides of each content shrinks while the content divs remain the same
when there's no more space left on the sides, the main content shrinks
Limits
The answer should be limited to CSS features that have a global usage percentage of 98%+ on caniuse.com (for example flexbox). This mainly excludes CSS grids.
Playground
Here you can find the above playground.
What I tried
I'm not sure where to start. I tried:
margin: auto; on the aside content and main content
padding: auto; on the content parents
display: inline + text-align:right/left
but they all have the same problem that you either have to specify the width of the parents and you don't really have them centered.
A Stack Snippet for those who wish to be able to easily adapt their answer to existing code:
aside,
main {
min-height: 200px;
text-align: center;
color: white;
font-family: Verdana;
}
body {
display: flex;
margin: 0;
padding: 0;
}
aside {
background-color: red;
flex: 1 1 300px;
}
aside .content {
width: 200px;
background-color: orange;
max-height: 100px;
line-height: 100px;
margin-left: auto;
}
main {
background-color: green;
flex: 1 1 800px;
}
main .content {
background-color: blue;
line-height: 100px;
max-height: 100px;
max-width: 800px;
}
<body>
<aside>
<div class="content">
Aside content
</div>
</aside>
<main>
<div class="content">
Main content
</div>
</main>
</body>
This seems to do the trick. I drew inspiration from #Aivaras' answer for sizing down below main's target width, but also the realization that flexbox does a lot of heavy lifting for us. I've specified the width of aside and main, but since they are flex-basis: auto, the width is only used as the basis of the actual width. Or so I think.
aside,
main {
min-height: 200px;
text-align: center;
color: white;
font-family: Verdana;
flex: 1 1 auto;
}
* {
box-sizing: border-box
}
body {
margin: 0;
padding: 0;
display: flex;
}
aside {
background-color: red;
width: 200px;
min-width: 200px;
}
aside .content {
width: 200px;
background-color: orange;
max-height: 100px;
line-height: 100px;
margin-left: auto;
}
main {
background-color: green;
width: 800px;
}
main .content {
background-color: blue;
line-height: 100px;
max-height: 100px;
}
#media (min-width: 1000px) {
main .content {
width: 800px;
}
}
#media (max-width: 999px) {
main .content {
width: 100%;
}
}
<body>
<aside>
<div class="content">
Aside content
</div>
</aside>
<main>
<div class="content">
Main content
</div>
</main>
</body>
I added margin: auto to both the orange and blue boxes.
Moreover, I gave the blue box a percentage width
main .content {
background-color: blue;
line-height: 100px;
max-height: 100px;
max-width: 800px;
margin: auto;
width: 80%
}
This makes the blue box responsive. Not sure if this is what you wanted.
Add margin: auto to both content divs and media query for viewport width less than 1200px to set main content width to 100% then.
#media only screen and (max-width:1000px){
.main-content{width:100%}
}
My code is here: https://jsfiddle.net/yaphurt0/8/
I tried to get rid of the rest of the webpage to show just the necessary section, but it ended up not displaying correctly, and I couldn't figure out why for the life of me.
Regardless, I've trimmed away what I could and marked in comments in the css file the relevant code.
My problem is that I am trying to display 3 boxes at the bottom of the page next to each other. As the window shrinks I use a media query to increase the width of the boxes so there are 2 per line, and then 1 if the the window shrinks further. Of course this means the boxes take up more room vertically, meaning they spill out as the parent div doesn't scale with it.
I have tried overflow: auto; to #me, however this just added a scrollbar to the content, when instead I want the #me to scale accordingly to contain its children. This is a pretty big problem which is stumping me, as you can see from the main text ("Hi I'm Danny..."), that also suffers from the same issues if the webpage is made very wide and shallow.
As much as I'm looking for a solution, I'm really hoping for an explanation so I can understand why the webpage is behaving as it is/what makes the parent scale, so in the future I don't just copy and paste and hope.
#me {
width: 100%;
height: 45%;
background-color: white;
}
#me .container {
width: 60%;
height: 100%;
margin: 0 auto;
}
#me .container .introduction {
height: 30%;
margin-bottom: 5%;
}
#me .container .introduction .title,
.subInfo {
width: 80%;
color: #262626;
text-align: center;
margin: 0 auto;
border-bottom: 2px solid orange;
}
#me .container .introduction .title {
font-family: 'Unica One', cursive;
text-transform: uppercase;
font-size: 4vw;
}
#me .container .introduction .subInfo {
text-align: center;
font-family: 'Unica One', cursive;
text-transform: uppercase;
font-size: 2vw;
}
#me .container .infoBody {
width: 100%;
height: 50%;
min-height: 75px;
margin: 0 auto;
}
#me .container .infoBody .columnInfo {
float: left;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 31.5%;
margin: 2px;
background-color: orange;
border: 2px solid #e8eaed;
border-radius: 5px;
}
#media only screen and (min-width: 500px) and (max-width: 1000px) {
.minimalHeading {
font-size: 5.5vw;
}
#me .container .infoBody .columnInfo {
width: 48.5%;
margin: 0 auto;
}
.minimalHeading .contactMe a {
font-size: 4vw;
}
}
#media only screen and (max-width: 500px) {
.minimalHeading {
font-size: 7.5vw;
}
#me .container .infoBody .columnInfo {
width: 90%;
margin: 0 auto;
}
.minimalHeading .contactMe a {
font-size: 5vw;
}
}
<div id="me">
<div class="container">
<div class="introduction">
<p class="title">My Skillset</p>
<p class="subInfo">The standard Web-development stuff</p>
</div>
<div class="infoBody">
<div class="columnInfo">Hi</div>
<div class="columnInfo">There</div>
<div class="columnInfo">You!</div>
</div>
</div>
</div>
The problem is in float:left property of the .columnInfo element and the height: 45% of #me element. If you remove those, you will see that #me will contain all three .columnInfo elements, but they will be stacked on top of each other. You can use display:flex on the .infobody to make them wrap next to each other. You will have to give your .columninfo elements an absolute height though.
You can use flex, like mentioned. Or simply add a clear to infoBody, like so:
// html
<div class="infoBody clear">
//css
.clear::after {
content: '';
display: table;
clear: both;
}
The problem is your .columnInfo. Elements with the float property are no longer part of the normal flow of the page, so the containing div doesn't know how high they are. The clear solves this problem by adding a hidden pseudo element below those columns and forcing the containing div down.
At the top level of my website layout are 4 div tags.
The first one is a full width header section, with css:
#header {
margin-top: 0px;
height: 70px;
border: 4px double rgb(255,255,255);
border-radius: 20px;
background: rgb(88,150,183) no-repeat fixed left top;
padding: 0px;
}
At the bottom is a full width footer:
#footer {
clear: both;
margin: 0px;
color:#cdcdcd;
padding: 10px;
text-align: center;
border: 4px double rgb(88,150,183);
border-radius: 20px;
}
On the left is my main menu section:
#categories {
float:left;
width:150px;
border: 4px double rgb(88,150,183);
border-radius: 20px;
}
All of those 3 elements work fine. They're in the right place and that doesn't change whatever screen resolution the user has on their monitor, or whether they view it on not maximum screen size.
My problem is with the main element of the page - where all the interesting stuff is. It's directly to the right of the menu div - or rather, it should be. My css is:
#main {
float:right;
min-height: 440px;
width: 80%;
margin-bottom: 20px;
padding:20px;
border: 4px double rgb(88,150,183);
border-radius: 20px;
}
width 80% works OK for most of my users, but for those with less resolution, the main element shifts below the menu, which is ghastly.
What I would ideally like is for the width set in the css #main to be something like (100% - 170px), thus leaving a nice margin between the menu and the main bit at all times and never pushing it below the menu. However, css standards don't fulfil that desire yet!
Could someone suggest how I amend my css to give me a nice clean page that's clean for all my users? Or do I need to go back to setting out my page using tables?
Using CSS3 flex
* { box-sizing: border-box; margin: 0; }
#parent{
display: flex;
}
#aside{
width: 170px; /* You, be fixed to 170 */
background: #1CEA6E;
padding: 24px;
}
#main{
flex: 1; /* You... fill the remaining space */
background: #C0FFEE;
padding: 24px;
}
<div id="parent">
<div id="aside">Aside</div>
<div id="main">Main</div>
</div>
Using CSS3 calc
width: calc(100% - 170px);
Example:
* { box-sizing: border-box; margin: 0; }
#aside {
background: #1CEA6E;
width: 170px;
float: left;
padding: 24px;
}
#main {
background: #C0FFEE;
width: calc(100% - 170px);
float: left;
padding: 24px;
}
<div id="aside">Aside</div>
<div id="main">Main</div>
Using float: left; and overflow
* { box-sizing: border-box; margin: 0; }
#aside{
width: 170px; /* You, be fixed to 170 */
float: left; /* and floated to the left */
padding: 24px;
background: #1CEA6E;
}
#main {
background: #C0FFEE;
padding: 24px;
overflow: auto; /* don't collapse spaces */
/* or you could use a .clearfix class (Google for it) */
}
<div id="aside">Aside</div>
<div id="main">Main</div>
Using style display: table;
* { box-sizing: border-box; margin: 0; }
#parent{
display: table;
border-collapse: collapse;
width: 100%;
}
#parent > div {
display: table-cell;
}
#aside{
width: 170px; /* You, be fixed to 170 */
background: #1CEA6E;
padding: 24px;
}
#main{
background: #C0FFEE;
padding: 24px;
}
<div id="parent">
<div id="aside">Aside</div>
<div id="main">Main</div>
</div>
Is this what you are looking for? You don't need any css3
Dont need any css3
.wrapper {
width: 800px;
height: 800px;
background-color: blue;
}
.content {
width: auto;
height: 100%;
background-color: yellow;
}
.menu {
width: 170px;
height: 100%;
float: left;
background-color: red;
}
<div class="wrapper">
<div class="menu">Menu</div>
<div class="content">
Aside
</div>
</div>
You can use 'calc' function supported by all modern browsers and IE9+, or switch to flexbox (supported by IE11+)
See this pen: https://codepen.io/neutrico/pen/MyXmxa
width: calc(100% - 170px);
Keep in mind that all borders matter unless you set 'box-sizing' to 'border-box' (or just remove these borders and apply them on child elements).
I'm having an issue with the age-old problem of 100% height. I know this problem is asked a lot, and I have reviewed this, this, this and countless more. I want to create a basic fixed header, side navigation and main article area, that looks like this:
But, for some reason it's looking like the following (I put 200px padding in the blue bar just to have it appear).
My HTML looks like the following:
<!DOCTYPE html>
<html>
<head></head>
<body>
<header></header>
<section>
<nav></nav>
<article></article>
</section>
</body>
</html>
And my CSS looks like this:
* { -moz-box-sizing: border-box; background-color: transparent; border: 0 none; color: #000000; list-style: none outside none; margin: 0; outline: medium none; padding: 0; text-decoration: none; }
body, html { height: 100%; }
header {
background: #6c6363;
top: 0;
z-index: 100;
height: 100px;
left: 0;
position: fixed;
right: 0;
}
section {
min-height: 100%;
overflow: auto;
position: relative;
padding-top: 100px;
}
nav {
background-color: #747feb;
float: left;
min-height: 100%;
padding-bottom: 200px;
width: 150px;
}
article {
background: #74eb8a;
margin: 20px 20px 20px 170px;
min-height: 100%;
padding: 20px;
position: relative;
}
As you can see, nothing too special. I know that section needs 100% height, and so does body and html. I can position the nav and acticle absolutely, and make something like this:
But, in my actual site (I simplified it for this), the side navigation has drop-downs, which will change the navigation height dynamically. This causes the following to happen:
Absolutely positioned elements won't change the height of the relative wrapper, so I need to float them. However, floating them doesn't make the height become 100%.
I have even made a JSFiddle to show the problem: http://jsfiddle.net/g8VjP/
If anybody can help me out, I'll really appreciate it.
Thank you!
PS: I'm all for using calc() if it works!
SOLUTION
I modified Mayank's answer and managed to come up with a solution. I had to add a couple wrappers, but it worked. My HTML now looks like the following:
<!DOCTYPE html>
<html>
<head></head>
<body>
<header></header>
<section>
<nav></nav>
<div class="cell-wrap">
<div class="table-wrap">
<article></article>
</div>
</div>
</section>
</body>
</html>
With the key being the cell-wrap and table-wrap. I have the nav is one table-cell and the .cell-wrap is another. With the nav having a fixed with, the .cell-wrap fills in the rest. However, I want spacing around the article, so I added .table-cell and made that into a table. That then expands and fills the height and width of the .cell-wrap. I then add 30px padding to give a space around the article (because margins don't work on table-cells) and made the article a table cell.
A bit confusing, but it works!
My CSS is as follows:
* { -moz-box-sizing: border-box; background-color: transparent; border: 0 none; color: #000000; list-style: none outside none; margin: 0; outline: medium none; padding: 0; text-decoration: none; }
body, html { height: 100%; }
header {
background: #6c6363;
top: 0;
z-index: 100;
height: 100px;
left: 0;
position: fixed;
right: 0;
}
section {
display: table;
height: 100%;
min-height: 100%;
padding-top: 100px;
position: relative;
width: 100%;
}
nav {
background-color: #657182;
display: table-cell;
min-height: 100%;
width: 150px;
}
.cell-wrap {
display: table-cell;
height: 100%;
min-height: 100%;
}
.table-wrap {
display: table;
height: 100%;
padding: 30px;
width: 100%;
}
article {
background: none repeat scroll 0 0 #FFFFFF;
display: table-cell;
min-height: 100%;
padding: 20px 20px 120px;
z-index: 1;
}
Here's the fiddle. Not sure why there's a scroll bar at the bottom though, but it seems fine if you show it just normally in your browser.
height: 100% means 100% of the containing block's height. Your containing block, section, does not have a defined height (but a min-height instead). You can either:
Change min-height: 100% on section to height: 100%. or...
Keep min-height: 100% and add a height: 1px (or anything less than 100%) which will be overridden by min-height.
The key here is to have a height property set on the parent.
display:table and display:tabel-cell are you friends here mate!!
Updated your fiddle to slight workarounds and here you go : DEMO
CSS to modify :
section {
min-height: 100%;
overflow: auto;
position: relative;
padding-top: 100px;
display:table;/* addition */
}
article {
background: #74eb8a;
margin: 0px 20px 0px 170px;
min-height: 100%;
width:100%;
height: 100%;
position: relative;
display:table-cell; /* addition */
}
Additionally i took the liberty to remove the extra padding that you have placed inside article , insert a div or section inside article and assign padding to it if it works!!
try this :
nav {
background-color: #747feb;
width: 150px;
position : absolute;
top : 100px;
left : 0;
bottom : 0;
}
article {
background: #74eb8a;
position: absolute;
top : 100px;
left : 150px ; /* nav width*/
bottom : 0;
right : 0;
}
Soooooo I'm making a sticky footer in Css. It doesn't work the way I want it to. The footer sticks to the bottom, but I also want 100% height for the page. This doesn't work, and I've tried a lot. Currently, the footer gets in the way of the container, and they overlap. If i give the container margin-bottom: 70px;, it creates extra unwanted space when the content is very small, making an unnecessary scrollbar.
Here's my code:
<html><head>
<style type='text/css'>
body {
font-family: 'Open Sans', sans-serif;
font-size: 20px;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.container {
margin-left: auto;
margin-right: auto;
text-align: left;
width: 800px;
height: auto !important;
min-height: 100%;
}
.bold-show {
font-family: Helvectica, sans-serif;
font-size: 96px;
background-color: rgba(0, 0, 0, 0.95);
color: #eeeeee;
padding: 50px;
}
#footer {
position: relative;
height: 70px;
width: 100%;
text-align: center;
display: table;
margin-top: -70px;
background-color: rgba(0, 0, 0, 0.9);
color: #eeeeee;
}
#footer div {
display: table-cell;
vertical-align: middle;
}
</style>
</head><body>
<div class='container'>
<div class='bold-show'>
Donuts. Food for thought. This is my place, this fox will guide you. Random filler text for the win.
</div>
</div>
<div id='footer'>
<div>
We support a free and open internet.
</div>
</div>
</body></html>
Also, this is not the actual site. Just testing to implement on real site.
I think that this is what you are looking for:
<div id="wrapper">
<header></header>
<div id="main"></div>
<footer></footer>
</div>
body, html, #wrapper { height: 100%; } /* Create space for elements to be 100% */
#wrapper { display: table; } /* Create a table-structure */
#wrapper > * { display: table-row; } /* All direct children behave as rows */
#wrapper > header,
#wrapper > footer { min-height: 100px; } /* These must be at least 100px */
#main { height: 100%; } /* Let the mid section fill up the remaining space */