I want to have a sticky footer but I also want my main div to end right before the footer for the height but the wrapper is not moving up like it normally would if you have negative margin and I don't know why. Even with a min-height I should be able to move it up. When I increase the negative margin nothing happens. Basically I just need my wrapper to be the 100 percent height minus the height of the footer. The div of interest is the one with the blue background. Now my sidebar is perfectly fine(or at least it should be), as it ends right before the black footer.
html {
height: 100%;
}
body{
height: 100%;
margin:0;
font-family: courier;
font-size: 22px;
color: white;
background-color: #99ff33;
}
#wrapper{
position: relative;
margin-left: auto;
margin-right: auto;
width: 85%;
background-color: blue;
min-height: 100%;
height: calc(100vh-130px);
margin-bottom: -130px;
}
#wrapper:after{
content: "";
display:block;
}
#footer, #wrapper:after{
height: 130px;
}
.wrap {
margin: 0 auto;
width: 100%;
display: flex;
align-items: center;
flex-wrap: nowrap;
}
.sub {
padding: 12px;
width: 32%;
height: 100px;
color: white;
border-right: solid white 1px;
}
.sub:last-child{
border: 0px;
}
#sidebar{
float:left;
background-color: yellow;
height:calc(100vh - 130px);
width: 7.5%;
border: 1px solid blue;
}
#footer {
display: flex;
height: 130px;
width: 100%;
background-color: black;
clear: both;
}
<div id="sidebar"></div>
<div id="wrapper"></div>
<div id="footer">
<div class="wrap">
<div class="sub"></div>
<div class="sub"></div>
<div class="sub"></div>
</div>
</div>
You've mixed up your directions, silly goose!
#wrapper{
position: relative;
margin-left: auto;
margin-right: auto;
width: 85%;
background-color: blue;
min-height: 100%;
height: calc(100vh-130px);
margin-top: -130px;
}
margin-top vs margin-bottom
Remove min-height: 100%; this will make it always make it 100% height of it's parent. Add a space to you math in the calc function and add a border to make it the same size as your toolbar. I also removed the relative position.
Here's the new css for #wrapper:
#wrapper{
margin-left: auto;
margin-right: auto;
border: 1px solid blue;
width: 85%;
background-color: blue;
height: calc(100vh - 130px);
}
And the jsfiddle.
UPDATE:
Here's a quote from MDN about surrounding the operand of calc with whitespace:
Note: The + and - operators must always be surrounded by whitespace. The operand of calc(50% -8px) for instance will be parsed as a percentage followed by a negative length, an invalid expression, while the operand of calc(50% - 8px) is a percentage followed by a minus sign and a length. Even further, calc(8px + -50%) is treated as a length followed by a plus sign and a negative percentage.
The * and / operators do not require whitespace, but adding it for consistency is allowed, and recommended.
You can find out more about calc here.
Also, calc is not highly supported and is subject to change. So I would not recommend using it or at least have a fallback.
Related
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).
Within a footer there are 4 small boxes (created with divs that have a red border around them) and they all need to be made responsive to the width of the browser window as it is re-sized. They need to be centered and have an equal percentage space in between each other no matter what the window size is. Boxes have to stay 100px by 100px.
Here is a rough illustration of what I mean: http://s14.postimg.org/58xunsv0h/example_of_boxes.png
#footer {
width: 100%;
clear: both;
text-align: center;
background-color: black;
opacity: 0.7;
height: 200px;
}
#fbox1 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
float: left;
}
#fbox2 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
float: left;
}
#fbox3 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
float: left;
}
#fbox4 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
float: left;
}
<body>
<div id="footer">
<div id="fbox1">
</div>
<div id="fbox2">
</div>
<div id="fbox3">
</div>
<div id="fbox4">
</div>
<div>
</body>
You have two very simple ways to do that.
If you are targeting modern browsers, then you could make use of the CSS3 flex model. This is the simplest method. You won't have to change anything in your markup. Of course, I would suggest using the footer tag instead of div, because it semantically is a footer.
In this example, I am omitting browser prefixes for two reasons: (1) brevity of this snippet, and (2) most modern browsers now don't need prefixes for this. This example snippet works perfectly as-is in IE-11, FF-34 and GC-39.
The trick is to use the justify-content: space-around; property to distribute the spacing evenly between the divs. Remember, that space-around will cause the space before the first div and space after the last div to be half of the spacing between divs. This will cause, the spacing after the last div to be large because of the size of the div. To mitigate this, use margin: auto.
Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
And: http://dev.w3.org/csswg/css-flexbox/#propdef-justify-content
Fiddle: http://jsfiddle.net/abhitalks/j8fpp0so/2/
Snippet:
footer {
background-color: #000; opacity: 0.7;
height: 200px;
display: flex;
justify-content: space-around; /* this is important */
align-items: center; text-align: center;
}
footer > div {
border: 1px solid red;
width: 100px; height: 100px;
margin: 0 auto; /* this is important */
}
<footer>
<div></div>
<div></div>
<div></div>
<div></div>
<footer>
If you really need to support older browsers i.e. back up to IE-8, FF-31, GC-31 etc., then you could make use of display:table and display:table-cell to achieve that. This is also very simple, but you would have to change your markup a little bit. Just wrap your inner-divs inside wrapper-divs. Apply display to the footer container and the wrapper-divs.
The trick here is to use the display:table-cell on the wrapping divs which, will cause them to evenly distribute. But, this will cause them to stretch. To mitigate this, we apply vertical-align to the wrapper divs and also a margin: auto to the inner divs.
Fiddle: http://jsfiddle.net/abhitalks/Lvysyuuh/
Snippet:
#footer {
background-color: #000; opacity: 0.7;
width: 100%; height: 200px;
display: table; /* this is important */
}
#footer > div {
display: table-cell; /* this is important */
text-align: center; vertical-align: middle; /* this is important */
}
#footer > div > div {
border: 1px solid red;
width: 100px; height: 100px;
margin: 0 auto; /* this is important */
}
<div id="footer">
<div><div></div></div>
<div><div></div></div>
<div><div></div></div>
<div><div></div></div>
<div>
//HTML BLOCK
<div id="footer">
<div class="fbox"></div>
<div class="fbox"></div>
<div class="fbox"></div>
<div class="fbox"></div>
<div>
//CSS BLOCK
#footer {
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
-webkit-align-items:center;
width: 100%;
background: black;
opacity: 0.7;
height: 200px;
}
.fbox {
display: flex;
display: -webkit-flex;
flex: 1;
-webkit-flex: 1;
min-height: 100px;
min-width: 100px;
max-width: 100px;
max-height: 100px;
margin: 0 auto;
border: 5px outset #ea2f2f;
}
Alternative to flex box if you can't use that for compatibility reasons:
The formula for the width of the space between blocks is (footer_width - 4*box_width)/5. Basically you've got a percentage width minus a fixed width: footer_width/5 - 4*box_width/5 ->
20% of footer width - 4*110px/5 -> 20% - 88px. Note the boxes actually take up 110px because of the border. We can do this at least two ways:
Using float:
You want 20% - 88px between each box. Float each box to the left with a margin-left of 20%. Then pull the boxes to the left by setting a negative right margin on each box. this does not effect the first box, but does make the space between boxes correct, so position all of them relatively and move them over 88px to the left.
#footer {
width: 100%;
clear: both;
background-color: black;
opacity: 0.7;
height: 200px;
box-sizing: border-box;
position: relative;
}
div div {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
float:left;
margin-left:20%;
margin-right:-88px;
position:relative;
left:-88px;
top:45px;
}
This way feels a little fragile to me, but I can't immediately see why...
Using absolute positioning:
You want 20% - 88px between each box. Start with the first box. Move it over 20%, then back left 88px by using the left and margin-left properties. Next box we need to move the same, but from the right edge of the first box, so we need to move it over 20% - 88px + 110px to get to the right edge of the first box, then the +20% - 88px again, giving 40% - 66px. Repeat for each box. You can see the pattern below. Note the position:relative on #footer.
#footer {
width: 100%;
clear: both;
background-color: black;
opacity: 0.7;
height: 200px;
box-sizing: border-box;
position: relative;
}
div div {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: absolute;
top:45px;
}
#fbox1 {
left: 20%;
margin-left: -88px;
}
#fbox2 {
left: 40%;
margin-left: -66px;
}
#fbox3 {
left: 60%;
margin-left: -44px;
}
#fbox4 {
left: 80%;
margin-left: -22px;
}
You might also be able to use inline-block with text-align:justify as seen here: "text-align: justify;" inline-block elements properly?
Hope this helps!
EDIT:
Just noticed your req that they be vertically centered as well. In this case, because you have a fixed height container and fixed height boxes, in both cases above you just have to nudge each box down by (200px - 110px)/2 = 45px which can be done with top:45px;.
I am trying to align these blocks so they are expandable, but also inline. But I can't seem to get them to maintain their own space correctly. The layout I am going for is as follows
Where box 2, and 3 are auto expanding to fill in space on whatever resolution is viewing.
JSFiddle and JSFiddle 2
CSS / HTML:
.container {
width: 75%;
min-width: 1005px;
max-width: 1428px;
height: 330px;
margin: 0 auto;
background-color: gray;
}
.box1 {
float: left;
width: 455px;
height: 250px;
background-color: rgba(0, 0, 0, 0.75);
margin-right: 5px;
margin-bottom: 5px;
}
.box2 {
float: left;
width: 75%;
min-width: 340px;
height: 250px;
background-color: rgba(100, 50, 50, 0.75);
margin-right: 5px;
margin-bottom: 5px;
}
.box3 {
float: left;
width: 25%;
min-width: 190px;
height: 250px;
background-color: rgba(50, 50, 100, 0.75);
margin-right: 5px;
margin-bottom: 5px;
}
.box4 {
display: block;
width: 100%;
height: 60px;
background-color: rgba(50, 100, 50, 0.75);
}
<div class="container">
<div class="box1">Test</div>
<div class="box2">Test</div>
<div class="box3">Test</div>
<div class="box4">Test</div>
</div>
Here are three techniques
"Show code snippet" and run to see the complete example.
#1 - display: inline-block and calc
Compatibility: IE 9 + and all modern browsers. There are workarounds to get this working with IE8+ if needed.
The margins and fixed column are removed from the percentage calculation with width: calc(50% - 60px)
The divs are given min-height: 100% and will re-size with content. This is possible thanks to
html,body { height: 100%; }
The inline gap is removed by placing the closing div tags right next to the next opening tag. More info here.
Example
Note: The child selectors can be replaced with class selectors if wanted.
html,
body {
height: 100%;
margin: 0;
}
div {
background: #f50057;
min-height: calc(50% - 5px);
width: calc(50% - 60px);
display: inline-block;
vertical-align: top;
margin-right: 10px;
}
/*Fix first div*/
div:first-child {
width: 100px;
}
/*Remove third divs right margin*/
div:nth-child(3) {
margin: 0;
}
/*Top margin for last div*/
div:last-of-type {
width: 100%;
display: block;
margin: 10px 0 0;
}
<div></div><div></div><div></div><div></div>
#2 - display: table / display: table-cell
Compatibility: IE 8 + and all modern browsers
The top three divs are wrapped in a div with display: table
The top three divs are given display: table-cell
The fixed left div is given a fixed width
To allow the "cells" to evenly spread out the available width, the wrapper is given table-layout: fixed
The spacing between the top three divs is given by the border property. This is calculated into the percentage calculation thanks to * { box-sizing: border-box }
The bottom div is outside the wrapper and is given display: block. It is given a top border to create the faux margin
Example
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
margin: 0;
background: #000;
}
.table {
display: table;
height: 50%;
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}
.table > div {
background: #f50057;
display: table-cell;
border-left: solid 10px #FFF;
}
.table > div:first-child {
border-left: none;
width: 100px;
}
.footer {
width: 100%;
display: block;
background: #f50057;
height: 50%;
border-top: solid 10px #FFF;
}
<div class="table">
<div></div>
<div></div>
<div></div>
</div>
<div class="footer"></div>
#3 - The future! display: flex
Compatibility: IE 11, all modern browsers and Safari (with -webkit- prefix)
This is my favourite! Mainly due to the fact that I created it in about 3 minutes.
The top three divs are wrapped in a container with display: flex
The first div is given its fixed pixel width and flex: 0 0 auto. This tells the div not to grow or shrink
The 2 flexible divs are given flex: 1 and will grow and shrink as needed; automatically ignoring the fixed column
The last div is outside the flex container and is independent
The height and widths of the flexible divs are created with viewport width (vw) and viewport height (vh) units.
Refer here for a fantastic flexbox guide.
Example
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.flex {
display: flex;
height: 50vh;
width: 100vw;
}
.flex > div {
background: #f50057;
flex: 1;
margin-left: 10px;
}
.flex > div:first-child {
width: 100px;
flex: 0 0 auto;
margin: 0;
}
.footer {
width: 100%;
display: block;
background: #f50057;
height: calc(50vh - 10px);
margin-top: 10px;
}
<div class="flex">
<div></div>
<div></div>
<div></div>
</div>
<div class="footer"></div>
Its not perfect but seems to do what you want with css tables.
<div class="table">
<div class="trow">
<div class="tcell">box1</div>
<div class="tcell">box2</div>
<div class="tcell">box3</div>
</div>
</div>
<div class="table">
<div class="tcell last">box4</div>
</div>
.table{display:table; width:100%; text-align:center;}
.tcell{display:table-cell; background:#000; color:#fff; min-height:100px; padding:20px; border:1px solid #fff; }
.trow{display:table-row; }
.last{ background:red; }
.trow .tcell:first-child{ width:300px; }
http://jsfiddle.net/fjsvnrLp/5/
You dont actually need the row
I have a main div which has another two divs with in, I am trying to put the inner divs side by side. I have trie the following code, but I can't understand why it doesn't work. If apply float to my inner div they just disappear. Here is my code:
<div id="mainContainer">
<div id="leftSide"></div>
<div id="rightSide"> </div>
</div>
body{
background-color: #006847;
}
#mainContainer{
background-color: #FFFFFF;
max-width: 95%;
height: 500px;
margin: 0 auto;
box-shadow:10px 10px 5px red;
margin-top: 50px;
}
#leftSide{
background-color: #CE1126;
max-width: 40%;
height: 900px;
}
#rightSide{
max-width: 50%;
height: 900px;
background-color: purple;
float: right;
}
Use display:inline-block;
Change the height of your inner divs to 500px since your containers height is 500px.
Change max-width to width. width needs to be specified in order for max-width to work.
If you set a fixed width and a max-width, this means the following:
If the width goes above max-width, keep it at max-width. If the width
is below max-width, keep it on width.
Credits
Change to this:
#leftSide{
background-color: red;
width: 50%;
height: 500px;
display:inline-block;
}
#rightSide{
width: 50%;
height: 500px;
background-color: green;
float: right;
display:inline-block;
}
JSFiddle Demo
You should specify width of container and then use max/min-width to override it,
Try,
body {
background-color: green;
box-sizing: border-box;
margin:0;
padding:0;
}
#mainContainer {
background-color: blue;
width: 95%;
height: 900px;
margin: 0 auto;
box-shadow:10px 10px 5px grey;
margin-top: 50px;
}
#leftSide {
background-color: yellow;
width: 40%;
height: 900px;
float: left;
}
#rightSide {
width: 60%;
height: 900px;
background-color: red;
float: left;
}
Try not making the height of #mainContainer higher than the others:
#mainContainer{
background-color: #FFFFFF;
max-width: 95%;
**height: 900px;**
margin: 0 auto;
box-shadow:10px 10px 5px red;
margin-top: 50px;
}
I simplified your code and turned it into a JSFiddle. Basically, you don't want floats unless very necessary. Use display:inline-block; instead. http://jsfiddle.net/KybKc/
<div id="progressbarr"> still did not wrap well within its ancestor div when I use margin-top :50%, and expecting it will be placed at the middle horizontally.
HTML
box
css
#col3wrap{
height: 50px;
background: #DDD;
}
.profilepic {
width: 50px;
height: 50px;
background: red;
float: left;
margin: 0 10px 0 0;
}
#progressbarr {
float: left;
width: 300px;
height: 20px;
background: #eee;
margin: 50% 0 0 0;
}
#progressbarr > div {
background-color: green;
width: 40%;
height: 20px;
}
http://jsfiddle.net/Xdwhk/
Your margin value is calculated using the parent elements width. Why? Good question. I don't know but here is some discussion on the topic:
Why are margin/padding percentages in CSS always calculated against width?
Here is your demo with the #col3wrap with a width set:
http://jsfiddle.net/Xdwhk/1/
Try adjusting the width to see how the margin-top value changes with it.
So you're going to have to find a different method, other than using margin-top, to vertically centre your progress bar.
Here is one way, using position: relative and calc to set the top value:
CSS
#col3wrap{
height: 50px;
background: #DDD;
position: relative;
}
.profilepic {
width: 50px;
height: 50px;
background: red;
float: left;
margin: 0 10px 0 0;
}
#progressbarr {
float: left;
width: 300px;
height: 20px;
background: #eee;
position: relative;
top: 30%;
top: -webkit-calc(50% - 10px);
top: calc(50% - 10px);
}
#progressbarr > div {
background-color: green;
width: 40%;
height: 20px;
}
Demo
Note calc is not supported by all browsers so we must have a fall back.