This question already has answers here:
Margin on child element moves parent element
(18 answers)
Closed 8 years ago.
In HTML 5 with doctype , I have inside body:
<div style="width:100%; background-color: #cccccc;">
<div style="margin-top:20px; width:100px; background-color: #aa0000;">Sub</div>
Main
</div>
http://jsfiddle.net/F3kXw/
When I render in firefox, I getting outer div have margin 20px from top of page,
what I need only sub div have margin 20px from the outer div. It works if I put character on top of sub div like:
<div style="width:100%; background-color: #cccccc;">
Main
<div style="margin-top:20px; width:100px; background-color: #aa0000;">Sub</div>
Main
</div>
e.g. http://jsfiddle.net/F3kXw/2/
It makes no sense to me, I never have had this problem in the past.
Try this code maybe can help
<div class="website_sub_frame" style="width:100%; background-color: #cccccc;overflow:hidden">
<div style="clear:both; margin-top:20px; width:100px; background-color: #aa0000;">Sub</div>
Main
</div>
Instead of using margin top why don't you add another div above your sub div and give it a height of say 20px.
eg:
div class="website_sub_frame" style="width:100%; background-color: #cccccc;"
div style="height:30px">Sub /div
Main
/div
Try to give margin-bottom instead margin-top to child div. That's it.
<div class="website_sub_frame" style="width:100%; background-color: #cccccc;">
<div style="width:100px; background-color: #aa0000; margin-bottom:20px;">Sub</div>
Main
</div>
Here is a working demo
OR you are looking for this?
<div class="website_sub_frame" style="width:100%; background-color: #cccccc;">
Main
<div style="width:100px; background-color: #aa0000; margin-top:20px;">Sub</div>
</div>
Here is a working demo
Hope it helps you!
Make the parent DIV float. Not exactly sure why that fixes it, but it works.
<div style="float:left; width:100%; background-color: #cccccc;">
<div style="margin-top:20px; width:100px; background-color: #aa0000;">Sub</div>
Main
</div>
Related
This question already has answers here:
How can I select the last element with a specific class, not last child inside of parent?
(8 answers)
Closed 8 years ago.
<div id="wrapper">
<div class="top-tab">
<div class="top-tab-box"></div>
<div class="top-tab-box"></div>
<div class="top-tab-box"></div>
<div class="clear"></div>
</div>
</div>
<style>
.top-tab-box
{
width: 200px;
height: 200px;
background: #000;
float: left;
margin: 10px;
}
.top-tab div.top-tab-box:last-child{
background: #e7e7e7;
}
</style>
I have this html code.if I removed
<div class="clear"></div>
then last-child worked
but with this clear div last-child property not working
When the clearing div is not present, the tab-box div is the last-child, but not otherwise. (At the moment, the clearing div is the last child, so your rule can't apply to the last tab-box.) Try giving your #wrapper overflow: hidden; instead of using the clearing div.
You could use nth-last-child(2) to select the second-last element of the div:
http://jsfiddle.net/JX58w/
#wrapper div div:nth-last-child(2){
background: red;
}
That's because <div class="clear"></div> is the actual :last-child
I suggest you to use ':last-of-type' instead of :last-child and don't use a <div> for the clearing.
Try this
<div id="wrapper">
<div class="top-tab">
<div class="top-tab-box"></div>
<div class="top-tab-box"></div>
<div class="top-tab-box"></div>
<!-- don't use a div for .clear-->
<span class="clear"></span>
</div>
and css
.top-tab div:last-of-type{
background: #e7e7e7;
}
Also remember to change the .clear selector in css to something like .clear {clear:both;display:block;} if you are going to use `'
**
Check this fiddle http://jsfiddle.net/4psdN/
**
For a visual, please visit this fiddle:
http://jsfiddle.net/rR8Hh/
The effect I am trying to achieve is that, in this example, the left side of the 5th div.child should be visible, just to the right of the 4th child div.
Instead, there is a line break and so none of this element can be seen. Using white-space: nowrap has no effect.
HTML:
<div id="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
</div>
CSS:
#parent{
height:90px;
width:400px;
overflow:hidden;
border:3px solid black;
white-space:nowrap;
}
.child{
float:left;
height:80px;
width:80px;
margin:5px;
border:1px solid red;
}
I know I've achieved my desired effect before, but I can't seem to figure out how I did it.
A slightly crude but working way of doing this is to wrap the child divs in another div with a large width. For example:
CSS:
.wrap{
width:9999px;
}
HTML:
<div id="parent">
<div class="wrap">
<div class="child">1</div>
<!-- etc -->
</div>
</div>
I only set the width to 9999 because I didn't know how many child elements you have. The width could be calculated and set when the server outputs the page or you could use a small piece of javascript (wrapper width = number of child elements * child outer width).
Here it is working: http://jsfiddle.net/rR8Hh/4/
I have got the following code working fine on FF. As you can guess, I want the following two divs stays on one line without breaking when browser resize.
<div style="float: left; margin-right: 10px; ">
</div>
<div style="overflow: hidden;">
</div>
But as per usual, when I tested the page with IE 9, the right div was already below the left one.
Can someone pls help me out here, thanks,
Either add "float:right" in your second div or
add "width:XXpx" into your first div.
Wrap it with another div
<div>
<div style="float: left; margin-right: 10px; ">
</div>
<div style="float:right; overflow: hidden;">
</div>
</div>
you also float the other div
<div style="float: left; margin-right: 10px; ">
</div>
<div style="float:right; overflow: hidden;">
</div>
==========================================================>>>
UPDATE
HTML
<div class="marginRight"></div>
<div></div>
CSS
div {
float:left;
border:1px solid red;
width:45%;
height:100px;
}
.marginRight {margin-right: 10px;}
WORKING DEMO
it is working fine
if you want more configuring
<div style="display:table-row;">
<div style="width:49%; margin-right:2%; height:100px; float:left; display:table-cell;"> any thing you wanted </div>
<div style="width:49%; height:100px; float:left; display:table-cell;"> any thing you wanted </div>
</div>
Use a container div and set the two divs to either % of total width or total px of the page.
#containerdiv {
width:100%;
overflow:hidden;
}
#leftdiv {
width:20%;
overflow:hidden;
float:left;
#rightdiv {
width:80%;
overflow:hidden;
float:left;
}
<div id="containerdiv">
<div id="leftdiv"> TEST </div>
<div id="rightdiv"> TEST </div>
</div>
Remember if you use margins and paddings you will need to adjust the percentages or pixels for it to line up next.
For example. If you add padding 1% to left div, it will push the right div down to second line since you are now at a total of 101% of the container divs width.
I have a div that I would like to have a border and background-color, but the container has collapsed because everything is floated.
This can be see at http://jsfiddle.net/5DNFs/
How do I get the <div class="due-total"> to have the border and background-color?
Clear your floats : My Fiddle
Note: Just changed border color so that you can see, you can change it to whatever you want
HTML
<div class="invoice-totals">
<div class="total">
<div class="label">TOTAL</div>
<div class="value">133.00</div>
</div>
<div class="paid-total">
<div class="label">Payments</div>
<div class="value">0.00</div>
<div style="clear: both;"></div>
</div>
<div class="due-total">
<div class="label">AMOUNT DUE</div>
<div class="value">133.00</div>
<div style="clear: both;"></div>
</div>
</div>
Here it is...
Just add display:inline-block to your div
http://jsfiddle.net/5DNFs/5/
You can add div as child of due-total, here is the example:
.invoice-totals .due-total > div {
border: 1px solid #DDD;
background-color: #CCC;
padding: 5px;
}
Alternative:
.invoice-totals .due-total {
float: left;
border: 1px solid #DDD;
background-color: #CCC;
padding: 5px;
}
http://jsfiddle.net/5DNFs/3/
http://jsfiddle.net/5DNFs/9/
Try adding overflow to each of the floated containers:
overflow: auto
This solves the collapsing issue. It looks to me like your styling is wrong too with the floats. Clearing floats will help too.
You need to force a new formatting context or use a non-floating element to clear the floats (AKA. clearfix) .
But it looks like you should be using a table for this data anyway.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
why is my content showing outside the div?
I have a problem where the background style for a div doesn't cover everything nested inside the div.
Here is a jsfiddle to show you exactly what I'm talking about
How can I make the grey background style from the div ddg-corner-statements apply to everything inside the div without setting an absolute height?
This is a common issue when working with floats. There are a couple of common solutions:
Add a div after the floats with clear: both. Example.
<div style="float: left"></div>
<div style="float: left"></div>
<div style="clear: both"></div>
Add the two floats into a container with the CSS attribute overflow: auto. Example.
<div style="overflow: auto">
<div style="float: left"></div>
<div style="float: left"></div>
</div>
Make the parent element a float. Example.
<div style="float: left">
<div style="float: left"></div>
<div style="float: left"></div>
</div>
Use the :after CSS pseudo element. Example.
.parentelement:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
Adding a set height to the parent element. Example.
<div style="height: 200px">
<div style="float: left"></div>
<div style="float: left"></div>
</div>
Personally, I use option 2 for simplicity and semantics' sake
See an updated version of your code here.
I guess you want to apply grey background color to everything : My Fiddle
Clear your floats like this :
<div style="clear: both;"></div>
<div id="view-all-statements">View All Statements →</div>
The grey background seem to be an image. Try repeating it vertically and see what happens.
This will solve yout problem:
> .ddg-corner-statements {
> padding: 10px 15px 1px;
> background: url("../images/bg_story_resources_bot.gif") repeat-x scroll left bottom transparent;
> display: inline-block; }
The background isn't being applied because your child elements are floated and taken out of the flow.
.ddg-corner-sidebar ul li a {
border-bottom: 1px solid #DDDDDD;
border-top: 1px solid #F8F8F8;
color: #333333;
display: block;
float: left;
padding: 5px 0 9px;
width: 100%;
}
If you remove float:left; the background will perform as expected.
If the float:left is required you will need to clear your floats.