I want my page to fill the screen even if it doesn't contain enough content. I have made this happen with height set to 100% in body. What I also want is some space around my content, and by adding 5px to the margin it gets how I want it. My problem is that then I have to scroll to see the whole page, even if the content is not too long for the screen. I guess there is a simple sollution to this, but I can't seem to find it. Anyone who can?
/* Allmänt */
html, body{
background: grey;
background-size: cover;
height: 100%;
}
#content{
background-color: white;
width: 1100px;
margin: 5px auto;
border-radius: 5px;
position: relative;
height: auto !important;
min-height: 100%;
}
/* Header */
#huvud{
width: 1000px;
height: 250px;
margin: 0 auto;
position: relative;
padding-top: 5px;
}
#header{
display: block;
}
/* Meny */
#nav-yttre{
width: 1000px;
height: 35px;
margin: 0 auto;
background-image: url("Rusty-bar2.jpg");
}
#nav-mitten{
display: table;
width: 100%;
padding: 10px;
}
#nav-inre{
display: table-row;
list-style: none;
font-family: 'Special Elite', Verdana, Arial, sans-serif;
font-size: 25px;
}
#nav-inre li{
display: table-cell;
}
#nav-inre li a{
display: block;
text-decoration: none;
text-align: center;
color: #eeeeee;
}
#nav-inre li #here{
color: #221f20;
}
#nav-inre li a:hover{
color: #221f20;
}
/* Main */
#main{
width: 980px;
margin: 0 auto;
height: 100%;
position: relative;
padding-bottom: 150px;
}
#fadein {
margin: 10px auto;
position:relative;
width:970px;
height:215px;
padding: 5px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
#fadein img {
position:absolute;
}
#main-blogg{
width: 1050px;
margin: 0 auto;
}
#blogg{
min-height: 1000px;
}
/* Fot */
#fot{
width: 980px;
margin: 0 auto;
text-align: center;
}
#fot-inre{
border-top: solid #221f20 1px;
position: absolute;
bottom: 0;
}
#adress{
width: 327px;
float: left;
}
#kontakt{
width: 326px;
float: left;
}
#tider{
width: 326px;
float: right;
}
#design{
width: 500px;
margin: 0 auto;
clear: both;
text-align: center;
background-image: url("Rusty-bar-small.jpg");
}
#design p{
color: #eeeeee;
font-weight: bold;
}
#design a{
color: #eeeeee;
}
#design a:hover{
color: #221f20;
}
#rub{
font-weight: bold;
}
/* Allmänt */
p{
font-family: Verdana, Arial, sans-serif;
color: #221f20;
font-size: 0.9em;
}
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="stajlish.css">
<link href='http://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="stajlish.js"></script>
</head>
<body>
<div id="content">
<div id="huvud">
<img id="header" src="hej.jpg" alt="Header">
</div>
<div id="nav-yttre">
<div id="nav-mitten">
<ul id="nav-inre">
<li>HEM</li>
<li>OM OSS</li>
<li>BLOGG</li>
<li>MÄRKEN</li>
<li>HITTA HIT</li>
</ul>
</div>
</div>
<div id="main">
<div id="fadein">
<img src="slides1.jpg">
<img src="slides2.jpg">
<img src="slides3.jpg">
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tempus quam lectus, in suscipit nisl luctus feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent elit eros, tempor sed bibendum nec, luctus in dui. Proin vitae tincidunt diam, a pulvinar tortor. Maecenas pulvinar rhoncus nisl quis aliquet. Nulla dolor metus, euismod ac gravida eget, congue at nunc. Etiam non urna vel dolor pulvinar finibus. Suspendisse eget lacinia massa. Morbi sodales non purus pretium congue. Nullam sed tellus diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla porta sapien sit amet placerat lobortis. Nunc sed orci tincidunt, lacinia massa ut, fringilla est. Maecenas sodales orci at erat malesuada, non tristique leo auctor. Suspendisse augue felis, lobortis rhoncus pharetra at, pretium sit amet dolor.</p>
</div>
<div id="fot">
<div id="fot-inre">
<div id="adress">
<p id="rub">BESÖKSADRESS</p>
<p>Hej</p>
</div>
<div id="kontakt">
<p id="rub">KONTAKTA OSS</p>
<p>Telefon: 08-123 45 67</p>
<p>Mail: info#mail.se</p>
</div>
<div id="tider">
<p id="rub">ÖPPETTIDER</p>
<p>Vardagar: 10-19<br>Lördag: 10-17<br>Söndag: 11-16</p>
</div>
<div id="design">
<p>Webbplatsen är gjord av Maria</p>
</div>
</div>
</div>
</div>
</body>
Bulletproof full height!
*,
*:before,
*:after {
-webkit-box-sizing:border-box;
-mozbox-sizing:border-box;
box-sizing:border-box;
}
html,
body {
height:100%;
height:100vh;
margin:0;
padding:0;
}
#content {
height:auto !important;
min-height:100%;
min-height:100vh;
}
Reasons:
100vh is supported in IE9 and above (and basically anything else), and 100% is used as a fallback
border-box is a key piece of layout functionality, to support recalc after padding (so width:50px actually remains 50px, instead of 50px plus padding), and it works back to IE8
adding the margin:0;padding:0; to the html,body eliminates the white space around it ... if you desperately want padding on the body, add it separately (although you should really have it on whatever container you have for everything)
EDIT
So the reason you are still needing to scroll is because border-box handles padding, but not margin. If you want "room" around your content, add the padding there:
#content {
height:auto !important;
min-height:100%;
min-height:100vh;
padding:5px 0;
}
This will give you the effect of room on top and bottom. However, if (for some crazy reason) you are really clinging to the need for margin over padding, you could use calc:
#content {
height:auto !important;
min-height:calc(100% - 10px);
min-height:calc(100vh - 10px);
margin:5px auto;
}
Only supported on IE9 and up, but will give you what you are looking for. I highly advise against it though, as what you are trying to attain is much more easily doable in ways that don't involve margin.
I would implement 2 things. I would use a bumper and calc.
<div class="bumper"></div>
.bumper {
height:5px;
width:100%;
}
put the bumper where you would want your padding to be. Then use calc to set the height of the content.
#content {
background-color: white;
max-width:800px;
padding: 5px;
min-height:90%; //backup for browsers who do not support calc
min-height:calc(100% -5px);
margin-left: auto;
margin-right: auto;
border-radius: 5px;
}
html, body {
background: grey;
height: 100%;
margin:0px; //important
}
Result:
http://jsfiddle.net/m/qes/
Full Code: http://jsfiddle.net/neoaptt/r2ddyg8e/
Change
html, body{
background: grey;
background-size: cover;
height: 100%;
}
to
html, body{
background: grey;
background-size: cover;
height: 100vh;
}
then add a reset
*{box-sizing: border-box; padding: 0; margin: 0}
you can read more about Sizing with CSS3's vw and vh units
The problem:
The reason you have to scroll to see the whole page is because you are giving your element with the id content a min-height of 100% and then also giving it a margin of 5px auto. This is essentially saying I want my content element to have a height of 100% + 5px on the top and 5px on the bottom of margin. height now equals: (100% + 10px).
The answer:
If you want space around your content use the padding property on your content element instead of the margin. This will push the elements within the content element inward 5px from the top and 5px from the bottom, without increasing the height of your content element past 100%.
It should look something like this (not tested):
#content{
background-color: white;
width: 1100px;
padding: 5px auto; /* changed margin to padding */
border-radius: 5px;
position: relative;
height: auto !important;
min-height: 100%;
}
You have a top and bottom margin on your #content div. Remove it and add this to the body :
body {
padding: 5px 0;
box-sizing: border-box;
}
Related
In mobile view, the footer is not remaining at at the bottom of the page. It stays somewhere above the bottom. I want the footer to stay at the bottom always in mobile view and desktop view. But the footer should not be visible always, if the site has much contents, user will have to scroll down to see the footer. What changes do I need to make in the css file to make the footer stay at the bottom of the page always?
html { height: 100%; }
body {
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
color:#303036;
margin:0px;
background:url('../images/diagonal_noise.png');
background-repeat:repeat;
min-width:1100px;
overflow:auto;
height:100%;
}
#mainPart{
margin:0 auto;
}
.container{
overflow:hidden;
clear:both;
max-width:1080px;
margin:20px auto 40px auto;
}
footer {
color: white;
width:100%;
padding:0;
display:block;
clear:both;
height: 40px; /* added */
}
.footrow{
overflow:hidden;
background-color: #111;
display:block;
}
.footrow2{
overflow:hidden;
background-color: #002c42;
display:block;
padding:15px;
}
.foot{
max-width:1080px;
margin:0 auto;
font-size:11px;
line-height:18px;
}
.foot-p{
font-weight: 600;
padding:2px;
color:#66e355 !important;
}
.half-width {
width: 50%;
float:left;
}
.quarter-width {
width: calc(25% - 30px);
float:left;
padding:15px;
}
#social2 {
display: block;
background-color: transparent;
float: left;
margin: 0 auto;
}
.sc-icn2 {
width: 50px;
height: 50px;
display: block;
margin-right: 5px;
margin-bottom: 5px;
float: left;
}
<html>
<head>
</head>
<body>
<div id="mainPart">
</div>
<div class="container">
</div>
<footer>
<div class="footrow" >
<div class="foot">
<div class="quarter-width">
<div>
</div>
</div>
<div class="quarter-width">
</div>
<div class="quarter-width">
<div id="social2">
</div>
</div>
<div class="quarter-width">
</div>
</div>
</div>
<div class="footrow2" >
<div class="foot">
<div class="half-width">
</div>
<div class="half-width">
</div>
</div>
</div>
</footer>
</body>
</html>
To achieve that result define the footer position to bottom. position: absolute; bottom: 0;
The position property specifies the type of positioning method used for an element. The absolute element is positioned relative to its first positioned ancestor element which is the body As you can see in body css rule the element is positioned relative to its normal position.
More about position property can be found here.
html {
position: relative;
min-height: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
overflow-x: hidden;
margin: 0px;
position: relative;
min-height: 100%;
height: auto;
}
.demo {
margin: 0 auto;
padding-top: 64px;
max-width: 640px;
width: 94%;
}
.demo h1 {
margin-top: 0;
}
/**
* Footer Styles
*/
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #34495e;
color:#fff;
text-align: center;
}
<div class="demo">
<h1>Footer Stays Bottom</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque congue nunc at ex ultricies molestie. Cras in tempor turpis. Suspendisse et aliquam nisl. Vestibulum semper nibh at nibh dignissim, ac dapibus lorem facilisis. Donec rhoncus lacus sit amet risus dapibus sollicitudin. Ut vitae auctor dolor, et molestie nunc. Maecenas iaculis ante in tincidunt finibus. Etiam vehicula odio a lorem varius sagittis. Suspendisse sed purus at justo porta blandit quis at quam. Sed vitae faucibus nulla. Sed tincidunt tellus sapien, eu pulvinar nisi suscipit sed. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec eget felis ultricies, iaculis est eu, posuere nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque congue nunc at ex ultricies molestie. Cras in tempor turpis. Suspendisse et aliquam nisl. Vestibulum semper nibh at nibh dignissim, ac dapibus lorem facilisis. Donec rhoncus lacus sit amet risus dapibus sollicitudin. Ut vitae auctor dolor, et molestie nunc. Maecenas iaculis ante in tincidunt finibus. Etiam vehicula odio a lorem varius sagittis. Suspendisse sed purus at justo porta blandit quis at quam. Sed vitae faucibus nulla. Sed tincidunt tellus sapien, eu pulvinar nisi suscipit sed. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec eget felis ultricies, iaculis est eu, posuere nulla.</p>
</div>
<div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>
To make the footer stay at bottom of the page, you simply have to add position: absolute; and bottom: 0; in the block of CSS that applies to footer. So it will become:
footer{
color: white;
width:100%;
padding:0;
display:block;
clear:both;
height: 40px; /* added */
position: absolute;
bottom: 0;
}
You can do this by many ways:
There is negative bottom margins on wrappers
There was a wrapping element that held everything except the footer. It had a negative margin equal to the height of the footer.
* {
box-sizing: border-box;
}
html, body {
height: 100%;
margin: 0;
}
.content {
padding: 20px;
min-height: 100%;
margin: 0 auto -50px;
}
.footer,
.push {
height: 50px;
}
footer {
background: #42A5F5;
color: white;
line-height: 50px;
padding: 0 20px;
}
<div class="content">
<h1>Sticky Footer with Negative Margin 1</h1>
</div>
<footer class="footer">
Footer
</footer>
Negative top margins on footers
This technique did not require a push element, but instead, required an extra wrapping element around the content in which to apply matching bottom padding to. Again to prevent negative margin from lifting the footer above any content.
html, body {
height: 100%;
margin: 0;
}
.content {
min-height: 100%;
}
.content-inside {
padding: 20px;
padding-bottom: 50px;
}
.footer {
height: 50px;
margin-top: -50px;
background: red;
}
<div class="content">
<div class="content-inside">
content
</div>
</div>
<footer class="footer"></footer>
There is calc() reduced height wrappers
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.content {
min-height: calc(100vh - 70px);
padding: 40px 40px 0 40px;
}
.footer {
height: 50px;
background: #42A5F5;
color: white;
line-height: 50px;
padding: 0 20px;
}
<div class="content">
<h1>Sticky Footer with calc()</h1>
</div>
<footer class="footer">
Footer
</footer>
And also you can use flexbox
html {
height: 100%;
}
body {
display: flex;
flex-direction: column;
height: 100vh;
}
.content {
flex: 1 0 auto;
padding: 20px;
}
.footer {
flex-shrink: 0;
padding: 20px;
background: #42A5F5;
color: white;
}
<div class="content">
<h1>Sticky Footer with Flexbox</h1>
</div>
<footer class="footer">
Footer
</footer>
This works for you. Try it.
For that add enough content in side the .container div.
And add min-height value to .container as below.
body {
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
color:#303036;
margin:0px;
background:url('../images/diagonal_noise.png');
background-repeat:repeat;
min-width:100%;
overflow:auto;
height:100%;
}
.container{
overflow:hidden;
clear:both;
max-width:1080px;
margin:20px auto 40px auto;
/*new style*/
min-height:768px;
}
#media only screen and (max-width: 768px) {
.container{
max-width: 80%;
margin:20px auto 40px auto;
min-height:480px;
}
}
html { height: 100%; }
body {
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
color:#303036;
margin:0px;
background:url('../images/diagonal_noise.png');
background-repeat:repeat;
min-width:100%;
overflow:auto;
height:100%;
}
#mainPart{
margin:0 auto;
}
.container{
overflow:hidden;
clear:both;
max-width:1080px;
margin:20px auto 40px auto;
min-height:768px;
}
footer {
color: white;
width:100%;
padding:0;
display:block;
clear:both;
height: 40px; /* added */
}
.footrow{
overflow:hidden;
background-color: #111;
display:block;
}
.footrow2{
overflow:hidden;
background-color: #002c42;
display:block;
padding:15px;
}
.foot{
max-width:1080px;
margin:0 auto;
font-size:11px;
line-height:18px;
}
.foot-p{
font-weight: 600;
padding:2px;
color:#66e355 !important;
}
.half-width {
width: 50%;
float:left;
}
.quarter-width {
width: calc(25% - 30px);
float:left;
padding:15px;
}
#social2 {
display: block;
background-color: transparent;
float: left;
margin: 0 auto;
}
.sc-icn2 {
width: 50px;
height: 50px;
display: block;
margin-right: 5px;
margin-bottom: 5px;
float: left;
}
#media only screen and (max-width: 768px) {
.container{
max-width: 80%;
margin:20px auto 40px auto;
min-height:480px;
}
}
<html>
<head>
</head>
<body>
<div id="mainPart"></div>
<div class="container">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<footer>
<div class="footrow" >
<div class="foot">
<div class="quarter-width">
<div>
</div>
</div>
<div class="quarter-width">
</div>
<div class="quarter-width">
<div id="social2">
</div>
</div>
<div class="quarter-width">
</div>
</div>
</div>
<div class="footrow2">
<div class="foot">
<div class="half-width">
</div>
<div class="half-width">
</div>
</div>
</div>
</footer>
</body>
</html>
I am making a simple messaging app UI. I am trying to make the messages anchor to the bottom of the screen like most modern messaging applications. So far, here is the bare bones of my messaging UI:
HTML
<div class="main-wrapper">
<div class="contact-list">
contacts here
</div>
<div class="conversation-area">
<div class="msg msg-them">this is Alison</div>
<div class="msg msg-me">this is me!</div>
<div class="msg msg-them">you are so cool! :)</div>
<div class="msg msg-them">seriously.</div>
</div>
</div>
SASS
body, html {
height: 100%;
}
.main-wrapper {
height: 100%;
margin: 0px auto;
overflow: hidden;
.contact-list{
float: left;
width: 200px;
height: 100%;
background-color: #aaa;
border-right: 2px solid #777;
}
.conversation-area{
overflow: hidden;
height: 100%;
background-color: #ccc;
.msg{
vertical-align: bottom;
border: 1px solid black;
&-them{
background-color: blue;
float: left;
max-width: 250px;
display: inline;
clear: both;
}
&-me{
background-color: red;
float: right;
max-width: 250px;
display: inline;
clear: both;
}
}
}
}
Whenever a new message comes in, I'll insert it as the last child of the .conversation-area div. I have the messages stacking just like I want them. I just need to make them stick to the bottom of the .conversation-area div.
I've tried messing with position attributes of both the parent and child divs, as well as tried to get vertical-align to work, but so far I haven't gotten it functioning.
How can I make my messaging app look exactly the same EXCEPT the messages stick to the bottom rather than the top?
Here's the jsFiddle: https://jsfiddle.net/63vufn7u/1/
You can achieve this with display:table-cell; and vertical-align:bottom;
I have made some changes to your code but im sure you can adapt now its working:
.main-wrapper {
width: 100%;
height: 200px;
font-family:sans-serif;
}
.contact-list {
width:25%;
display: table-cell;
height: 200px;
background: #555;
color: #fff;
text-align: center;
float: left;
}
#conversation-area {
height: 200px;
width: 300px;
background: steelblue;
display: table-cell;
vertical-align: bottom;
}
.msg {
display: block;
margin: 15px 10px;
}
.msg p {
border-radius:5px 5px 5px 5px;
background: #fff;
display: inline;
padding: 5px 10px;
box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.75);
}
.msg-me {
text-align: left;
}
.msg-me p {
border-radius:15px 15px 15px 0px;
}
.msg-them {
text-align: right;
}
.msg-them p {
border-radius:15px 15px 0px 15px;
}
<div class="main-wrapper">
<div class="contact-list">
Contacts
</div>
<div id="conversation-area">
<div class="msg msg-them"><p>this is Alison</p></div>
<div class="msg msg-me"><p>this is me!</p></div>
<div class="msg msg-them"><p>you are so cool! :)</p></div>
<div class="msg msg-them"><p>seriously.</p></div>
</div>
</div>
Your friendly neighborhood Flexbox solution:
On the container, you could also use the justify-content property to align it's contents to the bottom:
.conversation-area {
display:flex;
flex-direction:column;
justify-content:flex-end;
}
Learn more about flexbox here: http://www.flexboxin5.com
The easiest way I've found is to use flex-direction: column-reverse;.
The drawback to flex-direction: column; is that it starts you at the top and you have to scroll down for older texts. And that's not how chat app interfaces tend to work.
column-reverse makes the texts stick to the bottom. The tradeoff is you have to insert your messages in ascending time stamp order instead of reversed like you normally would, because flex-box does the reversing in css. Same with any animations. So new text bubble animation would be applied to the :first child rather than the :last child.
Here's an example without animations: https://jsfiddle.net/ut1Lybsj/1/
<style>
.container {
height: 200px;
width: 200px;
overflow-y: scroll;
display: flex;
flex-direction: column-reverse;
border: 1px solid black;
}
.container div {
margin-top: 20px;
}
</style>
<div class="container">
<div style="background:red;">First Item<br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce malesuada semper purus, non rutrum nulla mollis id. Nunc faucibus hendrerit nunc, eu rhoncus nisi congue non. </div>
<div style="background: skyblue;">Second Item<br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce malesuada semper purus, non rutrum nulla mollis id. Nunc faucibus hendrerit nunc, eu rhoncus nisi congue non. </div>
<div style="background: green;">Third Item<br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce malesuada semper purus, non rutrum nulla mollis id. Nunc faucibus hendrerit nunc, eu rhoncus nisi congue non. </div>
</div>
I must preface this post by saying my CSS isn't great!
I have a page with a menu on the left, which is essentially an unordered list, wrapped in a div to apply the CSS
<div class="leftMenu" id="jobMenu">
<ul>
<li ng-click="menuClick(1)">
<p>Menu Item</p>
</li>
<li ng-click="menuClick(2)">
<p>Menu Item</p>
</li>
<li ng-click="menuClick(3)">
<p>Menu Item</p>
</li>
<li ng-click="menuClick(4)">
<p>Menu Item</p>
</li>
<li ng-click="menuClick(5)">
<p>Menu Item</p>
</li>
<li ng-click="menuClick(6)">
<p>Menu Item</p>
</li>
</ul>
</div>
Menu CSS:
.leftMenu {
display: block;
text-align: center;
float: left;
height: 94vh;
border: 1px solid #778390;
width: 120px;
background-color: #778390;
color: white;
}
.leftMenu ul {
margin-top: 0;
list-style: none;
padding: 0;
}
.leftMenu li {
text-align: center;
border-bottom: 1px solid #58626B;
padding-bottom: 18px;
padding-top: 18px;
cursor: pointer;
font-size: 14px;
}
.leftMenu li:hover {
background-color: #5d9eca;
}
.leftMenu li p {
margin: 0;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 13px;
}
On the right hand side, I have a main page, with a Kendo Grid (the issue occurs no matter what the content is).
<div class="bottomSection">
<kendo-grid options="mainGridOptions">
</kendo-grid>
</div>
CSS:
.bottomSection {
display: block;
padding: 12px 15px;
/*float: right;*/
width: 84.5%;
height: 60%;
/*margin-right: 66px;*/
}
On most displays, the layout renders perfectly, like so:
However if I resize the window and/or zoom in, the bottomSection div is thrown under the left menu like so:
How can I make it so whenever the window is resized, the leftMenu always stays at 120px width and the bottomSection div resizes itself, so they both stay side by side no matter what size the window is? I would have thought using the percentage as a width property would achieve this?
Thanks in advance!
.leftMenu {
display: block;
text-align: center;
position: absolute;
left: 0;
top: 0;
height: 94vh;
border: 1px solid #778390;
width: 120px;
background-color: #778390;
color: white;
}
.bottomSection {
display: block;
padding: 12px 15px;
width: 100%;
padding-left: 135px;
height: 60%;
box-sizing: border-box;
}
Let me preface my solution by suggesting that you use a percentage for your left menu also, so that mobile devices would have a good experience. With a fixed width on one div, and a percentage on the other, you're bound to have layout problems.
With that said, if you're constrained to use a fixed with for the left menu, here's a solution - I've cut out some of the markup, to focus on the major layout aspects:
html, body {
margin: 0;
padding: 0;
}
.container {
width: 100%;
position: relative;
}
.leftMenu {
background-color: #333;
color: #FFF;
height: 200px; /* for demo purposes */
width: 120px;
position: relative;
}
.bottomSection {
background-color: #CCC;
color: #FFF;
padding: 10px;
position: absolute;
left: 120px;
right: 0;
}
.leftMenu, .bottomSection {
display: inline-block;
vertical-align: top;
}
<html>
<head>
</head>
<body>
<div class="container">
<div class="leftMenu">Menu</div>
<div class="bottomSection">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus congue hendrerit. Phasellus luctus quam in nulla mollis finibus. Quisque feugiat, metus sit amet porta fringilla, elit odio sodales mauris, sed gravida turpis felis vitae turpis. Mauris interdum ac magna vel pretium. Nulla porta rutrum velit mollis congue. Proin pellentesque urna et magna lacinia, et tincidunt mi placerat. Nulla suscipit rhoncus viverra. Integer pulvinar at purus non tristique.
</div>
</div>
</body>
</html>
Points to note:
Using display: inline-block for layout instead of float.
A parent div (container) is used: must be set to position: relative (or possibly absolute).
Using absolute for positioning of bottomSection. left is set to 120px (to ignore the left menu); right is set to 0, to stretch to the other side of the screen.
vertical-align is set to top, to keep alignment of the child divs to the top.
So this again links to the same website as my other question and is another positioning problem that is possibly simple.
I have a container div that I want to hold two divs inside it, one taking up a 3rd of the container on the right to contain pictures and one to contain text on the left. For some reason however, when telling both inner divs to float left the container seems to disappear and when using inspect element, is in a weird place that I cannot explain.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Toby King - Home</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>
<body>
<div id="banner">
<div class="menu">
<div class="menuBit">
<h2 class="menuContent">HOME</h2>
</div>
<div class="menuBit">
<h2 class="menuContent">BLOG</h2>
</div>
<div class="menuBit">
<h2 class="menuContent">WORK</h2>
</div>
</div>
</div>
<div class="main">
<div class="textSection">
<div class="mainTextSection">
<h1 class="maintext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent rhoncus erat nec porttitor facilisis. In hac habitasse platea dictumst. Mauris id faucibus arcu. Mauris non orci mauris. Vivamus a porta odio. Praesent at purus ante. Quisque magna odio, elementum ut facilisis vitae, consequat at tellus. Praesent nulla est, ultrices sit amet sagittis eget, consequat id justo. Integer elementum in nibh eu ultricies. Integer fringilla urna in mollis accumsan. Etiam iaculis urna et malesuada tincidunt. Nunc dignissim purus eu tempor bibendum.</h1>
</div>
<div class="mainPictureSection">
<img src="images/Example.svg">
</div>
</div>
</div>
<div id="footer">
<h2 class="social">CONTACT:</h2>
<img src="images/fb.png" class="social">
<h2 class="social">some text</h2>
<img src="images/insta.png" class="social">
<h2 class="social">some text</h2>
</div>
</body>
</html>
CSS:
#banner {
height: 50px;
width: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
position: fixed;
background-image: url("images/menuHor.png");
}
.menuBit {
height: 40px;
width: 100px;
margin: 0px;
padding: 0px;
float: left;
margin-left: 10px;
}
.menuContent:hover {
text-decoration: underline;
cursor: pointer;
}
.menuContent {
font-family: "cicle-gordita";
font-size: 30px;
text-align: center;
padding: 0px;
margin: 0px;
margin-top: 10px;
color: #ffffff;
}
.main {
position: fixed;
margin: 0px;
margin-top:50px;
padding: 0px;
width: 100%;
height: 94.7916666667%;
overflow: scroll;
background: url("images/backgr.png");
}
.maintext {
font-family: "cicle-gordita";
}
.textSection {
width: 65%;
height: auto;
background: #FFFFFF;
margin-right: 17.5%;
margin-left: 17.5%;
margin-top: 2.5%;
margin-bottom: 5%;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.mainPictureSection {
height: auto;
width: 21.67%;
float: left;
overflow: hidden;
margin: 0px;
padding: 0px;
}
.mainTextSection {
height:auto;
width: 43.33%;
float: left;
margin: 0px;
padding: 0px;
}
#footer {
width: 100%;
height: 30px;
clear: both;
position: fixed;
bottom: 0;
background-image: url("images/menuHor.png");
}
.social {
float: left;
padding: 0;
margin-top: 0px;
margin-bottom: 2.5px;
margin-left: 10px;
font-family: "cicle-gordita";
color: #ffffff;
}
.social h2 {
margin-top: 5px;
}
The Jscript/jQuery file is just to fade bits in and out but contributes no effect to positioning
Change float: left to display: inline-block should be the best way to do this.
display: inline-block adds white-space. One way to remove this is adding comments between your divs:
<div class="container">
<div class="child">
</div><!--
--><div class="child">
</div>
</div>
or have the divs inline like this:
<div class="container">
<div class="child"></div><div class="child"></div>
</div>
To align them at the top add vertical-align: top to the child divs.
Where has the parent element gone?
If a container has only floating children, its height will collapse as floating elements are not considered when calculating height of a container. You need to clear those floating elements to make the container actually contain the floating children.
One way to do this is by adding a clearfix and putting the class on the container element (taken from http://nicolasgallagher.com/micro-clearfix-hack/):
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.clearfix {
*zoom: 1;
}
That's kind of ugly. Any other solution?
There is an (more than one) alternative, though, the most common probably being using display: inline-block instead of float: left.
Unfortunately, looking at the following example you'll see it does not work as expected initially:
.container {
background-color: #a00;
}
.child {
background-color: #f0f0f0;
display: inline-block;
width: 50%;
}
<div class="container">
<div class="child">Child One</div>
<div class="child">Child Two</div>
</div>
You see that the second container wraps to a new line even though both have been defined to have their fair share of 50% of the container's width.
Why does this happen?
As soon as your HTML contains any sort of whitespace between inline-block elements, it's going to get rendered and consume space.
So how can I fix that?
The most common way to avoid that is to set the container's font-size: 0; (which is not always the go-to-solution, but in most cases), and re-setting it ony the children as needed:
.container {
background-color: #a00;
font-size: 0;
}
.child {
background-color: #f0f0f0;
display: inline-block;
font-size: 16px;
width: 50%;
}
<div class="container">
<div class="child">Child One</div>
<div class="child">Child Two</div>
</div>
Please note the nav utilises JS as well as the footer text. The rest is all HTML/CSS. I can show the JS if needs be but I believe this issue lies either with the HTML or the CSS.
In the preview of the site, the navigation (nav01/menu) and the body/main area are shifted to the right slightly (approximately by 10px). So instead of the navigation and main red area being in line with the banner image/bg they're offset to the right. I'm assuming this is what has caused a horizontal scroll bar (there's approximately 400px of additional blank space on the right hand side of the website).
I've set margins to 0 in the specific areas but these left and right margins remain.
The second issue is with what will become a hidden content/dropdown area (currently visible) and the page divider for the next page (scrolling single page). In each of these instances, pagedown and hidden box, I've specified the width as 100% yet they remain central and don't even stretch to the actual image sizes.
Any help with these 2 problems would be appreciated. I'm sure it's something simple but I just can't seem to find it after hours of trying.
..............................
#fontface {
font-family: Swisz;
src: url(fonts/swisrg.ttf);
}
#fontface {
font-family: Swisz;
src: url(fonts/swisrg.ttf);
font-weight: thin;
}
#container {
position: absolute;
top: 0px;
left: 0px;
background-color: #73008C;
background-image: url("banner.jpg");
background-size: 100%;
width: 100%;
height: 800px;
content: 60px;
padding: 0px;
border: 5px #73008C;
margin-left: 0px;
margin-right: 0px;
z-index: -3;
}
#header {
position: absolute;
background-color: rgba(255, 255, 255, 0.4);
width: 100%;
height: 12%;
margin: auto;
z-index: 1;
}
#logo {
position: relative;
border: 0px;
margin-top: 9px;
z-index: 2;
}
#nav01 {
position: absolute;
background-color: #374754;
width: 100%;
height: 40px;
padding: 0px;
margin-left: 0px;
margin-top: 85px;
margin-right: 0px;
border-radius: 0px 0px 6px 6px
}
ul#menu {
font-family: Swisz;
position: relative;
background-color: #374754;
padding: 0;
margin-top: 13px;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 0px;
}
ul#menu li {
display: inline;
margin-right: 5px;
}
ul#menu li a {
background-color: #374754;
padding: 10px 10px;
text-decoration: none;
color: #ffffff;
border-radius: 4px 4px 4px 4px;
}
ul#menu li a:hover {
color: white;
font-style: bold;
background-color: #d83030;
}
#overlay {
font-family: Swisz;
position: relative;
margin-left: auto;
margin-right: auto;
top: 250px;
bottom: 200px;
width: 30%;
height: 30%;
background-color: #d83030;
padding: 15px 15px;
color: #ffffff;
border-radius: 8px 8px 8px 8px;
}
#info {
position: relative;
left: 400px;
top: 280px;
}
body {
font-family: "Helvetica", Verdana, sans-serif;
font-size: 12px;
background-color: #ffffff;
color: #ffffff;
text-align: center;
padding: 0px;
}
#main {
position: absolute;
top: 600px;
padding: 10px;
padding-left: 200px;
padding-right: 200px;
background-color: #d83030;
background-position: top center;
margin: 0;
}
#h1 {
font-family: Swisz;
text-shadow: 5px 5px 5px ##374754;
color: #ffffff;
text-align: center;
font-size: 30px;
}
#h3 {
font-family: Helvetica, sans-serif;
color: #ffffff;
text-align: left;
font-size: 12px;
}
.h5 {
font-family: Helvetica, sans-serif;
color: #374754;
text-align: center;
font-size: 16px;
}
#hiddenbox {
position: relative;
width: 100%;
height: 298px;
background-image: url("hidden_bg.jpg");
background-repeat: repeat-x;
padding: 5px;
padding-top: 7px;
margin: 0;
text-align: left;
}
.pagedown {
position: relative;
width: 100%;
padding: 0;
top: 900px;
margin: 0;
}
#sub {
position: relative;
padding-left: 20%;
padding-right: 20%;
padding-bottom: 10%;
padding-top: 1%;
color: #374754;
top: 1200px;
background-color: #ffffff;
margin: 0;
#h4 {
font-family: Helvetica, sans-serif;
color: #374754;
text-align: center;
font-size: 40;
}
#footer {
position: relative;
color: #ffffff;
margin-bottom: 0px;
margin-top: 100px;
}
<!DOCTYPE html>
<html>
<head>
<title>TITLE HEREd</title>
<link href="Site.css" rel="stylesheet">
<script src="Script.js"></script>
</head>
<body>
<div id="container">
<div id="header">
<div id="logo">
<img src="logo.png" alt="Logo" style="width: 20%; height: 20%"></img>
</div>
</div>
</div>
<nav id="nav01"></nav>
<div id="overlay">
<h1>Filler title text here<h1>
<h2>Filler filler filler filler filler</h2>
</div>
<div id="info">
<img src="seehow.png" alt="See How" style="width:345px;height:240px">
</div>
<div id="main">
<h1>LIPSUM</h1>
<h2>main content will al be placed here</h2>
<img src="wilfcent.png" alt="Wilf" style="width:345px;height:428px">
<div id="hiddenbox">
<h3>drop down content/hiddent content here/h3>
<img src="promo.png" alt="Promotion" style="width:321px;height:176px"></img>
</div>
<img src="pagedown.gif" alt="Page down" style="width:100%;height:68px"></img>
</div>
<div id="sub">
<h4> How It Works </h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut turpis sapien. Proin tempus nibh ac rhoncus congue. Nullam pretium placerat vestibulum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed sed est vitae libero placerat tristique. Aliquam pulvinar convallis mi, vitae consequat tortor pellentesque ut. In lacinia, ex vel accumsan viverra, est ex efficitur justo, pulvinar luctus mi leo nec risus. Sed nec tellus bibendum, convallis enim at, elementum lectus. Fusce eu enim blandit, volutpat eros lobortis, auctor odio. Praesent tristique sem elit, nec consequat tortor placerat at. Nullam eu arcu et ex iaculis feugiat ut quis enim. Nulla quis libero placerat, accumsan nulla et, laoreet magna. Sed congue ut nunc maximus gravida.</p>
<footer id="foot01"></footer>
</div>
<script src="Script.js"></script>
</body>
</html>
To solve your first issue of the navigation and the body being shifted give the body tag a margin:0px. This will move them back into place.
The 400px of blank space is caused by the left:400px you have on the #info element.
Your second issue is caused by the padding-left and padding-right you have on the #main element. Remove those, and give a width:100% to the #main. The parent and now the child both fill the width of the page.
The first problem is quite simple. All browser handle html tags differently, and most of the browsers for example have given the <body> a margin, which causes you the 10px.
Simply add this to your css file:
body, html {
margin: 0;
padding: 0;
}
The reason for the 400px on the right side is your <div id="info"> tag. This div got the attribute (set by the browsers default) div {display: block}, which says the div does block the full width, that is available by the screen size.
Then you gave it the css attributes position: relative; left: 400px. That means, that the div, as said above, already has the full width plus the 400px added as space from the left. Because of that its overscaled.
A smoother version is to change the leftinto padding, so it becomes:
#info {
position: relative;
padding-left: 400px;
top: 280px;
}
Your second issue is caused by the padding-(left/right)attributes on your #main div. You can simply remove them and your div gets the full width of the page.
Last, you have got one missing <symbol in this line before the closing </h3> tag.
<h3>drop down content/hiddent content here/h3>
Hope this helps, feel free to ask for further information.
Best regards,
Marian.