I want my margins to collapse fully before the body starts to become narrower like how it is on http://www.skysports.com/, and only when the margins have fully collapsed then the body can become narrower. I've been playing around with px, em, and % in my css for ages and haven't been able to make it work. Here is what i have so far.
html { background-image:url(images/webBackground.jpg);
background-size:100% 100%;
background-repeat:no-repeat;
background-attachment:fixed;
height:100%; width:100%;
}
body { background:black;
height:100%; width:75%;
margin:0 12.5% 0 12.5%;
}
#container { width: 100%; height: 100%; }
Here's a jsfiddle exmaple of what I think you're asking for.
HTML
<div id="wrapper">
<div id="main-content">
<div class="push"></div>
</div>
</div>
CSS
body, html {
margin: 0px;
padding: 0px;
}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
width: 500px; /* specific resolution width */
margin: 0px auto 0px;
}
#main-content {
background-color: red;
}
#main-content .push {
height: 500px;
}
Sorry I didnt fully understand your question. Assuming that you need your image center aligned whatever width of the screen.
body
{background: url(images/webBackground.jpg) no-repeat fixed center 0 black;}
Related
I would like to achieve a 3 rows layout that behaves like this:
Content is displayed in the middle row. With no content, it just has the fixed height header on top of the screen and the fixed hight footer at the bottom. The middle row is empty and fills up the remaining height of the window.
With increasing content, the middle row gets larger. When it reaches the max size, the total layout size increases, so that the user now has to scroll to see the lower content and the footer.
I kind of managed to do that with tables:
http://jsfiddle.net/v73c4L7n/8/ (lot of content)
http://jsfiddle.net/v73c4L7n/9/ (little content)
HTML
<table class="main">
<tr><td>HEADER</td></tr>
<tr class="middle">
<td>
<div class="area">
<p>Content</p>
<p>Content</p>
</div>
</td>
</tr>
<tr><td>FOOTER</td></tr>
</table>
CSS
body, html {
height: 100%;
padding:0;
margin:0;
}
.area {
position: relative;
width: 300px;
background-color: green;
margin: 0px auto;
min-height: 100%;
height: 100%;
}
.main {
height: 100%;
width: 100%;
}
.main tr:first-child, .main tr:last-child {
height: 50px;
}
The problem is, that it doesn't seem to work in IE9 or IE10. I think, the problem is the height:100% of .area inside a table cell, that has no explicit height.
So I wondered if there is a better approach to this kind of layout.
have you given a try to set .middle height to 100% too ?
this way, the .middle <tr> will take as much place wich remains, others <tr> will expand according to their content.
http://jsfiddle.net/v73c4L7n/10/ (works in latest browsers .
updated CSS:
body, html {
height: 100%;
padding:0;
margin:0;
}
.area {
width: 300px;
background-color: green;
margin: 0px auto;
min-height: 100%;
height: 100%;
padding:1px
}
.main {
table-layout: fixed;
border-collapse: collapse;
background-color: red;
height: 100%;
width: 100%;
}
.main .middle > td {
background-color: yellow;
width: 100%;
}
.main tr:first-child, .main tr:last-child {
height: 50px;
}
.main tr:first-child > td {
width: 100%;
background-color: rgba(0,0,255,0.5);
}
.main tr:last-child > td {
width: 100%;
background-color: rgba(0,0,255,0.5);
}
.middle {
height:100%;
}
It worlks too with display:table and regular tag elements such as header, main and footer. http://jsfiddle.net/v73c4L7n/13/
Display:flex; makes things even easier : http://jsfiddle.net/v73c4L7n/14/
display:table is understood since IE8, flex since IE10 :(
Use divs not tables if you can. I would use the calc(expression) to get 100% height minus the sum of the footer and header. Look here in the fiddle. If you delete some of the paragraphs in the content div you will see it moves the footer to the bottom of the page even if theres no content.
JSFiddle
HTML
<div id="wrapper">
<div id="header">
HEADER
</div>
<div id="content">
<p>content</p><p>content</p><p>content</p><p>content</p><p>content</p>
<p>content</p><p>content</p><p>content</p><p>content</p><p>content</p>
<p>content</p><p>content</p><p>content</p><p>content</p><p>content</p>
<p>content</p><p>content</p><p>content</p><p>content</p><p>content</p>
<p>content</p><p>content</p><p>content</p><p>content</p><p>content</p>
</div>
<div id="footer">
FOOTER
</div>
CSS
html, body {
background-color:yellow;
height:100%;
}
* {
margin:0;
padding:0;
}
#wrapper {
height:100%;
margin: 0 auto;
}
#header{
height: 50px;
width: 100%;
background-color:purple;
}
#content {
background-color:green;
min-height: -moz-calc(100% - 100px); /* Firefox */
min-height: -webkit-calc(100% - 100px); /* Chrome, Safari */
min-height: calc(100% - 100px); /* IE9+ and future browsers */
width:300px;
margin:0 auto;
}
#footer {
height: 50px;
width:100%;
background-color:purple;
}
I've been reading a lot of entries to figure out why my content won't force the body and html tags to stretch to 100% of the inner content's height.
My page is here: http://truerenaissance.devmu.com/artisthighlight/
You'll see the background image (set on the body tag) is not stretching to 100% of the page or inner content's height. I am only using position: relative everywhere. I'm also using a 'clearfix' at the bottom of the content.
If anyone has any ideas as to why this is happening, I'd really appreciate it.
html, body { width: 100%; height: 100%; min-height: 100%; padding: 0px; margin: 0px; background: white; font-size: 12pt; font-family: 'Arial'; }
#site-wrapper { width: 775px; height: 100%; min-height: 100%; margin: 0 auto; padding-bottom: 100px; background-color: rgba(255,255,255,.75);
padding: 0px; z-index: 10; }
#site-wrapper .inner { min-height: 100%; padding: 20px 20px 40px 24px; }
.clear:before,
.clear:after {
content:"";
display:table;
}
.clear:after {
clear:both;
}
.fixer { display:block;clear:both;overflow:hidden;width:auto;height:0px;line-height:1px;font-size:1px; }
<html>
<body>
<div id="body-wrapper">
<div id="site-wrapper">
<div class="inner">
</div>
</div>
</div>
</body>
</html>
Thanks!
Well you constrained the body height to the viewport height and you didn't stretch the background vertically.
Remove height: 100% from html and body and use background-size's cover value.
Thanks for the big-ass picture by the way.
There are two floated divs of different height inside a wrapper div. I need both of them to be 100% of height of the body i.e. of the same height. Also used clearfix. But height:100% doesnt seem to work. How to do this?
Demo
Html:
<div class="wrapper">
<div class="primary">
<img src="http://demo1.opentaps.org/images/products/small/gis_computer_glen_rolla.png" />
</div>
<div class="secondary">
<img src="http://demo1.opentaps.org/images/products/small/gis_computer_glen_rolla.png" />
</div>
<div class="clearfix">
</div>
</div>
CSS:
body {
min-height: 100vh;
background-color: green;
margin: 0;
}
.wrapper{
background-color: blue;
height: 100%;
}
.primary{
float: left;
width: 80%;
height: 100%;
background-color: yellow;
}
.primary img{
height: 100px;
width: 100px;
}
.secondary{
float: right;
width: 20%;
background-color: red;
height: 100%;
}
.secondary img{
height: 500px;
width: 100px;
}
.clearfix{
clear: both;
}
All you need to do is add a height of 100% to the html and body tags like so:
html, body {
height: 100%;
}
Demo:
http://jsbin.com/EsOfABAL/1/
if you want to use vh units (seen in your code), it does makes it easier, no need to worry about 'heritage' and see your columns being stopped at 100% height of the window.
if you mix the method of faux-column and clear fix , you need to set only once min-height:100vh; on the floatting element.
Your yellow background has to be drawn in the wrapper and the red one in the non-floatting element wich is stretch with the clearfix method.
body {
margin: 0;
}
.wrapper{
background-color: yellow;
overflow:hidden;
}
.primary{
float: left;
width: 80%;
min-height:100vh;
}
.wrapper .primary img{
height: 100px;
/* width:1000px; */
width: 100px;
}
.secondary .overflow{
margin-left:80%;
background-color: red;
}
.overflow:after {
content:'';
height:0;
display:block;
clear:both;
}
.secondary img{
height: 500px;
/*height:100px;*/
width: 100px;
}
uncomment height value for image to check behavior and drawing of your page, scrolling or not .
http://codepen.io/anon/pen/chHtK
Hope this helps you to understand the use of vh (or vw) units , for the faux-column and clearfix methods, it's just a reminder of old methods :)
Enjoy
The html element also needs to be 100% - try this:
html { height: 100%; }
body {
height: 100%;
background-color: green;
margin: 0;
}
I have a two column layout:
<html>
<head></head>
<body>
<div id="container">
<div id="header"></div>
<div id="sidewrapper"></div>
<div id="contentwrapper"></div>
</div>
</body>
</html>
I want to have both sidebar and content be 100% in height but the most top container's min-height should be 100%.
I tried to solve it with the following css:
* {
margin: 0;
padding: 0;
}
html {
font-family: Georgia, serif;
color: #000; height:100%; min-height:100px;
}
body {
background: #fff; height:100%; min-height:100px; overflow:hidden;
}
#header {
width: 100%;
position: relative;
float: left;
height: 23px;
}
#container {
position:relative;
width: 100%; height:100%;
margin: auto; background:blue;
}
#contentwrapper {
float:left;
background:red;
position: relative;
width: 700px; padding:0px; margin:0px;
height: auto;
}
#sidewrapper {
float:left;
position: relative;
width: 159px; height:100%;
padding:0px; margin:0px;
}
...but I get a scrollbar because of the header's 23px height. I tried to solve it with overflow:hidden for the body element but I do not know if that is the right solution.
Any ideas?
If my assumption I put forward in my comment to the question is right, then sidebar is 100% high, and on top of that you have a 23px header, so that causs your container to be 100% + 23px high.
In the future you will have in css calc() http://hacks.mozilla.org/2010/06/css3-calc/ . This will solve your problem.
Now, I guess you should calculate the height of the sidebar ( = height of container - 23px), by javascript.
Make #header position absolute. This will cut that block out of the normal flow and you'll be able to make heights of other blocks equal to their parent.
#header {
position: absolute;
width: 100%; height: 23px;
top: 0; left: 0;
}
#sidewrapper,
#contentwrapper {
float: left;
width: 50%;
height: 100%;
}
#sidewrapper .content,
#contentwrapper .content {
margin-top: 23px;
}
The height of an element is compared with its father element. In your case, I recommend you specify the concrete width & height for "containter", because it'll be hard to pretend the size of the screen on many machines.
If you insists use percent, I recommend you use for both element, such as header 25% height and content 75% height.
Lets say I've a html body and a div inside and I want to make the height of the div to the entire browser without scroll bar and side gaps. Then understand the following example below, and implement your own.
Html:
<body>
<div id="yellowDiv">
<div>
</body>
CSS:
body{
margin:0px;
}
yellowDiv{
background-color:yellow;
height:100vh;
}
This question already has answers here:
Align <div> elements side by side
(4 answers)
Closed 4 years ago.
I have a small problem. I am trying to align two divs side by side using CSS, however, I would like the center div to be positioned horizontally central in the page, I achieved this by using:
#page-wrap { margin 0 auto; }
That's worked fine. The second div I would like positioned to the left side of the central page wrap but I can't manage to do this using floats although I'm sure it is possible.
I would like to push the red div up alongside the white div.
Here is my current CSS concerning these two divs, sidebar being the red div and page-wrap being the white div:
#sidebar {
width: 200px;
height: 400px;
background: red;
float: left;
}
#page-wrap {
margin: 0 auto;
width: 600px;
background: #ffffff;
height: 400px;
}
If you wrapped your divs, like this:
<div id="main">
<div id="sidebar"></div>
<div id="page-wrap"></div>
</div>
You could use this styling:
#main {
width: 800px;
margin: 0 auto;
}
#sidebar {
width: 200px;
height: 400px;
background: red;
float: left;
}
#page-wrap {
width: 600px;
background: #ffffff;
height: 400px;
margin-left: 200px;
}
This is a slightly different look though, so I'm not sure it's what you're after. This would center all 800px as a unit, not the 600px centered with the 200px on the left side. The basic approach is your sidebar floats left, but inside the main div, and the #page-wrap has the width of your sidebar as it's left margin to move that far over.
Update based on comments: For this off-centered look, you can do this:
<div id="page-wrap">
<div id="sidebar"></div>
</div>
With this styling:
#sidebar {
position: absolute;
left: -200px;
width: 200px;
height: 400px;
background: red;
}
#page-wrap {
position: relative;
width: 600px;
background: #ffffff;
height: 400px;
margin: 0 auto;
}
I don't understand why Nick is using margin-left: 200px; instead off floating the other div to the left or right, I've just tweaked his markup, you can use float for both elements instead of using margin-left.
Demo
#main {
margin: auto;
width: 400px;
}
#sidebar {
width: 100px;
min-height: 400px;
background: red;
float: left;
}
#page-wrap {
width: 300px;
background: #0f0;
min-height: 400px;
float: left;
}
.clear:after {
clear: both;
display: table;
content: "";
}
Also, I've used .clear:after which am calling on the parent element, just to self clear the parent.
This Can be Done by Style Property.
<!DOCTYPE html>
<html>
<head>
<style>
#main {
display: flex;
}
#main div {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 40px;
}
</style>
</head>
<body>
<div id="main">
<div style="background-color:coral;">Red DIV</div>
<div style="background-color:lightblue;" id="myBlueDiv">Blue DIV</div>
</div>
</body>
</html>
Its Result will be :
Enjoy...
Please Note: This works in Higher version of CSS (>3.0).
The HTML code is for three div align side by side and can be used for two also by some changes
<div id="wrapper">
<div id="first">first</div>
<div id="second">second</div>
<div id="third">third</div>
</div>
The CSS will be
#wrapper {
display:table;
width:100%;
}
#row {
display:table-row;
}
#first {
display:table-cell;
background-color:red;
width:33%;
}
#second {
display:table-cell;
background-color:blue;
width:33%;
}
#third {
display:table-cell;
background-color:#bada55;
width:34%;
}
This code will workup towards responsive layout as it will resize the
<div>
according to device width.
Even one can silent anyone
<div>
as
<!--<div id="third">third</div> -->
and can use rest two for two
<div>
side by side.
It's also possible to to do this without the wrapper - div#main. You can center the #page-wrap using the margin: 0 auto; method and then use the left:-n; method to position the #sidebar and adding the width of #page-wrap.
body { background: black; }
#sidebar {
position: absolute;
left: 50%;
width: 200px;
height: 400px;
background: red;
margin-left: -230px;
}
#page-wrap {
width: 60px;
background: #fff;
height: 400px;
margin: 0 auto;
}
However, the sidebar would disappear beyond the browser viewport if the window was smaller than the content.
Nick's second answer is best though, because it's also more maintainable as you don't have to adjust #sidebar if you want to resize #page-wrap.
The easiest method would be to wrap them both in a container div and apply margin: 0 auto; to the container. This will center both the #page-wrap and the #sidebar divs on the page. However, if you want that off-center look, you could then shift the container 200px to the left, to account for the width of the #sidebar div.