I've been battling with this problem for a while and I'd like to ask advice if any of you can help.
I'm making a simple layout where I have a 120px high header and a content div under it. I'd like to stretch the content to the bottom of the page, but when I set the height to 100% it stretches over the page.
I have tried googling this plenty of times but none of the answers I've found help me or are too complex to understand.
My CSS is as follows:
* {
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
height: 100%;
border: 5px solid red;
margin-bottom: -16px;
}
body {
background-color: lightblue;
height: 100%;
border: 5px solid blue;
margin: 0 0 -16px 0;
}
.wrapper {
display: block;
position: relative;
background-color: green;
width: 605px;
margin: auto;
height: 100%
}
.header {
display: inline-block;
background-color: blue;
height: 120px;
width: 450px;
text-align: center;
padding: 5px 0px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.content {
display: inline-block;
background-color: red;
padding: 10px 5px;
width: 450px;
height: 100%;
I've set borders to html and body just to see that I can stretch them properly, so please ignore those.
You can position the header absolute within the content div and set the top padding on the content div to the same height as the header.
JSFiddle
HTML
<div class="wrapper">
<div class="content">
<div class="header"></div>
</div>
</div>
CSS
.header {
position:absolute;
top:0;
left:0;
background-color: blue;
height: 120px;
width: 450px;
text-align: center;
padding: 5px 0px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.content {
display: inline-block;
background-color: red;
padding: 10px 5px;
width: 450px;
height: 100%;
padding-top:120px;
}
Set max-height: 100%; instead of height: 100%; which will not over-height the header height as it is defined height: 120px;
Related
I know that fixed positioning does not work relative to the parent, only to the browser window and the solution is absolute, but I also have a problem with that.
In the div in which I need a scroll inside, I have to put the icon always visible in the bottom right corner.
My fiddle: https://jsfiddle.net/nck7o0jL/
Below is my code.
.big {
height: 600px;
width: 600px;
border: 2px solid black;
}
.small {
height: 300px;
width: 300px;
border: 2px solid red;
overflow: auto;
position: relative;
resize: both;
}
img {
width: 30px;
height: 30px;
position: absolute;
right: 15px;
bottom: 15px;
}
<div class="small"><img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-close-circled-128.png">
<div class="big">
</div>
</div>
As you can see, by stretching the div.small the icon is held, but during the scroll it is not.
Will someone give a helping hand?
You can approximate this using flexbox and position:sticky
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.big {
height: 600px;
width: 600px;
flex-shrink: 0;
}
.small {
height: 300px;
width: 300px;
border: 2px solid red;
overflow: auto;
resize: both;
display: flex;
}
img {
width: 30px;
height: 30px;
margin: auto 0 15px auto;
position: sticky;
order: 1;
right: 15px;
top: calc(100% - 45px);
}
<div class="small"><img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-close-circled-128.png">
<div class="big">
</div>
</div>
I'm trying to make a rectangular div that's 95% the width of the viewport and 20% high. But I want another rectangular div inside of that, that is vertically and horizontally centered with a slight2px margin.
.Outer {
border: 1px solid #ccc;
max-width: 95vw;
max-height: 20vh;
width: 95vw;
height: 20vh;
margin: auto;
display: block;
}
.Inner {
border: 1px solid hotpink;
width: 95%;
height: 95%;
margin: auto;
}
It depends upon requirements. But according to question, here is the answer. Please take a look and let me know in case of any issue
.Outer {
width: 95vw;
height: 20vh;
border: 1px solid #ccc;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.Inner {
border: 1px solid hotpink;
position: absolute;
top: 10px;
right: 10px;
bottom: 10px;
left: 10px;
}
<div class="Outer">
<div class="Inner"></div>
</div>
Tried to use relative measuring units just in case you are dealing with a responsive design. The .outer box is display: table and the Inner is display: table-cell. They sit perfectly together and the 2px margin your requested is provided by a 2px padding from .Outer
html {
box-sizing: border-box;
font: 500 16px/1.428'Consolas';
height: 100vh;
width: 100vw;
}
*,
*:before,
*:after {
box-sizing: inherit;
margin: 0;
padding: 0;
}
body {
position: relative;
font-size: 1rem;
line-height: 1;
height: 100%;
width: 100%;
}
.Outer {
position: absolute;
top: 20%;
left: 3%;
outline: 1px solid #ccc;
max-width: 95vw;
max-height: 20vh;
width: 95vw;
height: 20vh;
margin: auto;
display: table;
padding: 2px;
}
.Inner {
border: 1px solid hotpink;
width: 95%;
height: 95%;
margin: auto;
display: table-cell;
}
<section class="Outer">
<section class="Inner"></section>
</section>
I'm not 100% this is what your looking for because this has Magic Numbers, but here is a JSFiddle of what I came up with using your provided code.
#Outer {
border: 1px solid #ccc;
max-width: 95vw;
max-height: 20vh;
width: 95vw;
height: 20vh;
margin: auto;
display: block;
position: relative;
}
#Inner {
border: 1px solid hotpink;
width: 95%;
height: 50%;
position: aboslute;
margin-top: 5vh;
margin-left: 2.5vw;
}
<div id=Outer>
<div id=Inner>
</div>
</div>
JSFiddle
Hopefully this helps and you could mess around with it to use percentages on the viewpoints instead of magic numbers.
When I want to center a div vertically, I have a couple classes that help me to do it.
.outer {
border: 1px solid #ccc;
max-width: 95vw;
max-height: 20vh;
width: 95vw;
height: 20vh;
margin: auto;
display: block;
}
.inner {
border: 1px solid hotpink;
width: 95%;
height: 90%;
margin: auto;
}
.valign-wrap {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.valign-wrap .valign {
display: block;
}
<div class="outer valign-wrap">
<div class="inner valign center"></div>
</div>
JSFiddle
I always recommend add these classes to your projects, they are very useful. Good luck!
I am trying to create a fluid page layout with a fixed header. But I am having issues with making the fixed header fluid.
Here is the code:
.container {
max-width: 68.5em;
margin: 0px auto;
border: 1px solid #000;
height: 1000px
}
header {
position: fixed;
top: 0;
border: 1px solid red;
height: 55px;
width: 100%;
}
<section class="container">
<header>
</header>
</section>
Js Fiddle Link: http://jsfiddle.net/s2myn87q/4/
Since most browsers use the following style in their default stylesheet:
body {
margin: 8px;
}
You can use
header {
left: 8px;
right: 8px;
width: auto; /* default value */
}
body {
margin: 8px;
}
.container {
max-width: 68.5em;
margin: 0px auto;
border: 1px solid #000;
height: 1000px
}
header {
position: fixed;
left: 8px;
right: 8px;
top: 0;
border: 1px solid red;
height: 55px;
}
<section class="container">
<header>
</header>
</section>
Here is my current code but i don't see what the problem is. I'm new to html so i'm not really sure. I'd like to have a column on the left at about 20% space, column in the center which takes 60% of the space and column on the right that takes 20% space.
#wrapper {
background-color: #788D9A;
padding-bottom: 1000px;
margin-bottom: -1000px;
}
#mainleft {
width: 20%;
float: left;
padding: 10px;
text-align: center;
background-color: #ABB8C0;
padding-bottom: 1000px;
margin-bottom: -1000px;
border-right: solid black;
display:inline-block;
}
#maincenter {
width: 60%;
float: left;
overflow: hidden;
text-align: center;
padding: 10px;
padding-bottom: 1000px;
margin-bottom: -1000px;
display:inline-block;
}
#mainright {
width: 20%;
float: left;
padding: 10px;
text-align: center;
background-color: #ABB8C0;
padding-bottom: 1000px;
margin-bottom: -1000px;
border-right: solid black;
}
You need to be mindful when using padding-left padding-right margin-left margin-right border-left and border-right when you want that type of layout.
Each of those styles affect the overall width of that element so adding a padding: 10px will actually make your div width = 20% + 20px.
If you want to have that inner padding and border style an inner div
Example: http://jsfiddle.net/b62Ju/2/
HTML
<div id="wrapper">
<div id="mainleft">
<div>L</div>
</div>
<div id="maincenter">
<div>C</div>
</div>
<div id="mainright">
<div>R</div>
</div>
</div>
CSS
#wrapper {
background-color: #788D9A;
}
#wrapper > div
{
height: 1000px;
float: left;
text-align: center;
}
#mainleft {
width: 20%;
background-color: #ABB8C0;
}
#maincenter {
width: 60%;
}
#mainright {
width: 20%;
background-color: #ABB8C0;
}
#maincenter > div
{
height: 1000px;
border-left: solid black;
border-right: solid black;
}
#mainleft > div,
#maincenter > div,
#mainright > div
{
padding: 10px;
}
Alternatively you could use the box-model styles:
.box
{
box-sizing: border-box;
ms-box-sizing: border-box;
webkit-box-sizing: border-box;
moz-box-sizing: border-box;
}
more info: http://www.quirksmode.org/css/box.html
The display: table properties seem like the best choice here. You get your equal height columns (I assume that's what the crazy bottom margin/padding was for), no extra markup, and padding without having to worry about adjusting the box-model (learn more about the box-model here: http://css-tricks.com/the-css-box-model/).
http://jsfiddle.net/b62Ju/3/
#wrapper {
display: table;
width: 100%;
}
#wrapper > div
{
display: table-cell;
padding: 1em;
}
#mainleft {
width: 20%;
background-color: orange;
}
#maincenter {
width: 60%;
}
#mainright {
width: 20%;
background-color: green;
}
For your Reference if we need to place three dives side by side,
HTML:
<div class="main">
<div class="left">...</div>
<div class="center">...</div>
<div class="right">...</div>
</div>
CSS:
.main {
width: 1000px;
float: left;
display: inline-block;
}
.left {
width : 20%;
float: left;
display: inline-block;
}
.right {
width : 20%;
float: left;
display: inline-block;
}
.center {
width : 60%;
float: left;
display: inline-block;
}
it will work.
I think in your code you need set width for main wrapper div.
I need help to fix the next layout, because:
It doesnt look right for IE
The footer doesnt stay at bottom when #columns content grows up
I need to make the #column container 100% min-height with small content
Thanks in advance!
This is my code:
<style>
* {
margin: 0;
padding: 0;
}
body, html {
background: silver;
height: 100%;
}
#header {
min-width: 1000px;
width: 100%;
height: 40px;
background: red;
}
#columns {
width: 1000px;
background: white;
margin: 0 auto;
padding-bottom: 40px;
border: 1px solid black;
}
#footer {
position: absolute;
bottom: 0;
min-width: 1000px;
width: 100%;
height: 40px;
background: black;
}
<body>
<div id="header"></div>
<div id="columns"></div>
<div id="footer"></div>
</body>
Try this (edited) :
JSFiddle: http://jsfiddle.net/NeCc3/14/
* {
margin: 0;
padding: 0;
}
body, html {
background: silver;
height:100%
}
#header {
width: 100%;
height: 40px;
background: red;
}
#columns{
min-height:100%;
width: 1000px;
background: white;
margin: 0 auto;
padding-bottom: 40px;
border: 1px solid black;
}
#footer {
width: 100%;
height: 40px;
background: black;
}