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;
}
Related
I want to make a website with div one below the another .How do i set the height of the responsive page .There is no content inside div .I want to make solid border rectangle .This is for practise purpose.
html,
body {
width: 100%;
min-height: 100%;
margin: 0px;
padding: 0px;
-webkit-text-size-adjust: none;
font-size: 62.5%;
background: #906aaf
}
.header {
width: 100%;
height: 10%;
background-color: #7e599e;
position: fixed;
z-index: 1;
top: 0
}
.one {
width: 50%;
height: 30%;
border: 10px solid black;
margin-left: auto;
margin-right: auto;
height: auto;
width: auto;
}
.two {
width: 50%;
height: 30%;
border: 10px solid black;
}
.three {
width: 50%;
height: 30%;
border: 10px solid black;
}
.four {
width: 50%;
height: 30%;
border: 10px solid black;
}
.five {
width: 50%;
height: 30%;
border: 10px solid black;
}
<div class="header"></div>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
If I understand your question correctly and you want to position the first div in the html to show on the web page AFTER those that come next in the html -
You can use css3 flexbox. Apply the display:flex on the body and then use order on the body's children to order them.
So in your example, add this to your css -
body {
display: flex;
flex-direction: column; //(Flexbox defaults to row, apply this to change back to column)
}
.one {
order: 5;
}
.two {
order: 1;
} ...
Have a look at this for more info.
use pixel instead of %
html,
body {
width: 100%;
min-height:800px;
margin: 0px;
padding: 0px;
-webkit-text-size-adjust: none;
font-size: 62.5%;
background: #906aaf
}
.header {
width: 100%;
height: 80px;
background-color: #7e599e;
position: fixed;
z-index: 1;
top: 0
}
.one {
width: 50%;
height: 240px;
border: 10px solid black;
margin-left: auto;
margin-right: auto;
height: auto;
width: auto;
}
.two {
width: 50%;
height: 240px;
border: 10px solid black;
}
.three {
width: 50%;
height: 240px;
border: 10px solid black;
}
.four {
width: 50%;
height: 240px;
border: 10px solid black;
}
.five {
width: 50%;
height: 240px;
border: 10px solid black;
}
<div class="header"></div>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
I have a section where it is to equal columns full width across. if you look a the 2nd column where it says content here if i do 100% on the jscroll-pane it shows horizontal bars, if i give it 98% it works properly but is not full width of the column. not sure why it adds horizontal bars to 100% but not 98%. I am not sure if foundation is causing my issue or not but if i take it out of the column and put in a row the 100% works fine just not in a large-6
html
<section id="component">
<div class="row expanded collapse">
<div class="large-6 column">
<img src="images/image.png">
</div>
<div class="large-6 column">
<div class="jscroll-pane">
Content Here
</div>
</div>
</div>
</section>
css
.jscroll-pane {
display: block;
width: 100% !important;
height: 400px;
max-height: 400px;
overflow: auto;
background-color: #fff;
}
#component {
padding: 0px;
background-color: #fff;
}
jscroll external css file
.jspContainer{
overflow:hidden;
position:relative;
height:100% !important;
width: 100% !important;
}
.jspPane{
position:absolute;
width: 100%!important;
}
.jspVerticalBar
{
position: absolute;
top: 0;
right: 0;
width: 16px;
height: 100%;
background: red;
}
.jspHorizontalBar
{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 16px;
background: red;
}
.jspCap
{
display: none;
}
.jspHorizontalBar .jspCap
{
float: left;
}
.jspTrack
{
background: #d8d8d8;
position: relative;
}
.jspDrag
{
background: #000;
position: relative;
top: 0;
left: 0;
cursor: pointer;
}
.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag
{
float: left;
height: 100%;
}
.jspArrow
{
background: #50506d;
text-indent: -20000px;
display: block;
cursor: pointer;
padding: 0;
margin: 0;
}
.jspArrow.jspDisabled
{
cursor: default;
background: #80808d;
}
.jspVerticalBar .jspArrow
{
height: 16px;
}
.jspHorizontalBar .jspArrow
{
width: 16px;
float: left;
height: 100%;
}
.jspVerticalBar .jspArrow:focus
{
outline: none;
}
.jspCorner
{
background: #eeeef4;
float: left;
height: 100%;
}
/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner
{
margin: 0 -3px 0 0;
}
Try this, Remove the display block and change overflow: auto to hidden; I believe this should help you.
.jscroll-pane {
width: 100% !important;
height: 400px;
max-height: 400px;
overflow: hidden;
background-color: #fff;
}
I'm trying to make a layout where the banner, the navigation and footer always stay fixed while you can scroll the content. I have seen some kinda similar layouts here but the actual page content is not limited there. What I want now is to center anything, but you better you maybe need something visual - what I got so far:
html
<body>
<div id="container">
<div id="banner"></div>
<div id="main">
<div id="nav1"></div>
<div id="nav2"></div>
<div id="content"></div>
</div>
<div id="footer"></div>
</div>
css
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
width: 100%;
background-color: #222;
}
#container {
margin: 0 auto;
height: 100%;
width: 800px;
margin-top: 20px;
background-color: black;
}
#banner {
width: 100%;
height: 100px;
background-color: red;
}
#main {
height: 100%;
width: 100%;
}
#nav1 {
height: 100%;
width: 150px;
float: left;
background-color: yellow;
}
#nav2 {
height: 100%;
width: 100px;
float: right;
background-color: yellow;
}
#content {
height: 100%;
width: 100%;
background-color: white;
}
#footer {
width: 100%;
height: 30px;
background-color: lime;
}
jsfiddle: http://jsfiddle.net/gLhd6sno/1/
When scrolling I want only the content in the white area to move, also I cant figure out how to disable overflow without breaking that layout. Maybe you have an idea?
Thank you.
Here is one way of doing it that relies on absolute positioning.
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
width: 100%;
background-color: #222;
margin: 0;
}
#container {
width: 800px;
left: 50%;
margin-left: -400px;
background-color: black;
position: absolute;
top: 20px;
bottom: 0;
}
#banner {
width: 100%;
height: 100px;
background-color: red;
position: absolute;
top: 0;
}
#main {
width: 100%;
position: absolute;
top: 100px;
bottom: 30px;
}
#nav1 {
width: 150px;
position: absolute;
left: 0;
top: 0;
bottom: 0;
background-color: yellow;
border: 2px dotted blue;
}
#nav2 {
width: 100px;
position: absolute;
right: 0;
top: 0;
bottom: 0;
background-color: yellow;
border: 2px dotted blue;
}
#content {
position: absolute;
top: 0;
bottom: 0px;
left: 150px;
right: 100px;
background-color: tan;
border: 2px dotted blue;
overflow: auto;
}
#footer {
width: 100%;
position: absolute;
bottom: 0;
height: 30px;
background-color: lime;
}
See demo: http://jsfiddle.net/audetwebdesign/k9nsvt3t/
If you shrink the height, you will see a scroll bar appear around the content area,
which may do the trick. The rest of the page elements are static regardless of the
amount of content in the main area.
I'm building a site that has 3 sections in the middle that all sit side by side.
The center box is where the page's content will be shown and therefore will adjust to fit.
The issue is that the #leftnav and #rightnav should adjust to the height of the parent container, this would work when the #centralcontent height is adjusted by its content (text and so on) - how is this best done?
Please see the code in action: http://jsfiddle.net/AlexHighHigh/WJKR5/
Here's the HTML
<div id="pagecontainer">
<div id="header"><img src="http://s23.postimg.org/u4fk339vf/design_1_01.jpg" width="850" height="308" alt="logo" /></div>
<div id="centralcontainer">
<div id="leftbar"> </div>
<div id="centralcontent">
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="rightbar"> </div>
</div>
<div id="footer"><img src="http://s23.postimg.org/w6g1hc7uj/design_1_05.jpg" width="850" height="30" alt="footer" /><br />
© 2014 Surrey Hills Fox Control</div>
</div>
..and here's the CSS
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #161616;
margin: 0;
padding: 0;
color: #fff;
}
#pagecontainer {
height: 100%;
width: 850px;
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
}
#header {
height: 308px;
background-color:#66CCFF;
}
#centralcontainer {
height: auto;
width: 850px;
}
#leftbar {
float: left;
width: 85px;
min-height: 100%;
background-image:url(http://s23.postimg.org/69md4q46z/design_1_02.jpg);
bottom: 0;
background-color:#66CCFF;
}
#centralcontent {
float: left;
height: auto;
width: 680px;
background-color:#FFF;
}
#rightbar {
float: left;
width: 85px;
min-height: 100%;
background-image:url(http://s23.postimg.org/lxnkbijsr/design_1_04.jpg);
bottom: 0;
background-color:#66CCFF;
}
#footer {
float: left;
width: 850px;
height: 150px;
text-align:center;
}
Any help appreciated, thanks in advance!
Alex
add height: 100%; to body and it would work
why it works?? your #pagecontainer has height:100%, so it would set 100% of the parent of pagecontainer, which is body, but you have not set height of body
EDIT
I see you used floats, if its fine with you, use display :table as it helps you avoid clearing the floats and other stuffs
see demo
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #161616;
margin: 0;
padding: 0;
color: #fff;
height : 100%;
}
#pagecontainer {
height: 100%;
width: 850px;
margin: 0 auto;
/* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
}
#header {
height: 308px;
background-color:#66CCFF;
border:1px solid #FFF;
}
#centralcontainer {
min-height: 100%;
width: 850px;
display:table;
}
#leftbar {
display:table-cell;
width: 85px;
min-height: 100%;
height:100%;
background-image:url(http://s23.postimg.org/69md4q46z/design_1_02.jpg);
bottom: 0;
background-color:#66CCFF;
border:1px solid #FFF;
}
#centralcontent {
display:table-cell;
height: 100%;
width: 680px;
<!-- background-color:#FFF;
/*commented*/
-->
}
#rightbar {
display:table-cell;
width: 85px;
min-height: 100%;
background-image:url(http://s23.postimg.org/lxnkbijsr/design_1_04.jpg);
background-color:#66CCFF;
}
#footer {
float: left;
width: 850px;
height: 150px;
text-align:center;
}
Hi you probably should use common fix for same columns height
In you case just add overflow:hidden; to #centralcontainer and to
#leftbar,#rightbar
add
padding-bottom:9000px;
margin-bottom:-9000px;
Please look to
Seems working sample
Working Demo
I added a couple of other things to your CSS for better cross-browser compatibility but you can remove it if you really want.
CSS:
html, body {
margin: 0;
padding: 0;
zoom: 1;
height: 100%;
width: 100%;
}
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #161616;
color: #fff;
}
*:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
clear: both;
display: table;
}
#centralcontainer div {
outline: 3px solid red;
}
#pagecontainer {
height: 100%;
width: 850px;
margin: 0 auto;
}
#header {
height: 308px;
background-color:#66CCFF;
}
#centralcontainer {
width: 850px;
position: relative;
}
#leftbar {
position: absolute;
width: 85px;
background-color:#66CCFF;
background-image:url(http://s23.postimg.org/69md4q46z/design_1_02.jpg);
bottom: 0;
top: 0;
left: 0;
}
#centralcontent {
left: 85px;
position: relative;
height: auto;
width: 680px;
background-color:#FFF;
}
#rightbar {
position: absolute;
width: 85px;
background-color:#66CCFF;
background-image:url(http://s23.postimg.org/lxnkbijsr/design_1_04.jpg);
bottom: 0;
top: 0;
right: 0;
}
#footer {
float: left;
width: 850px;
height: 150px;
text-align:center;
}
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;