I have a 'body' with 40px of margin.
Moreover, I want to add a div with 100% in height and 100% in weight with the 'static position'.
My problem is that my 'div' is go beyond the 'body' !
I want my div fills the 'body' (respecting with the margin of it : 40px).
How can I solve this problem ?
Thks
MY JS FIDDLE
body {
background:pink;
margin:40px;
}
.contenuWorks {
height:100%;
width: 100% ;
background:red;
position:absolute;
}
If you use an absolute positioning you can just set coordinates of the div.
Fiddle: http://jsfiddle.net/EQEPY/
.contenuWorks {
left: 40px;
right: 40px;
top: 40px;
bottom: 40px;
background:red;
position:absolute;
}
if you choose a box-model with box-sizing, you can turn the problem into none.
First trigger the box-model with : box-sizing:border-box; http://www.w3.org/TR/css3-ui/#box-sizing0 / http://quirksmode.org/css/user-interface/boxsizing.html
Then turn the margin of body into padding in html.
If you choose : border-box it includes border and padding into the size set in CSS.
<div>
box-sizing and use
<code>height: 100%; width : 100%;</code>
without headhakes.
</div>
html, body, div {
-moz-box-sizing:border-box;
box-sizing:border-box;
height:100%;
width:100%;
border:solid;
margin:0;
}
html {
padding:40px;
border:solid red;
}
body {
border:solid blue;
}
div{
border:solid yellow;
background:pink;
}
http://codepen.io/gc-nomade/pen/Fjqzn
Fiddle: http://jsfiddle.net/sbDSy/2/
Why not apply padding to the div instead of margin to the body:
.contenuWorks {
height:100%;
width: 100% ;
padding:40px;
background:red;
position:absolute;
}
body {
margin:0;
padding:0;
}
Related
I have a problem, i would like to place a div after a div with a div child of absolute position.
What i will like to do is main div to fit with main-inner-one height and normal div to take place after main div
Here is my code: jsfiddle
#main {
width:100%;
background-color:#f00;
padding:20px 0px 20px 0px;
position:relative;
}
#main-inner-one {
width:100%;
height:200px;
background-color:#f9c;
position:absolute;
}
#normal {
width:100%;
height:50px;
background-color:#000;
}
<div id="main">
<div id="main-inner-one"></div>
</div>
<div id="normal"></div>
To make the #main-inner-one stretch across the #main you need to remove absolute positioning.
Preview - This is how it should've worked.
Answer: Change this
#main-inner-one {
position: relative;
padding:20px 0px 20px 0px;
}
#main {
padding:20px 0px 20px 0px; /* remove this */
}
if i understand correct you want to adjust the width and height based on the child's width and height. for me this worked by setting the parent div display to table-cell and width, height to auto. the child set display to block and the width, height to vw / vh or anything else except % values.
#main {
display:table-cell;
position:relative;
width:auto;
height:auto;
background-color:#f00;
padding:20px 0px 20px 0px;
}
#main-inner-one {
display:block;
position:relative;
width:100vw;
height:80vh;
background-color:#f9c;
}
#normal {
display:block;
position:relative;
width:100%;
height:50px;
background-color:#000;
}
I want the first picture to be aligned to the right bored of the black div, but I can't move the picture "Char" from where it is.
http://www.charlestonshop.it/homepageteo.html
<style type="text/css">
html, body {
width:100%;
height:100%;
margin:0;
}
div#container {
height:100%;
}
div#container div {
width:50%;
height:100%;
float:left;
background-repeat:no-repeat;
background-size:contain;
}
div#container div#left {
/* background-image:url('http://www.charlestonshop.it/charback9.jpg');*/
background-position: right;
background-color: black;
}
div#container div#right {
/* background-image:url('http://www.charlestonshop.it/charback10.jpg');*/
background-position: left;
background-color: white;
}
.charleft img{
max-width:100% !important;
height:auto;
display:block;
}
.charright img{
max-width:100% !important;
height:auto;
display:block;
float:right;
}
</style>
Add the below to your css, if you already have rules in place- add the additional styles as outline below:
#left{
position:relative; /* have a reference point for child positioning */
}
.charleft img{
position:absolute; /* position absolutely */
right:0; /* position on the right hand side of the parent, #left */
}
The benefit of this as opposed to using float, is you wont have to either clear the float, or accommodate for any changes it may later inflict on your layout.
You have to add float: right to .charleft div which contains the image
.charleft{
float: right;
}
it's very easy to do, just add this to your css code.
#left > .charleft{
float: right;
}
That's all.
im playing around with a loading bar in this fiddle, and i have this code
html
<div id="back"><span id="text">loading...</span></div>
css
#back {
width:100px;
background-color:#bbbbbb;
}
#text {
z-index:2;
height:30px;
position: absolute;
margin:auto;
}
div{
height:30px;
position: absolute;
}
yet the span does not have a margin, it looks like this
when i give it a normal margin value it works.
i have also tried margin: 0 auto; but also with no success. and when i try margin:10px auto; i get the 10px but not the auto.
Applying auto margin to an absolutely positioned inline element with unknown width introduces various problems.
I had success centering the text by setting line-height and text-align:center like so:
#text {
position: absolute;
z-index:2;
width:100%;
height:30px;
line-height:30px;
text-align:center;
}
http://jsfiddle.net/ruzED/
It's because the text is position absolute. Try this:
#back {
width:100px;
background-color:#bbbbbb;
text-align:center;
}
#text {
z-index:2;
height:30px;
line-height:30px;
position: relative;
}
JSFiddle: http://jsfiddle.net/h6BRn/13/
Basically, the current setup has space between the top of the page and the #header div. I want to remove that space. Tried searching, came up with adding
position:absolute;top:0;left:0;
to the #header div, it works (positions it at the top without space) but the rest of my divs loose all their structure. How to position it at the very top and preserve the current layout of the rest of the divs?
I am also using an image underneath the divs as a background. Using this code.
body
{
background-image:url('../imagez/bestone1400.jpg');
background-repeat:no-repeat;
background-position:top, center;background-size:100%; 2000px;
}
Thanks in advanced.
#container
{
width:100%;
}
#header
{
background-color:#FFA500;
height:400px;
}
#leftcolumn
{
background-color:#FFD700;
height:200px;
width:10%;
float:left;
}
#content
{
background-color:#EEEEEE;
height:200px;
width:80%;
float:left;
}
#rightcolumn
{
background-color:#FFD700;
height:200px;
width:10%;
float:right;
}
#footer
{
background-color:#FFA500;
clear:both;
text-align:center;
}
There is likely padding or margin on html or body. Try something like:
html, body {
padding: 0;
margin: 0;
}
There may also be padding or magins on divs or other elements, so a universal selector might work:
* {
padding: 0;
margin: 0;
}
But it is generally good practice to implement a css reset, like this one, which may be the best solution.
You should remove the Default browser padding, margin and border, use:
/*reset default browser settings */
html, body {
margin: 0px;
padding: 0px;
border: 0px;
}
I'm trying to get a fixed height header and a content area the fills the screen. The content div contains a telerik mvc grid. I've tried a few suggested on stackoverflow but the control that is the content area always seems to size incorrectly because it doesn't take into account the header fixed height, so it will scroll the extra 40px if the header is 40px. Any suggestions?
<div id="header">
</div>
<div id="content">
<telerik mvc grid control>
</div>
Css
html,body
{
margin:0;
padding:0;
height:100%;
}
#header {
position:absolute;
height: 40px;
left:0;
top:0;
width:100%;
background:green;
}
#content {
position: absolute;
top:40px;
left:0;
width:100%;
height:100%;
background:#eee;
}
UPDATE:
Had to manually re-size the grid on load and window re-size.
Add
.ClientEvents(events => events.OnLoad("resizeGrid"))
<script type="text/javascript">
window.onresize = function () {
resizeContentArea($("#Grid")[0]);
}
function resizeGrid(e) {
debugger;
resizeContentArea($("#Grid")[0]);
}
function resizeContentArea(element) {
var newHeight = parseInt($(element).outerHeight(), 10) - parseInt($(".t-grid-header", element).outerHeight(), 10) - parseInt($(".t-grid-pager", element).outerHeight(), 10);
$(".t-grid-content", element).css("height", newHeight + "px");
}
</script>
DEMO
HTML
<div id="wrapper">
<div id="header">HEADER</div>
<div id="content">CONTENT</div>
</div>
CSS
html, body {
height:100%;
margin:0;
padding:0;
}
#wrapper {
width:400px; /*set to desired width*/
height:100%;
margin:auto;
position:relative;
}
#header {
height:40px; /* set to desired height*/
}
#content {
position:absolute;
bottom:0;
top:40px; /*must match the height of #header*/
width:100%;
overflow:auto;
}
You could place the #header element inside of the #content element, the content element will take 100% height.
Here's an example, HTML:
<div id="content">
<div id="header">
Header.
</div>
Content Area.
</div>
CSS:
body,html {
height:100%;
margin:0;
padding:0;
}
#header {
background:#666;
height:30px;
}
#content {
height:100%;
background:#999;
width:100%;
}
Demo:
http://jsfiddle.net/Rz2tN/
With box-sizing you can do like
http://jsfiddle.net/Wener/Vat4C/1/
No matter the header is in wrapper or out of wrapper, it will work.
Only add :
#wrapper
{
box-sizing: border-box;
padding-top: 40px;
margin-top: -40px;
}
#header
{
/* add this if header out of wrapper */
position: relative;
z-index: 9;
}
#content
{
/* remove
position:absolute;
bottom:0px;
top: 40px;*/
/* add */
height: 100%;
}
This is more flexible, the content's position is no absolute, but it need the box-sizing property.
About the box-sizing, I defined less function as fallow:
.box-sizing(#type: content-box) {
-webkit-box-sizing: #type; /* <=iOS4, <= Android 2.3 */
-moz-box-sizing: #type; /* Firefox 1+ */
box-sizing: #type; /* Chrome, IE8+, Opera, Safari 5.1*/
}
.border-box()
{
.box-sizing(border-box);
}
Set the outer to be 100% height, inside make your fixed with header, and auto height for the content should suffice.
to fix the scrolling, take a look at the overflow porperty. visible will prevent scrolling.
Put a 25px top-margin on the content div and make sure the content div does not include the header.
If the content div must include the header, create a new div for your grid using the same properties stated above.
For Vertical Scroll we can use the following and for horizontal scroll just use a div
<div class="DataGridXScroll">
#(Html.Telerik().Grid(listCustomerStatus)
.Name("grvSalesAdjustment")
.DataKeys(keys => keys.Add(k => k.CustCode))
.Columns(column =>
{
})
.Selectable()
.Pageable(page => page.PageSize(100))
.Scrollable(scroll => scroll.Height(300))
)
</div>
add the following CSS
.DataGridXScroll
{
width: 1000px;
overflow-x: scroll;
text-align:left;
}
This is work in Firefox and other browser. For IE just use the following CSS
.t-grid
{
position: static;
overflow:hidden;
}
.t-grid-content
{
overflow-x: hidden;
position:static;
width:100%;
}
.t-grid-header-wrap
{
position:static;
}
.t-grid-content
{
overflow-x: hidden;
}
.t-grid-footer-wrap
{
position:static;
}
This is a very Simple solution and I think every one enjoy it.