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>
Related
i've never programmed before or anything, but i have a college project in which i have to edit a layout.
there's a part of it in which the text is kinda in center, when it reaches the center of the page it skippes to next line.. i want it to continue normally..
https://jsfiddle.net/nqpa6jh0/#&togetherjs=vORwosTiHV
.image.feature2 {
display: block;
margin: 0 0 0em 0;
}
.image.feature2 img {
display: block;
width: 100%;
border-radius: 50%;
width: 200px;
height: 200px;
float: left
}
.image.feature3 img {
display: block;
width: 100%;
border-radius: 50%;
width: 200px;
height: 200px;
float: right;
<div class="wrapper style2">
<section class="container">
<header class="major">
<h2>Depoimentos</h2>
<span class="byline">Os viajantes recomendam.</span>
</header>
<div class="row no-collapse-1">
<section class="">
<a class="image feature2"><img src="images/pic02.jpg" alt=""></a>
<p>Nam in massa. Sed vel tellus. Curabitur sem urna, consequat vel, suscipit in, mattis placerat.</p>
</section>
</div>
</section>
</div>
here's how it's looking
that's how i wanted it to look like (photoshopped the first one):
Let me explain it properly to you.
From the photoshopped image, I can see what you are trying to achieve as well as the errors in your code. There are plenty of them.
Here: (redundant code)
.image.feature2 img {
display: block;
width: 100%;
border-radius: 50%;
width: 200px;
height: 200px;
float: left
}
.image.feature3 img {
display: block;
width: 100%;
border-radius: 50%;
width: 200px;
height: 200px;
float: right;
}
You are not using classes properly. Classes are meant to remove the redundant code in css. Lets consider you added a class myParentClass to the div containing the sections as well remove the class image feature2 on a element. Then the html would look like:
<div class="myParentClass row no-collapse-1">
<section class="">
<a ><img src="images/pic02.jpg" alt=""></a>
<p>Nam in massa. Sed vel tellus. Curabitur sem urna, consequat vel, suscipit in, mattis placerat.</p>
</section>
<section class="">
<a><img src="images/pic02.jpg" alt=""></a>
<p>Nam in massa. Sed vel tellus. Curabitur sem urna, consequat vel, suscipit in, mattis placerat.</p>
</section>
</div>
The above css can be replaced with:
.myClass section a img {
display: block;
width: 100%;
border-radius: 50%;
width: 200px;
height: 200px;
float: left
}
.myParentClass section:nth-child(odd) a img {
float: right;
}
And in order to make the text inside the p elements not to wrap around, you need to add white-space": nowrap. So:
.myParentClass section p {
white-space: nowrap;
}
And to have the effect of having some whitespace to the left of odd section elements, you must use padding i.e,
.myParentClass section:nth-child(odd){
padding-left: 50px;
}
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.
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;
}
I want to center a DIV which width is unknown. It should be as width as the actual content. I tried:
<div style="background-color: red; width: 300px; text-align: center; margin: 0 auto;">dsffsffsfsddf</div>
it only works when "width" is set. Auto wont help.
display: table; margin: 0 auto;
http://jsfiddle.net/vabxz/
div{
display:table
margin:0 auto;
}
Take a look at this previous answer: centering variable width divs
But one answer is to basically use css-floats
<style type="text/css">
#hideoverflow { overflow: hidden; }
#outer { position: relative; left: 50%; float: left; }
#inner { position: relative; left: -50%; float: left; }
</style>
<div id="hideoverflow">
<div id="outer">
<div id="inner">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id velit vel augue fringilla rhoncus at et odio. Suspendisse potenti. Aliquam justo libero, commodo ut iaculis in, placerat vel purus.
</div>
</div>
</div>
It's quite simple (http://jsfiddle.net/bukfixart/tYyJN/):
<div style="border:1px solid #000;text-align:center;">
<div style="border: 1px solid #f00; display:inline-block;">some content</div>
</div>
The key points are text-align:center for the outer box and display:inline-block for the inner box
Check out my fiddle: http://jsfiddle.net/PRUBd/
CSS
body {
text-align: center;
}
#container {
text-align: left;
border: 1px solid black;
padding: 10px;
display: inline-block;
}
HTML
<div id="container">
This div is as wide as its content and centered!
</div>