I have set up a jfiddle example, and it seems like my height:100%; is not working.
body, html
{
height:100%;
}
#full-wrap {
min-height:100%;
height: auto !important;
height:100%;
margin:0 0 -91px; /* 1 extra px from footer border */
clear:both;
border:thin solid red;
}
.contentCenter {
min-height:100%;
height:100%;
width:300px;
margin: 0 auto;
clear:both;
border:thin solid blue;
}
.footer {
height:90px;width:100%;
border-top:1px #E8E8E8 solid;
clear:both;
}
<div id='full-wrap'>
<div class='contentCenter'>
</div>
</div>
<div class='footer'>
</div>
Can someone help me with the problem? as you can see that the border line (blue) is not going 100%.
height: auto !important;
Remove that line and it works.
The height of your parent #full-wrap div is set to height:auto, you need to specify a height in order for your child div to expand 100%, so set it to 100% or a fixed height. Remember, percentage-based height is relative to its container.
Related
I want to make div side by side , I can achieve this but when I add som margin or padding they can disturb the lay out, I just want that two div display side by side with padding and margin property.
#center{
width:100%;
border:1px solid gray;
overflow:hidden;
display:inline-block;
}
#leftdiv{
height:200px;
width:50%;
background-color:gray;
float:left;
margin:2px;
}
#rightdiv{
height:200px;
width:50%;
background-color:yellow;
float:left;
margin:2px;
}
<div id="center">
<div id="leftdiv"></div>
<div id="rightdiv"></div>
</div>
To use padding on the <div>s you can set the box-sizing property to border-box so the padding is included in the width of the <div>. But the margin is more difficult to include in the width because it is on the outside of the box. So you have to calculate the margin on the width (see example on #leftdiv):
#center{
width:100%;
border:1px solid gray;
overflow:hidden;
display:inline-block;
}
#leftdiv{
height:200px;
width:calc(50% - 20px); /** 20px = sum of margin left and right */
background-color:gray;
float:left;
padding:10px;
margin-right:20px;
box-sizing:border-box;
}
#rightdiv{
height:200px;
width:50%;
background-color:yellow;
float:left;
padding:10px;
box-sizing:border-box;
}
<div id="center">
<div id="leftdiv"></div>
<div id="rightdiv"></div>
</div>
border-box: The width and height properties include the content, the padding and border, but not the margin.
content-box: This is the initial and default value as specified by the CSS standard. The width and height properties are measured including only the content, but not the padding, border or margin.
source: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing#Values
You can see the box model on the Chrome Developer Tools:
There you can see the margin surrounding the border. The width and height is calculated until the border and doesn't include the margin.
just add
#rightdiv,#leftdiv{
box-sizing:border-box;
}
You are going to have to change their display type from block
and css is:
#center{
width:100%;
border:1px solid gray;
overflow:hidden;
display:inline-block;
}
#leftdiv{
height:200px;
width:50%;
background-color:gray;
float:left;
margin:2px;
display: inline-block;
}
#rightdiv{
height:200px;
width:50%;
background-color:yellow;
float:left;
display: inline-block;
margin:2px;
}
This should allow them to respond and align side by side.
margin will apply (space) to the outside of the boxmodel.
padding will apply (space) to the inside of the boxmodel - use in conjuction with box-sizing: border-box; to negate additional padding affecting the inherit height and width of the element.
Where alignment is concerned, in this case, you have a few options to explore:
#center {
width: 100%;
border: 1px solid gray;
overflow: hidden;
}
.inline-div {
height: 200px;
width: 48%;
display: inline-block;
margin: 2px;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
.flex-wrapper {
display: flex;
justify-content: space-between;
}
.flex-wrapper .inline-div {
flex: 1;
}
#leftdiv {
background-color: gray;
}
#rightdiv {
background-color: yellow;
}
<h1>Inline</h1>
<div id="center">
<div id="leftdiv" class="inline-div"></div>
<div id="rightdiv" class="inline-div"></div>
</div>
<h1>Float</h1>
<div id="center">
<div id="leftdiv" class="inline-div float-left"></div>
<div id="rightdiv" class="inline-div float-right"></div>
</div>
<h1>Flex</h1>
<div id="center" class="flex-wrapper">
<div id="leftdiv" class="inline-div"></div>
<div id="rightdiv" class="inline-div"></div>
</div>
Let's first examine #center's css. You are set width to 100% and 1px for border(1px on the left and 1px on the right) which mean that actual width will be 100% + 2px, which might be not exactly what you want. To solve this you can use either box-sizing:border-box; or width:calc(100% - 2px). Also you might not need "overflow:hidden" and "display:inline-block"
Box-sizing is really useful property. You can read more here: https://www.w3schools.com/cssref/css3_pr_box-sizing.asp
#center { #center {
width:100%; width:calc(100% - 2px);
box-sizing:border-box; or border:1px solid gray;
border:1px solid gray; }
}
Then in order to have 2 children side by side you can use either flex layout or float layout as you did, but again you have assume that "width:50%" is actually without the margin so real width will be 50% + 4px (2px left + 2px right) margin. In order to solve this you can use again calc();
#leftdiv { #rightdiv {
height:200px; height:200px;
width:calc(50% - 4px); width:calc(50% - 4px);
background-color:gray; background-color:gray;
float:left; float:right;
margin:2px; margin:2px;
}
Also have in mind that because the children elements are floated, the parent element will have a height of 0. In order to make parent element to wrap its children you must either set some height of #center element (in your case 204px, 200px for children and 4px for its margin) or to use the following css which does the trick. The css will add empty block element right after both children(because it has propeerty "clear") and because it is block element, the parent will extend.
#center:after {
content:"";
display:block;
clear:both;
}
First of all you have to divide this within 100% width with margin as i have done!
#center{
width:100%;
border:1px solid gray;
overflow:hidden;
display:inline-block;
}
#leftdiv{
height:200px;
width:48.5%;
background-color:gray;
float:left;
margin:1%;
margin-right:0px;
}
#rightdiv{
height:200px;
width:48.5%;
background-color:yellow;
float:left;
margin:1%;
}
<div id="center">
<div id="leftdiv"></div>
<div id="rightdiv"></div>
</div>
My html is :
<div id="outer">
<header><h1>The Header</h1></header>
<div id="contenttab">
<table>
blablabla
</table>
</div>
</div>
My CSS :
#outer{
height:70%;
width:900px;
left:50%;
margin:0 auto;
position:absolute;
top:20px;
z-index:1001;
transform:translate(-50%, 0);
-webkit-transform:translate(-50%, 0);
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
header{
background-color:#f6f7f9;
padding:10px;
font-size:15px !important;
font-weight:bold !important;
text-align:center;
width:100%;
}
#contenttab{
height:100%;
overflow-y:auto;
}
why my contenttab exceeded the height of #outer div ? how to fix that? I have try adding border-box css to parent div but not solve my problem . . .
I just tried out your posted html/css and your #contenttab div is exceeding the height of it's container because of your css rule of height: 100% on the #contenttab;
It's a lot easier to see/debug the issue using borders on your elements, add the following:
#outer {
border: 1px solid #000;
}
#contenttab {
height: 100%;
overflow-y: auto;
border: 1px solid #ffa500;
}
You are telling the #contenttab to have 100% full height of it's container, however then you are also adding additional content(the header element) which causes the internal elements to have more than 100% height than it's container can hold.
Either change the height rule on the #contenttab to auto or less than 100%. Or add css rule overflow: hidden(or auto) to your #outer css rule.
Hello guys this has been bugging me for hours.
Im using the layout to get full height containers and sticky footers.
Unfortunately i only want a border in the content but it is not extending to the footer.
I can try to give the the wrap div the borders but i dont want the header to have borders.
The only thing i can think of is giving the header the border color of the background but i dont want to do this.
Is there another way you can do this?
http://jsfiddle.net/VNc33/14/
<body>
<div class="wrap">
<header>
<img src="http://placedog.com/400/50" />
</header>
<div class="content">i dont want the header tag to have a border
</div>
<footer>This is a footer.</footer>
</div>
</body>
Image
you can use an inset unblur box shadow on .wrap, so it should not bother much your layout :http://jsfiddle.net/VNc33/5/
.wrap {
margin:0 auto;
position:relative;
width:400px;
min-height:100%;
background:lightblue;
box-shadow:inset 0 0 0 1px;/* here fake an inside border of 1 pixel with text color if none declared */
}
header { background:lightblue;/* background hides inset box-shadow from parent */} http://jsfiddle.net/VNc33/8/ and you can remove borders from .content except the top one : http://jsfiddle.net/VNc33/9/ .
With another CSS approach to build your fullHeight template , you can have header and footer of variable height, using the display properties used by tags . (<footer> inside .wrap)
this method is avalaible in IE from version 8 , lower version wwill ignore the display:table/table-row/table-cell propertie and wil use the default display.http://jsfiddle.net/VNc33/11/
body, html {
height:100%;
margin:0;
padding:0;
}
header {
height:50px;
}
.wrap {
margin:0 auto;
width:400px;
display:table;
height:100%;
background:lightblue;
}
.content {
color:white;
border:1px solid black;
}
footer {
height:50px;
background:darkred;
color:white;
}
header img {
vertical-align:top;/* or bottom or display:block */
}
header, footer {
display:table-row;
}
.content {
display:table-cell;
height:100%;
border:solid 1px solid;/* just put the border here */
}
easy way to apply the border to .content and not mind about how much content is hold
fiddle
<body>
<div class="wrap">
<header>
<img src="http://placedog.com/400/50" />
</header>
<div class="content">i dont want the header tag to have a border</div>
<footer>This is a footer.</footer>
</div>
</body>
--
body, html {
height:100%;
margin:0;
padding:0;
}
.wrap {
margin:0 auto;
position:relative;
width:400px;
height:100%;
background:lightblue;
}
header {
height:8%; /* height can be anything but header + content + footer heights must be 100% or the page will scroll */
border:0;
}
.content {
height:84%;
color:white;
border:1px solid black;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
/* keeps height at 84% instead of 84% + 2px for border */
}
footer {
height:8%;
background:darkred;
color:white;
}
Change .wrap min-height to just height and add height:100% to .content
I'm creating a sidebar with this CSS code:
.sidebar {
position: absolute;
z-index: 100;
top: 0;
left: 0;
width: 30%;
height: 100%;
border-right: 1px solid #333;
}
But the sidebar width doesn't scale when I change the browser width. How can I make the sidebar fluid?
Thanks.
Look at the height in body in CSS part.
Here is a working example for you:
Your HTML:
<div id="content">
<p>This design uses a defined body height of 100% which allows setting the contained left and
right divs at 100% height.</p>
</div>
<div id="sidebar">
<p>This design uses a defined body height which of 100% allows setting the contained left and
right divs at 100% height.</p>
</div>
Your CSS:
body {
margin:0;
padding:0;
width:100%; /* this is the key! */
}
#sidebar {
position:absolute;
right:0;
top:0;
padding:0;
width:30%;
height:100%; /* works only if parent container is assigned a height value */
color:#333;
background:#eaeaea;
border:1px solid #333;
}
#content { margin-right: 200px; }
Its kind of an odd issue, but it seems its challenging to get the background color to stretch to the bottom of both columns, when using fluid layout.
I included the workaround along with a simple 2 column fluid layout.
Try this- jsFiddle
html, body {
margin:0;
padding:0;
background:silver;
/* workaround to get the columns to look even,
change color depending on which column is longer */
}
#sidebar {
position:absolute;
left:0px;
top:0px;
padding:0;
width:30%;
background:silver;
word-wrap:break-word;
}
#content {
position:absolute;
right:0px;
width:70%;
word-wrap:break-word;
background:gray;
}
I have the following issue with css and was wondering whether there is a way to solve it by setting an absolute height value. The code I have is as follows,
<style type="text/css" media="screen">
html { height:100%; }
body { background: black; height:100%; }
#menud {
position:absolute;
padding:1em;
height:300px;
background-color:#eaeaea;
width:184px;
}
#menue {
position:absolute;
margin-top:300px;
padding:1em;
height:900px;
width:184px;
background-color:red;
}
#data {
position:absolute;
margin-top:0px;
margin-left: 184px;
width:630px;
height:600px;
border-left:1px solid #dedede;
border-right:1px solid #dedede;
}
#ad {
position:absolute;
padding:1em;
margin-top:0px;
margin-left:814px;
width:186px;
background-color:red;
height:800px;
}
#content {
width:1000px;
background-color:white;
height:100%;
}
#info {
margin-top:0px;
width:1000px;
}
</style>
<html>
<body>
<div id='content'>
<div id='info'>
<div id='menua'>test</div>
<div id='menub'>test</div>
<div id='data'>test</div>
<div id='ad'>test</div>
</div>
</div>
</body>
</html>
I have set the height property to 100% but this does not cover the whole background white as one would expect it to. Any help on this would be appreciated.
Thanx.
Setting the height to 100% means 100% of the current viewport height. If your page is longer than the browser viewport, the div is too short. Use auto height to let the height get calculated correctly for you.
Set the height of content back to auto (remove height: 100%):
#content {
width:1000px;
background-color:white;
}
and remove the position: absolute from your ad (or replace with position: relative), so that the ad's height is respected when calculating the parent's (#content's) height:
#ad {
padding:1em;
margin-top:0px;
margin-left:814px;
width:186px;
background-color:red;
height:800px;
}
now your content is as long as you would expect.
100% height is relative to the container. To cover the whole background, you will have to use javascript. On page load you set the height to the window height.
You can use jQuery, to do this: in that case
$("#content").css('height', $(window).height());
You might have to remove paddings and margins from the body, like body { margin: 0; padding: 0; }, for the relative-positioned container div to cover the whole height.