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.
Related
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div2">3</div>
.div1 {
border: 1px solid red;
float: left;
width: 20px;
}
.div2 {
border: 1px solid green;
width: 100%;
}
Please look at my code at JS Fiddle
I'm wanting to get div 1 to stretch the height of both divs 2 and 3, like you would do with table's rowspan.
I'm not proficient enough with understanding how to do table stuff in divs to figure this one out.
Thanks!
You can use the table/table-cell display css options.
UPDATED Fixed stretching issue.
<div style="display:table">
<div style="display:table-cell;height:100%;" class="div1">
1
</div>
<div style="display:table-cell;width:100%">
<div class="div2">2</div>
<div class="div2">3</div>
</div>
</div>
Link to JSFiddle: https://jsfiddle.net/pho5p7cc/8/
Here's what I would do. Create a div around all of your current div, then use css positioning to edit the lengths within the div.
Here's an example,
http://jsfiddle.net/tjgerot/v2469Leu/
<div class="table">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div2">3</div>
</div>
I would use a container to hold your DIV 2,3. Then margin the left of the container to allow space for your DIV 1.
Im not sure it's the smoothest way to code, but it works.
https://jsfiddle.net/pho5p7cc/3/
html
<div class="div1">1</div>
<div class="container">
<div class="div2">2</div>
div class="div2">3</div>
</div>
css
.div1 {
border: 1px solid red;
float: left;
width: 20px;
}
.div2 {
border: 1px solid green;
width: 50px;
margin-left:20px;
}
.container{
}
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.
I have two divs with two images:
<div id="div1">
<div id="div2">
<img src="img1" />
</div>
<img src="img2" />
</div>
Second one is some smaller than first. How can I put second image on first image without using
#div2{
position: absolute;
}
I need to get similar result but without using position absolute property;
The main issue is that there are a lot of other elements, in parent div, not only div2.
Negative margins
You can do lots with negative margins. I've created an example with just two images without any divs.
img {
display: block;
}
.small {
margin: -202px 0 0 0;
border: 1px solid #fff;
}
.small.top {
position: relative;
margin: 0 0 -202px 0;
}
<img src="http://www.lorempixel.com/300/300">
<img class="small" src="http://www.lorempixel.com/200/200">
And some text
<img class="small top" src="http://www.lorempixel.com/200/200">
<img src="http://www.lorempixel.com/300/300">
And some more text
My question to you is why must you do this WITHOUT
#div2 {
position: absolute;
}
If the problem you are encountering is because it's absolute to the page and not the div then make sure #div1 has the following:
#div1 {
position:relative;
}
Its not a good approach to use negative margins. Especially when email templating, gmail reject negative margin and positions. So another way is
<div class='wrapDiv' style='width: 255px;'>
<div class='divToComeUp' style='
float: left;
margin-top: 149px; width:100%;'>This text comes above the .innerDiv
according to the amount of margin-top that you give</div>
<div class='innerDiv' style='width:100%; height:600px'>
Inner div Content
</div>
</div>
You could nest div2 inside div1:
<div id="div1">
<img src="\img1.png" />
<div id="div2">
<img src="\img1.png" />
</div>
</div>
Is it possible to make a nested structure of divs
<div>Content1
<div>Content2
<div>Content3</div>
</div>
</div>
to look like divs with fixed width that float left?
<style>
div {
float: left;
width: 200px;
}
</style>
<div>Content1</div>
<div>Content2</div>
<div>Content3</div>
I guess you can't do it with CSS. It's a language for defining the style of elements, not for modifying their structure. You could think about jQuery or XSLT for your case.
you can use margin-top property to get this effect
<div style="width:100px;height:100px;border:1px solid black">
<div style="width:100px;height:100px;border:1px solid green;margin-top:100px">
</div?
</div?
Actually you don't need to do anything really, this is the default behavior for block level elements.
Try to create a blank html page and insert the lines
<div>Content1
<div>Content2
<div>Content3</div>
</div>
</div>
Without any form of styling the output will be:
Content1
Content2
Content3
Which is what you are asking for
I guess I figured how to do that with a bit of additional html and absolute positioning:
<div id="parent">
<div class="nest">
<div class="content">One</div>
<div class="nest">
<div class="content">Two</div>
<div class="nest">
<div class="content">Three</div>
</div>
</div>
</div>
</div>
//css:
#parent {
position: relative;
}
div.nest {
position:absolute;
width: 200px;
top: 0;
left: 200px; /*should be same as width */
/* the next is the tricky part */
margin: 0px;
padding: 0px;
border: 0px;
}
/* apply custom border, padding and margin here */
div.content {
border: 1px solid #ccc;
padding: 8px;
margin: 4px;
}
Color me noobish, but couldn't you achieve something similar with an unordered list, since you're looking to nest elements? (http://jsfiddle.net/xDJAY/) Not sure if this is the structure you're looking for though.
I want to create a simple box with a header bar containing a title and some tool buttons. I have the following markup:
<div style="float:left">
<div style="background-color:blue; padding: 1px; height: 20px;">
<div style="float: left; background-color:green;">title</div>
<div style="float: right; background-color:yellow;">toolbar</div>
</div>
<div style="clear: both; width: 200px; background-color: red;">content</div>
</div>
This renders fine in Firefox and Chrome:
http://www.boplicity.nl/images/firefox.jpg
However IE7 totally messes up and puts the right floated element to the right of the page:
http://www.boplicity.nl/images/ie7.jpg
Can this be fixed?
Specify width in outermost div.
If that width in your content div means this is the total width of your box, simply add it to the outermost div, and (optionally) remove it from content, like this:
<div style="float:left; width: 200px;">
<div style="background-color:blue; padding: 1px; height: 20px;">
<div style="float: left; background-color:green;">title</div>
<div style="float: right; background-color:yellow;">toolbar</div>
</div>
<div style="clear: both; background-color: red;">content</div>
</div>
This is just a quick answer, so I hold my hands up if it doesn't quite work. I think Marko's solution will probably work if you just add min-width rather than width. If you are trying to cater for ie6 as well, you may need to use a hack, as min width is not supported by ie6 and it's descendants.
So this should work with IE7 and other modern browers. Set the min-width to whatever is appropriate.
<div style="float:left; min-width: 200px;">
<div style="background-color:blue; padding: 1px; height: 20px;">
<div style="float: left; background-color:green;">title</div>
<div style="float: right; background-color:yellow;">toolbar</div>
</div>
<div style="clear: both; background-color: red;">content</div>
</div>
I fixed it using jQuery to emulate the behaviour of the non-IE browsers:
// IE fix for div widths - size header to width of content
if (!$.support.cssFloat) {
$("div:has(.boxheader) > table").each(function () {
$(this).parent().width($(this).width());
});
}
Try putting position:relative; to parent-element and to the child-element. It solved the problem for me.
Got to know recently that the right floated elements need to be appended with the divs before the other elements. This is the easiest fix without adding a line of change.
<div style="background-color:blue; padding: 1px; height: 20px;">
<div style="float: right; background-color:green;">title</div>
<div style="float: left; background-color:yellow;">toolbar</div>
</div>
Make this <div style="background-color:blue; padding: 1px; height: 20px;> the parent of the 2 floating divs also clear:all