Yes now i've got the grid outertcontainer fixed but somehow its not expanding 100%.
Please tell me where am i doing it wrong.
i am giving the emitted css.
if you see it in full screen you can see the outer container div is still not 100%.
Thanks.
Here is the
FIDDLE
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
body {
margin: 0;
padding: 0; }
img {
max-width: 100%; }
.bordered {
border: 1px solid black; }
.redbordered {
border: 1px solid red; }
.greenbordered {
border: 1px solid green; }
.outerContainer {
max-width: 68em;
margin-left: auto;
margin-right: auto;
min-height: 300px;
width: auto;
margin-left: 133px;
background-color: crimson; }
.outerContainer:after {
content: "";
display: table;
clear: both; }
.outerContainer .leftSide {
float: left;
display: block;
margin-right: 0%;
width: 50%;
background-color: blue;
min-height: 200px; }
.outerContainer .leftSide:last-child {
margin-right: 0; }
.leftNav {
height: 100%;
width: 133px;
background-color: black;
position: fixed;
left: 0px; }
Of course, position:fixed is exactly for that purpose, to have the element fixed in that position, overlapping everything below it. To have a regular 2 columns layout with no overlapping, just try this (there are many ways to do it, this is just one using CSS without changing your HTML)
body {
margin: 0;
padding: 0;
display:block;
min-height:100%;
}
.leftNav {
height: 100%;
width: 10%;
background-color: black;
display:inline-block;
opacity: 0.7;
}
.rightContainer {
background-color:silver;
min-height: 300px;
display:inline-block;
}
.fluid {
width: 89%;
}
jsFiddle
remove width 100% in fluid and make rightContainer as width auto and margin-left 100px
.rightContainer
{
background-color:silver;
min-height: 300px;
width:auto;
margin-left:100px;
}
Related
I would like to have a 5px margin around each of my divs but when I add it in CSS, there is a 5px margin on every side except for in between the divs and on the bottom. The two divs also overflow off the page on the bottom. I understand this is because of the 5px margin on top pushing the divs off screen. I am unsure how to make it just add the margin all around and shrink the divs accordingly.
* {
box-sizing: border-box;
margin: 0;
}
html {
width: 100%;
height: 100%;
}
body {
background: black;
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.one {
background: red;
position: absolute;
width: 10%;
height: 100%;
left: 0;
border: 3px solid green;
border-radius: 5px;
margin: 5px;
}
.two {
background: blue;
position: absolute;
width: 90%;
height: 100%;
right: 0;
border: 3px solid green;
border-radius: 5px;
margin: 5px;
}
<div class="one">
</div>
<div class="two">
</div>
Resulting Page
Divs pushed off screen on bottom and no margin in-between divs. 5px margin on top, left, and right is present.
I am new to HTML and CSS so any helps greatly appreciated.
Use CSS Flex
/*QuickReset*/ * { box-sizing: border-box; margin: 0; }
html {
height: 100%;
}
body {
background: black;
height: 100%;
position: relative;
display: flex; /* Use flex! */
padding: 5px; /* Instead of children margin */
/* gap: 5px; /* Uncomment to add a gap between your child elements! */
}
.one,
.two {
border: 3px solid green;
border-radius: 5px;
}
.one { width: 10%; background: red; }
.two { width: 90%; background: blue; }
<div class="one">
</div>
<div class="two">
</div>
box-sizing: border-box does not include handling/including of margins in the overall width or height of the elements, only padding and borders. Therefore you have to subtract the margin values from the width or height values.
In your case you should use calc values on all height and width settings where there's a margin. I.e. if you have 5px margin (= on all sides), use for example calc(100% - 10px) where you want 100% width or height. Similar with other percentage values - see your adapted code below:
* {
box-sizing: border-box;
margin: 0;
}
html {
width: 100%;
height: 100%;
}
body {
background: black;
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.one {
background: red;
position: absolute;
width: calc(10% - 10px);
height: calc(100% - 10px);
left: 0;
border: 3px solid green;
border-radius: 5px;
margin: 5px;
}
.two {
background: blue;
position: absolute;
width: calc(90% - 10px);
height: calc(10% - 10px);
right: 0;
border: 3px solid green;
border-radius: 5px;
margin: 5px;
}
<div class="one">
</div>
<div class="two">
</div>
using the css calc function on the width of .two to subtract 10px (2x5px margins) from the 90% width, appears to give a reasonable margin.
width: calc(90% - 10px);
I am not sure why there is not a visible 10px (2x5px) margin between .one and .two though.
https://developer.mozilla.org/en-US/docs/Web/CSS/calc
* {
box-sizing: border-box;
margin: 0;
}
html {
width: 100%;
height: 100%;
}
body {
background: black;
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.one {
background: red;
position: absolute;
width: 10%;
height: 100%;
left: 0;
border: 3px solid green;
border-radius: 5px;
margin: 5px;
}
.two {
background: blue;
position: absolute;
width: calc(90% - 10px);
height: 100%;
right: 0;
border: 3px solid green;
border-radius: 5px;
margin: 5px;
}
<div class="one">
</div>
<div class="two">
</div>
Hey I am searching for a solution to split my front page of my website into 3 responsive triangles. All theses triangles should have an image inside and some text but it doesn't work that well...
All ready tried to work with 'border' or 'transform'. Also used 'vw' and 'vh' instead of percentage.
CSS for the first "main" triangle:
.triangle {
width: 100vw;
height: 100vh;
overflow: hidden;
}
.triangle:before {
background-size: cover;
content:"";
display:block;
width: 100%;
height: 100%;
background-image: url("http://lorempixel.com/output/city-q-g-1920-1080-10.jpg");
transform: rotate(-45deg);
transform-origin:0 0;
}
The triangle should get the whole width of the display resolution and height too.
* {
box-sizing: border-box;
}
div {
display: inline-block;
vertical-align: top;
border: .5vw solid black;
text-align: center;
padding: .2vw;
width: 33%;
color: white;
margin: 0;
}
#left {
background-color: green;
}
#middle {
background-color: orange;
}
#right {
position: absolute;
right: .2vw;
background-color: blue;
}
Please see this Fiddle
somehow I am very bad at this so i need your help guys. The problem is similar to my previous problem (find it here: Display CSS: some divs fixed, some flexible).
This time I need #DIV-3 to be the flexible one that gets small and big as the window height changes and all other DIVS need to be fixed. So here is an illustration:
Can someone please help my with a fiddle like last time.
Thank you very much.
this is code example, but doesnt really matter probably:
#DIV-1{
position: fixed;
padding: 1em 2em;
top: 6.8em;
right: 0;
height: 9.5em;
width: 18%;
bottom: 75%;
}
#DIV-2{
position: fixed;
padding: 1em 2em;
width: 18%;
top: 16em;
bottom: 18em;
right: 0;
}
#DIV-3{
position: fixed;
padding: 1em 2em;
bottom: 0em;
right: 0;
width: 18%;
height: 18em;
overflow-y: auto;
}
I think this might be what you want (using the answer from your other question) ... horrible way to build something though haha.
http://jsfiddle.net/uKPEn/5/
.middle1 {
background: blue;
height: 100px;
top:50px;
}
.middle2 {
background: green;
top: 150px;
height: 100px;
}
.logo {
background: pink;
overflow: scroll;
top: 250px;
bottom:0%;
}
Not exactly sure, but you could consider using something like Isotope or Masonry for building stuff that fits together like that.
Use the CSS function calc()
html, body {
background-color: transparent;
height:100%;
width: 100%;
margin: 0px;
font-size:8pt;
}
#header {
box-sizing: border-box;
width: auto;
height: 6.8em;
border: 1px solid red;
}
#section {
box-sizing: border-box;
width: calc(100% - 18%);
height: calc(100% - 6.8em);
overflow-x: auto;
border: 1px solid blue;
float: left;
}
#DIV-1 {
box-sizing: border-box;
float: left;
border: 1px solid purple;
height: 9.5em;
width: 18%;
}
#DIV-2 {
box-sizing: border-box;
float: left;
border: 1px solid green;
height: 9.5em;
width: 18%;
}
#DIV-3 {
box-sizing: border-box;
float: left;
border: 1px solid orange;
height: calc(100% - 25.8em);
width: 18%;
overflow-y: scroll;
}
HTML
<div id="header">Header</div>
<div id="section">Section</div>
<div id="DIV-1">1</div>
<div id="DIV-2">2</div>
<div id="DIV-3">3</div>
Example on: http://jsfiddle.net/7baotd4o/
calc allows us to, surprise, calculate a value for CSS.
http://caniuse.com/#feat=calc
How To Add Bottom Border When Overflow Is Hidden?
I'm using the margin-bottom: -10000px; padding-bottom: 10000px; trick/hack to have divs fill their parent container while keeping everything % based. The only problem, the overflow hides the bottom border.
jsFiddle
http://jsfiddle.net/CSS_Apprentice/0Lkxw1je/1/
I'm trying to use :after to add the bottom border, but no matter what I do to the :after selector (position: absolute, overflow: visible), I can't get the border to show
body {
width: 100%
}
.container {
margin: 0 auto;
text-align: center;
overflow: hidden;
}
.box {
display: inline-block;
width: 25%;
height: 100%;
border: 3px solid black;
padding: 2%;
vertical-align: top;
margin-bottom: -10000px;
padding-bottom: 10000px;
}
.box:after {
border-bottom: 3px solid black;
content: '';
}
Try This updated css, with display: table; & display:table-row:-
body {
width: 100%;
display: table;
}
.container {
margin: 0 auto;
text-align: center;
overflow: hidden;
display: table-row;
}
.box {
display: inline-block;
width: 25%;
height: 100%;
border: 3px solid black;
padding: 2%;
vertical-align: top;
display: table-cell;
}
.box:after {
border-bottom: 3px solid black;
content: '';
}
.remainder {
height: 100%;
}
h1 {
background-color: #fff;
border: 3px solid black;
}
/* Colors */
.blue {
background-color: blue;
}
.green{
background-color: green;
}
.yellow{
background-color: yellow;
}
.red{
background-color: red;
}
What worked for me was to create an outer div with a border and without overflow:hidden. The outer box will have the border and the content of the inner will be overflow.
http://jsfiddle.net/myxzh/6/
ul {
display: table;
table-layout: fixed;
width: 100%;
padding:0;
position: absolute;
top: -10px;
}
li {
display: table-cell;
height: 150px;
border: 1px solid black;
text-align: center;
vertical-align: bottom;
}
#con {
width: 100%;
border: 1px solid red;
height: 200px;
overflow: hidden;
}
#logo {
width: 80%;
height: 100px;
margin: 10px auto;
border: 1px solid yellow;
z-index: 1;
}
<div id="con">
<div id="logo">
</div>
<div id="list">
<ul>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
</ul>
</div>
</div>
I have this code and I am trying to make it where the list elements take up 100% of the red div box. Right now, the list goes outside of the red div which is not what I am trying to do. How do i make the black div(list items) fill up 100% of the red div and not go outside the red div?
If you want the black div to take up 100% of the height and width of the red div, change your CSS to:
ul {
display: table;
table-layout: fixed;
width: 100%;
padding:0;
position: absolute;
margin:0;
bottom:0;
height:100%;
}
li {
display: table-cell;
height: 150px;
border: 1px solid black;
text-align: center;
vertical-align: bottom;
}
#con {
width: 100%;
border: 1px solid red;
height: 200px;
overflow: hidden;
position:relative;
}
#logo {
width: 80%;
height: 100px;
margin: 10px auto;
border: 1px solid yellow;
z-index: 1;
}
jsFiddle example
I added position:relative; to your #con div since your absolute positioned ul element is positioned relative to it's first positioned ancestor, which in your example was the body, but you needed it to be #con. Then I made a few small changes to your ul's CSS rules so that it would take up all the space of the red div.
I changed your mark up a bit, there is no need for the div #list, that why ul exists.
This is the css
#con {
width: 100%;
border: 1px solid red;
height: 200px;
overflow: hidden;
position: relative;
}
#logo {
width: 80%;
height: 100px;
margin: 10px auto;
border: 1px solid yellow;
z-index: 1;
}
#list {
width: 100%;
list-style: none;
position: absolute;
top: 0px;
margin: 0;
padding: 0;
}
li {
float: left;
width: 33.1%;
height: 200px;
border: 1px solid black;
text-align: center;
vertical-align: bottom;
}
Is this good enough?
http://jsfiddle.net/myxzh/11/
A working fiddle --> http://jsfiddle.net/2VvTu/
You needed to set your container element to position: relative; and float your table cells left.
the box sizing property calculates borders and margins as part of the width (rather than default of adding them on on top of the width) --> you'll need to vendor prefix this as appropriate. More about that here --> http://paulirish.com/2012/box-sizing-border-box-ftw/
li {
-webkit-box-sizing: border-box;
display: inline-block;
height: 150px;
margin: 0;
padding: 0;
text-align: center;
width: 33.33%;
float: left;
border: thin purple dashed;
}