Below is the code. When i am trying to add margin:50px to the inner box, the outer box is also shifting 50px from the top. I think only the inner box should shift 50px from the top. But it is giving a different result.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>calculating element dimensions</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
aside, article, section, header, footer, nav {
display: block;
}
div, p {
margin: 0;
padding:0;
}
html {
background: #ccc;
}
.outer {
width: 600px;
margin: 0 auto;
background: #9CF;
}
.box{
background: #B7D19C;
width: 400px;
padding: 50px;
border: 2px solid black;
}
p {
background: #EEA458;
height: 100%;
}
/*add styles here*/
</style>
</head>
<body>
<div class="outer">
<div class="box">
<p>Here we'll need to calculate the width of this interior div element. This may seem simple at first, but as we begin to add box model properties, and as the overall width of the parent element and the div conflict with one another, we'll need to understand how each of the properties combine to effect the overall width (and height) of page elements.</p>
</div>
</div>
</body>
</html>
Try overflow:hidden; property to the div outer
.outer{
overflow:hidden;
}
two simple solution:
1.
.outer{
padding:50px;
}
or
2.
.outer{
overflow:hidden;
}
Related
I’m trying to drift away from using tables and I'm now trying to create a simple div-based layout - header, content, footer divs with 100% width and no parent div. But I'm having a little problem with it. My content and footer divs overlap header div if I ever insert anything there. They appear right in the middle of the header div. If they are empty they appear normally. But the moment I insert header image in it the problem starts.
I tried to change float and display properties, but it gives me strange output. Can anyone help me position them vertically one after another?
Here is the HTML code:
<div id="topDiv"> topmenu</div>
<div id="headerDiv">
<div class="innerDiv"><img src=" photos/header.jpg" /></div>
</div><br /><br />
<div id="contentsDiv"> content</div>
<div id="footDiv"> footer </div>
And here are the css styles:
div#topDiv{
width:100%;
height:20px;
background-color:#800000;
text-align:center;
margin: 0px;
position:absolute;
}
div#headerDiv{
width:100%;
position:absolute;
background-color:#0FF;
text-align:center;
margin: 0px;
}
div#contentsDiv{
width:100%;
margin: 0px;
text-align:center;
background-color:#0CC;
position:absolute;
}
div#footDiv{
width:100%;
margin: 0px;
text-align:center;
background-color:#CF3;
position:absolute;
}
.innerDiv{
width:930px;
height:100px;
margin:auto;
background-color:#C30;
position:relevant;
}
You are using absolute and relative positioning a lot
and they are making your layout look Bad and elements are over lapping.
Also you don't need to define margin and every other properties many times
html, body{
width 100%;
height:100%;
margin:0px;
padding:0px;
}
div{
display:block;
margin:auto;
}
Horizontal Layout
CSS-Reset
Vertical Layout
Just remove all position:absolute from CSS rules and you are done.
Here is a solution for you. You don't need to specify width=100 Without defining a width, it is 100% by default. Simply specify the width you want for the body and every other container will be that width. float: left; will prevent containers from stacking vertically. They will actually stack horizontally.
Rather than using many Ids for Div, you can simplify the tags with HTML5 tags in such a way as below.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<style type="text/css">
body {
margin: 0 auto;
}
menu {
height: 20px;
background-color: #800000;
text-align: center;
margin: 0px;
}
header {
background-color: #0FF;
text-align: center;
margin: 0px;
}
article {
margin: 0px;
text-align: center;
background-color: #0CC;
}
footer {
margin: 0px;
text-align: center;
background-color: #CF3;
}
section {
height: 100px;
margin: auto;
background-color: #C30;
}
</style>
</head>
<body>
<menu>topmenu</menu>
<header>Header
<article>
<img src="http://www.psdgraphics.com/wp-content/uploads/2009/04/1-google-logo-tutorial.gif" />
</article>
</header>
<section>content</section>
<footer>footer </footer>
</body>
</html>
I've looked at 20 threads at least so far so sorry if this has been answered before but I couldn't find a solution that suits my particular css layout.
I want to set the height of 2 columns equal to each other in a way that the leftcolumn equals the contentcolumn. I've tried using multiple javascripts like this :
`
$(document).ready(function() {
// get the heights
l = $('#contentcolumn').height();
// get maximum heights of all columns
h = Math.max(l);
// apply it
$('#leftcolumn').height(h);
});
And:
document.getElementById("leftcolumn").style.maxHeight = document.getElementById("contentcolumn").style.height;
And:
$("#contentcolumn").height($("#leftcolumn").height())
The problem with the first code is that it drops the left div to some really long height which I don't even know. The second and third codes change nothing at all.
Can someone please help me I know there's probably a really simple solution to this problem but I just can't find and I just can't go to sleep until I do !
New webpage after clean up:
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="maincontainer">
<div id="topsection"></div>
<div id="leftcolumn"></div>
<div id="contentcolumn">
</div>
</font>
</body>
</html>
New CSS after clean up:
body,
html {
background: #cacaca url(img/bg.png) repeat-x;
}
#maincontainer {
width:1000px;
margin:0 auto;
background: url(img/bg5.png) repeat-x;
}
#topsection {
background: #ffffff url(img/bg4.png) repeat-y;
height: 10px;
}
#leftcolumn {
float:left;
height: 100%;
width: 145px;
background: url(img/bg2.png) repeat-y;
}
#contentcolumn {
margin-left: 145px; /*Set left margin to LeftColumnWidth*/
min-height: 800px;
height: auto;
background: #dbdbdb url(img/bg3.png) repeat-x;
padding:10px;
}
You can do this without javascript--in a cross-browser way, even. This takes advantage of absolutely-positioning elements within relatively-positioned elements. If you set your #maincontainer div to position: relative and your #leftcolumn div to position: absolute, you can then set both top and bottom on #leftcolumn, so it always assumes the height of its parent (#maincontainer), even though #maincontiner's height is being set by its children (#contentcolumn in this case). Use this jsfiddle demo and play with #contentcolumn's height to see how #leftcolumn responds.
HTML:
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
</head>
<body>
<div id="maincontainer">
<div id="topsection"></div>
<div id="leftcolumn"></div>
<div id="contentcolumn"></div>
</div>
</body>
</html>
CSS:
body,
html {
background: #cacaca;
}
#maincontainer {
position: relative;
width:500px;
margin:0 auto;
background: #000;
}
#topsection {
background: #ffffff;
height: 10px;
}
#leftcolumn {
position: absolute;
top: 10px; /* room for #topsection */
bottom: 0;
left: 0;
width: 145px;
background: red;
}
#contentcolumn {
margin-left: 145px; /*Set left margin to LeftColumnWidth*/
min-height: 500px;
height: auto;
background: #dbdbdb;
padding:10px;
}
I am designing a text field which I want to be appear vertically-middle of a div. I want the black color div to be show vertically center of the blue (id=srch) div.
HTML & CSS:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
* {
vertical-align:baseline;
font-weight: inherit;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border:0 none;
outline:0;
padding:0;
margin:0;
}
html {
height:100%;
}
#outerwrapper {
width: 90%;
height: 100%;
min-height: 100%;
height: auto !important;
border: solid thin #333;
}
body {
height: 100%;
width: 100%;
}
#header {
height: 80px;
width: 100%;
background-color:#999;
}
input {
border:solid thin #ab1;
}
#srch{
height:50px;
background-color:#00f;
}
#srch div{
margin: auto 0 auto 0;
width: 200px;
background-color: #000;
}
#contentWrapper {
width: 100%;
overflow: auto;
background-color:#0F0
}
</style>
</head>
<body>
<div id="outerwrapper">
<div id="header">Header
<div id="srch">
<div>
<input type="tel" name="aa"/>
</div>
</div>
</div>
<div id="contentWrapper">
Content Wrapper
</div>
</div>
</body>
</html>
My approach: I give the black div top and bottom margin auto but it is not working (also for the horizontal center [left and right margin:auto] it is working). Does margin:auto only work for left and right?
I want to know why this is happening, and I don't want any other solution like:
Display text inline with a vertical-align div.
Display with proper padding or margin.
margin: auto does not work for top and bottom. If margin-top: auto or margin-bottom: auto is specified, their used value is 0. Here's an article about how you can achieve vertical centering.
You need to use some jQuery here to calculate the height of parent container.
Demo - http://jsfiddle.net/tQBVy/
<div id="wr">
<div id="unknownWidthAndHeight">should be centered on both sides</div>
</div>
#wr {
display:table-cell;
width:400px;
height:100px;
border:1px solid red;
margin:50px;
vertical-align:middle;
}
#unknownWidthAndHeight{
display:table;
height:30px;
margin:auto;
border:1px solid blue;
}
Here is fiddle example:
http://jsfiddle.net/gdTGZ/2/
Need such support for IE7 without display:table etc. and without <table> usage.
1/ If you want to vertical center on IE7 try this technique using three divs :
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
Ps : You'll always need to set the container height.
2/ The element that you want to horizontal center must have a width and margin:0 auto; otherwise you can try text-align:center
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#wr {
display: block
width: 400px;
height:100px;
line-height: 100px; /* must be the same as height */
border: 1px solid red;
margin:50px;
}
#unknownWidthAndHeight{
vertical-align: middle;
text-align: center;
}
</style>
</head>
<body>
<div id="wr">
<div id="unknownWidthAndHeight">should be centered on both sides</div>
</div>
</body>
</html>
I have a container and 4 div’s inside it. My container is stretched to fill the entire window. In IE, if you re-size the window all the content re-sizes correctly, with all 4 margins around the container visible. I’m trying to get the same behavior in FF, yet I can’t seem to find the right CSS recipe.
Note, if you past the HTML and CSS code and examine the behavior in the IE, I’m trying to achieve the same behavior in FF.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>IE AutoResize</title>
<style type="text/css" media="screen">
html {
height:100%;
width:100%;
overflow: hidden;
margin-bottom:40px;
}
body {
height:100%;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
}
#container{
background-color:#808080;
height: 100%;
Valignment-adjust: central;
padding: 10px 10px 10px 10px;
}
#top {
background-color:#00FF80;
height: 10%;
}
#left {
background-color:#FF8000;
float:left;
width: 20%;
height:80%;
}
#right {
background-color:#3944C6;
width: 80%;
height:80%;
float:right;
}
#bottom {
clear:both;
background-color:#FF0000;
height: 10%;
}
</style>
</head>
<body>
<div id="container">
<div id="top">top</div>
<div id="left">left</div>
<div id="right">right</div>
<div id="bottom">bottom</div>
</div>
</body>
</html>
I am afraid this is another case of IE getting it wrong, and FF getting it right. You cannot have 100% height and then have an additional margins or padding top or bottom, you will need to find another way. If you could post your html or a link we may be able to guide further.