My centered header bottom margin is overflowing the parent container, causing a gap between yellow and orange wrappers:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.header-wrap{
background-color:yellow;
}
.content-wrap{
background-color:orange;
}
.header{
margin:0 auto 1em auto;
background-color: red;
width:40em;
}
</style>
</head>
<body>
<div class="header-wrap">
<div class="header">header</div>
</div>
<div class="content-wrap">
<div class="content">content</div>
</div>
</body>
</html>
If I use a simple clearfix for parent .header-wrap{overflow:hidden;} the problem is fixed, but I don't understand why I need to use a clearfix here, since I'm not using floating elements at all.
From what I know, the clearfix is applied on the parent to clear any floated children inside, which is not the case here.
Can anyone explain why is this happening?
.header{
margin:0 auto 1em auto; //margin 1em at bottom
background-color: red;
width:40em;
}
change it to
.header{
margin:0 auto;
background-color: red;
width:40em;
}
DEMO
Add float:left or inline-block to your header. Currently in your structure you mentioned the margin-bottom to header div which is inside the header-wrap class. header is the child element. To display yellow background, you must need to wrap the child element.
DEMO
CSS
.header-wrap {
background-color: #FFFF00;
display: inline-block;
}
Related
I've found out that setting display property of containing block to table and enclosing descendant block boxes in boxes with display property set to table-cell and vertical-align property set to top has same effect as if float property of those boxes was set to left.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>simulating float</title>
<style type="text/css">
#container {
background-color: darkgrey;
margin: 10px;
padding: 10px;
height: 240px;
display: table;
}
.box {
margin: 5px;
width: 240px;
height: 240px;
background-color: grey;
}
.float {
display: table-cell;
vertical-align: top;
}
</style>
</head>
<body>
<div id="container">
<div class="float">
<div class="box"></div>
</div>
<div class="float">
<div class="box"></div>
</div>
<div class="float">
<div class="box"></div>
</div>
</div>
</body>
</html>
Can someone give me an explanation of this? Thanks.
The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it.
Also, display:table-cell makes the element behave like the HTML tag.
The vertical-align:top propriety makes the element aligned to the top of the entire line or align the top padding edge of the cell with the top of the row. So the
.float {
display: table-cell;
vertical-align: top;
}
looks like if it had float:left only.
I hope this will help you understand CSS better.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
#content {
margin-top: 100px;
margin-bottom: 100px;
}
.left { float: left; }
.middle { margin-left:511px; float: none; }
.right { float: right; width: 115px; }
#footer {
margin-top: 300px;
margin-bottom:11px;
padding: 15px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>css test</title>
</head>
<body>
<div class="top">I have a dream</div>
<div id="content">
<div class="left">I am left</div>
<div class="middle">I am middle</div>
<div class="right">I am right</div>
</div>
<div id="footer"> I am in the footer</div>
</body>
</html>
Above is my html source code.
It displayed in the browser like below.
My question is why "I am right" is below of "I am middle". I think they should have the same height. How can I improve my css style. Thanks.
Here is the your corrected Fiddle link. Following is your corrected CSS
.middle { margin-left:511px; float: left; }
#footer {
margin-top: 300px;
margin-bottom:11px;
padding:15px 15px 15px 0;
}
Add float: left; to your .middle class instead of float:none;
div is a block element and i.e. its takes the full width, for making it to work as you mentioned add float:left; to the middle class.
Output -
Try using display: inline-block to your class="left, middle, right".
Problems With float
The problem when you have float in your CSS code is that you need to take some precaution to make the surrounding element to encompass the floated elements, and also to avoid following elements in the code to sneak up next to it.
Another problem is that if you have a floated list that will take up several rows (visually speaking) and the content is of varying height, you are in for a world of hurt.
To learn more about inline-block refer Robert's Page.
JSFiddle for reference.
I've a page with a main scrollable div like this:
<html>
<head>
<style type="text/css">
#mydiv{
overflow: auto;
width: 300px;
}
</style>
</head>
<body>
<div id="mydiv">content</div>
</body>
</html>
How can I have a fixed margin (for example 30px) at the bottom of the page?
The div can have a small or big height (depending on the screen size), but the margin should be fixed.
Thanks in advice
You can create another div either inside your existing or outside depending on how you want your page to layout. Then apply this style to the div #myftr { margin: 30px; }
Something like this.
http://jsfiddle.net/rhoenig/XxuvE/
you can simply define the margin-bottom in your css like this :-
#mydiv{
overflow: auto;
width: 300px;
border:1px solid red;
margin-bottom:30px;
}
or see the demo :-http://jsfiddle.net/XxuvE/4/
I want the background image of one of my divs to overflow into the body section. I've tried overflow:visible without any luck.
Check the pic:
See how the gold bits get cut off on the edge of the div? Suggestions please?
Here's my set up:
in the HTML:
<body>
<div id="container">
in the CSS:
body{
background-color: #0e0a04;
}
#container{
max-width: 960px;
margin: 0px auto;
padding: 0px;
margin-top:60px;
background-color: #0e0a04;
background-image: url(/bundles/tabredirector/images/background-image.png);
background-repeat:no-repeat;
background-position: -70px -20px; /*x,y*/
overflow:visible;
}
Thanks!
WHAT I ENDED UP IMPLEMENTING:
Thanks for all of your suggestions, they inspired my solution. My final solution was to use a master div (position:relative with z-index:-1) and my container (position:absolute z-index:1) and stick an image in the master div that can be positioned absolutely. This way the content always sits on top and the background isn't clipped.
first post your markup and css. Also give the div a width:100%.
You need to make sure there is a div outside your containing div. You can have a container above and below it which will hold all your other content.
Then you need to have a 100% width div with the full bg image centered.
Then within that div add another div for your content which can be 960 wide with an auto left and right margin to center it to the page.
Paste your HTML in your post as well the css is not enough as you need to add to your html!
Thanks
Background images on an element only appear within that element.
If you want your <div>’s background image to appear outside the boundaries of the <div>, you need to assign the background image to another element instead, e.g. the <body> element.
Heres a quick example:
<!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">
.container {
padding: 0px;
width: 960px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#fullWidthImage {
background-color: #0F9;
height: 200px;
width: 100%;
}
#centeredContent {
padding: 0px;
width: 960px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
height: 200px;
background-color: #09C;
}
</style>
</head>
<body>
<div class="container">
<p> </p>
<p>top site content </p>
<p> </p>
</div><!--container-->
<div id="fullWidthImage">
<div id="centeredContent">
content bla bla
</div>
</div><!--fullwidthImage-->
<div class="container">
<p> </p>
<p> </p>
<p>bottom of site content </p>
</div>
<!--container-->
</body>
</html>
I'm having a problem with setting the height of <div> tags using CSS.
I'm using the following CSS & 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 charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<title></title>
</head>
<style>
body, p, b, ul, li, div
{
padding:0;
margin:0;
border:0;
font-family:Arial, Helvetica, sans-serif;
}
div
{
display:block;
}
#ph_container
{
margin:0 auto;
width:980px;
height:auto;
border: 1px solid #00CC33;
clear:both;
background: #F0F0F0;
}
#cp_search
{
height:100px;
clear:both;
margin:10px 0px 0px 0px;
border: 1px solid #0099FF;
}
#cp_search_ex
{
clear:both;
background:none;
margin-top:5px;
margin-left:27px;
}
#cp_search_tx
{
width:210px;
float:left; /*try here whitout float and see the difference that I want to get*/
margin:0px;
background:none;
}
.txtx
{
color: #000000;
text-decoration:none;
font-size:13px;
font-weight:bold;
}
</style>
<body>
<div id="ph_container" class="space">
<div id="cp_search">
<div id="cp_search_ex" class="space">
<div id="cp_search_tx" class="txtx" >SEARCH</div>
</div>
</div>
</div>
</body>
</html>
My problem is that the parent div id="cp_search_ex" doesn't get the height of the div id="cp_search_tx" which is inside it, it has the height: 0px.
I want the div id="cp_search_ex" to take the height from the div id="cp_search_tx"?
I wrote a comment in the CSS code please follow.
I believe you are describing the problem solved by using a "clearfix".
try adding this to the style for the parent divs (so they wholly-contain their floated children):
overflow:hidden;
pretty complex post - it would help if you could pare it down to a specific example that exhibits the problem you're having.
You have at least one error in your CSS. You've set the height twice...
#ph_container{
margin:0 auto;
width:980px;
height:auto; /* duplicated height */
border: 1px solid #00CC33;
clear:both;
background: #F0F0F0;
height:100%; /* duplicated height */
}
So if you want the parent to take the height of its content, then you need to remove height:100% as that is telling the parent to be 100% of whatever is just outside the parent... in your case, that's 100% of the body's height.
And cp_search_tx cannot expand the size of its container since it's a float:. By definition, floats are outside of the normal content flow and therefore their container elements will appear to be empty.
Add an empty clearing div under the content which forces the container div to dynamically expand.
<div id="cp_search_ex" class="space">
<div id="cp_search_tx" class="txtx" >SEARCH</div>
<div style="clear:both;"></div>
</div>
Alternatively, simply adding overflow:hidden to the container will also force it to expand to encompass any floats.
Use a clearfix method. I usually use
.clearfix:after {
clear: both;
content: ' ';
display: block;
font-size: 0;
line-height: 0;
visibility: hidden;
width: 0;
height: 0;
}
* html .clearfix,
*:first-child+html .clearfix {
zoom: 1;
}
Apply the class clearfix to ph_container and see if that fixes it.
The question does not really make much sense, the outer block takes 100px + margin, so it works.
The text element has float defined so it doesn't take space.