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.
Related
I've got two divs and would like to align their baselines. However, one of the divs has more than one line of text and some embedded content, and while I'd like to align them to the top baselines, the browser seems to align to the bottom one.
I've built a JSFiddle here to illustrate, with the following HTML:
<div style='display:inline-block;'>NOTE:</div>
<div style='display:inline-block; width:200px;'>
Here's <div class='embedded'></div> an embedded div and more text
</div>
and CSS:
.embedded {
width:40px;
height:40px;
display:inline-block;
vertical-align:-15px;
border:1px solid black;
}
What I'd like is this:
What I get is this:
A pure-CSS solution would be nice, but I'm not against using JavaScript here either. Any help would be greatly appreciated!
You can do it quite simply with a wrapping div and a bit of flex box.
.wrapper {
display: flex;
align-items: baseline;
}
.note {
margin-right: 1ch;
}
.embedded {
width: 40px;
height: 40px;
display: inline-block;
vertical-align: -15px;
border: 1px solid black;
}
<div class="wrapper">
<div class="note" style='display:inline-block;'>NOTE:</div>
<div style='display:inline-block; width:200px;'>
Here's <div class='embedded'></div> an embedded div and more text
</div>
</div>
This will solve your issue:
`<div style="display: flex;">
<div style="padding-top: 13px;">NOTE: </div>
<div>
<p style="display:inline">
Here's
<span class='embedded'></span>
an embedded div
<br/>
and more text
</p>
</div>
</div>`
Link : JSFiddle
<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{
}
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>
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.
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.