Why the footer element exceeds the height of its parent wrapper when it should have been a fraction of the height of its parent wrapper.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Slicing</title>
<style type="text/css">
html,body{
margin:0px;
padding:0px;
width:100%;
height:100%;
}
div#wrapper{
margin:0px;
padding:0px;
width:100%;
height:100%;
line-height:normal;
border:#C00 thick groove;
background-color:#FF3;
}
div#wrapper div#header{
width:100%;
height:30%;
border:#F00 medium double;
}
div#wrapper div#body{
width:100%;
height:50%;
border:#F00 medium double;
}
div#wrapper div#footer{
width:100%;
height:20%;
border:#F00 medium double;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="hlogo">
</div>
<div id="hdesign">
</div>
<div id="hTestimonial">
</div>
</div>
<div id="body">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
Your borders are combining together to make it too high.
borders are not considered part of height. See the box model.
Each of your borders is around 3px, and it's on both the top and bottom, so that's 6px.
You have the same border on three relevant elements, so that's where the ~18px of "extra height" is coming from.
Your page: http://jsbin.com/epodu5
Exact same but with borders removed and different background-colors: http://jsbin.com/epodu5/2
If you only care about modern browsers (http://caniuse.com/#search=box-sizing), the easiest way to fix it is to use CSS3's box-sizing: border-box:
Like this: http://jsbin.com/epodu5/3
border-box
The width and height properties include the padding and border, but
not the margin.
Use overflow:hidden for parent
Related
In a nutshell, i want a right div float to extend vertically 100%
but it only works when i don't include <doctype> on my html
in today's standard, do i really have to add <doctype>?
This is the result in Internet Explorer:
this is just simple html
<html>
<head>
<style type="text/css">
html, body {
padding:0;
margin:0;
height:100%;
}
#wrap {
background:red;
height:100%;
overflow:hidden;
}
#left {
background:yellow;
float:left;
width:70%;
min-height:100%;
}
#right {
background:pink;
float:right;
width:30%;
min-height:100%;
}
</style>
<body>
<div id="wrap">
<div id="left"> Content </div>
<div id="right"> Side Content </div>
</div>
</body>
</html>
in today's standard, do i really have to add <doctype>?
You don't have to do anything, but the absence of the DOCTYPE is essentially asserting that you conform (in the loosest sense of the term) to an unknown/inconsistent "quirks" standard.
I imagine the solution is as simple as setting the height of the parent container to 100% or to a specific pixel height.
ensure that height is set on the HTML and BODY elements.
ensure that height is set on any parent containers.
Working example: http://jsfiddle.net/7xxFj/
<div id="one">
First column
</div>
<div id="two">
second column
</div>
HTML, BODY { height: 100%; }
#one { height: 100%; width: 30%; float: left; background-color: red; }
#two { height: 100%; width: 70%; float: left; background-color: blue; }
As #BoltClock pointed out in the comments, you probably want a layout that can extend beyond 100%. This requires a little more effort (but still works well within the standard).
This article shows several methods for accomplishing layouts with equal column heights. More methods here.
If you are thinking of considering IE (any version for that matter, lets not digress to this topic), then you are better of specifying the DOCTYPE. I have seen many pages which do not do this properly through IE into the famous Quirks mode.
Use this Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
padding:0;
margin:0;
height:100%;
}
#wrap {
background:red;
height:100%;
overflow:hidden;
}
#right {
background:blue;
float:left;
width:30%;
height:100%;
}
#left {
background:yellow;
float:left;
width:70%;
height:100%;
}
</style>
</head>
<body>
<div id="wrap">
<div id="left"> Content </div>
<div id="right"> Side Content </div>
</div>
</body>
</html>
i have this simple layout css which provide 3 rows layout
css code
<style type="text/css">
body {
width:750px;
margin:0 auto;
margin-top:30px;
}
/* ----- HEADER ----- */
#header {
width:750px;
height:150px;
background-color:#333333;
}
/* ----- MAIN CONTENT ----- */
#content {
width:750px;
background-color:#333333;
margin-top:10px;
min-height:500px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:500px; /* for IE5.x and IE6 */
}
/* ----- FOOTER ----- */
#footer {
width:750px;
height:100px;
background-color:#333333;
margin-top:10px;
}
</style>
and here is the html code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>example page</title>
</head>
<body>
<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</body>
</html>
what i need to do that every div created with in the header div must have float to left format
<div id="header"><div>welcome</div></div>
this for example this div have welcome must have float left format without passing any class or id
To answer your question directly, you can do:
#header div { float: left; }
But why? Can you not use span instead of div? If you don't need id or class tags, why any tags at all?
All you need is a "clearing" your div. When you float an element it's container wouldn't extend to fit the child element anymore. Read this great article about clearing.
I fixed your code with just adding an clearing div after welcome div in header.
<div id="header">
<div> Welcome dude!</div>
<div class="clear"></div>
</div>
CSS for clearing div
.clear{clear:both; height:0;}
Look at fiddle too
So I have a div sandwich: three divs on top of one another. The slices of bread are both fixed-height due to background images. The meat is a 1px tall vertical repeater image. I need a way to expand the meat when overflow content from the top breadslice hits the bottom of the bottom breadslice. I figured a wrapper would be necessary for the meat and the bottom bread, but I'm not sure how to implement it.
Here's what I have thus far.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
#top {
position:relative;
height:100px;
background-color:pink;
width:460px;
word-wrap:break-word;
}
#wrapper {
position:relative;
}
#expand {
min-height:100%;
height:auto;
background-color:#EEEFFF;
}
#bottom {
height:100px;
background-color:#EEEEEE;
}
div.clear{
position:absolute;
width:100%;
clear:both;
height:1px;
overflow:hidden;
border:solid orange;
}
</style>
<title></title>
</head>
<body>
<div id="top">
a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a
</div>
<div id="wrapper">
<div id="expand"></div>
<div id="bottom"></div>
<div class="clear"></div>
</div>
</body>
</html>
I need a way to make top's content hit against the "clear" in the bottom wrapper and move the wrapper down.
Is this the effect you're after?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
#top {
position:absolute;
height:100px;
background-color:pink;
width:460px;
top:0px;
}
#wrapper {
position:relative;
}
#expand {
position:absolute;
top:100px; /*height of top div*/
bottom:100px; /*height of bottom div*/
width:100%;
background-color:#cccFFF;
}
#bottom {
position:absolute;
bottom:0px;
height:100px;
width:560px;
background-color:#EEEEEE;
}
#text
{
position:relative;
}
</style>
<title></title>
</head>
<body>
<div id="wrapper">
<div id="expand"></div>
<div id="top"></div>
<div id="bottom"></div>
<div id="text">
a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a
</div>
</div>
</body>
</html>
I think when you’ve got content overflowing a fixed height element, then the overflowing content won’t affect the layout of other elements.
Could you move your content out of the top bread slice, and into the meat? That will make the expanding happen.
If the content needs to appear in front of the top bread slice background, then you could use position: relative and a negative bottom margin to achieve that:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
#breadtop,
#breadbottom {
height: 100px;
background-color: #977;
}
#breadtop {
overflow: visible;
}
#meat {
background-color: #fbd;
}
#content {
position: relative;
top: -100px;
margin-bottom: -100px;
}
</style>
<title></title>
</head>
<body>
<div id="breadtop"></div>
<div id="meat">
<div id="content">
a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>
a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>
a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a
</div>
</div>
<div id="breadbottom"></div>
</body>
</html>
I like this question because it’s quite tricky, and because it contains the phrase “expandable meat div”.
(If you want example code I can come up with it, but It'll take me longer to answer)
What you may want to do is place your 3 slices in a div, and put your "top" content in the new div instead of the top slice. This way your new div's height will be determined by the content.
For the 3 slices, absolute position all of them. Put the top and bottom slices at the top and bottom of your new div using top:0 and bottom:0, respectively. For the middle meat slice, don't give it a height, but instead make it's top and bottom declarations equal to the height of your top and bottom slices. This way, the top/bottom of the meat will always be held X pixels away from the top/bottom of your new div, where X is the top/bottom slice's height.
I allways follow this example: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
I am trying to create a web page using CSS (Table less) but my main content area is not extending with contents please check my html and css codes and give me a solutions, Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style/styles.css" type="text/css" />
<title>::Model::</title>
</head>
<body>
<div id="wrapper">
<div id="header">
header
</div>
<div id="main">
<div id="left">left</div>
<div id="right">right</div>
</div>
<div id="footer">
footer
</div>
</div>
</body>
</html>
Css code
body{
margin:0px;
padding:0px;
height:auto;
}
#wrapper{
margin:0px auto;
width:1000px;
}
#header{
height:50px;
border:#CCCCCC solid 1px;
margin:2px;
padding:5px;
}
#main{
height:auto;
border:#CCCCCC solid 1px;
margin:2px;
padding:5px;
}
#footer{
height:100px;
border:#CCCCCC solid 1px;
margin:2px;
padding:5px;
}
#left{
border:#CCCCCC solid 1px;
width:640px;
padding:4px;
float:left;
margin-right:2px;
}
#right{
float:right;
padding:4px;
border:#CCCCCC solid 1px;
width:320px;
}
Thanks again
Just apply overflow:auto; on #main to make it wrap its floating children.
Take a look on Floating image to the left changes container div's height
(You can remove its height rule)
You have floated elements in your document, which as the name suggests means they float above your 'main' div. Hence it isnt extending.
Easy to fix however, you just need to stick a 'clear' in.
your html should look like this, notice the extra div.
<div id="main">
<div id="left">left</div>
<div id="right">right</div>
<div class="clearme"></div>
</div>
And simply add the following to your css.
.clearme{clear:both}
More can be found on the clear property and its usage here: http://www.tutorialhero.com/tutorial-64-css_clear_property.php
I have a main container div in the center of my webpage. This is already in place and has various elements in it.
However, now I'm trying to place a large content div (Div #1) on the left that takes about 70% of the Main Container Div. What I'm having difficulty doing is getting the CSS right for having Div's #1, #2, #3, and #4 arranged like the following image:
What should I do in this case for CSS concerning Div #1 - #4? Should I float Div #1 left, and set it as a percentage/fixed width? And float divs #2 - 4 right?
Some guidance with this would be appreciated!
I'd say 2 wrappers div "left" and "right" floating left with correct sizes.
Put div 1 in left
Put div 2, 3 and 4 in right.
This should work, if not let me know
Here is a working example, that might help you:
<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Floating</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.content{
padding:10px;
margin-top:50px;
width:770px;
margin-left:auto;
margin-right:auto;
border:1px solid black;
}
.content h1{
text-align:center;
}
.content h2{
text-align:center;
}
.content .left{
width:600px;
float:left;
border:1px solid black;
}
.content .right{
width:150px;
float:right;
}
.content .right div{
margin-bottom:10px;
border:1px solid black;
}
.content .clear{
clear:both;
}
</style>
<body>
<div class="content">
<h1>Main Container Div</h1>
<div class="left">
<h2>Div #1</h2>
</div>
<div class="right">
<div><p>Div #2</p></div>
<div><p>Div #3</p></div>
<div><p>Div #4</p></div>
<div><p>Div #5</p></div>
</div>
<div class="clear"> </div>
</div>
</body>
</html>