I am adding divs dynamically as shown in http://jsfiddle.net/Lijo/ZkLg6/5/.
The parent #mainHolder div is not increasing its width when child elements are added – as a result the children breaks the parent div. How can we overcome this by adjusting the parent div height?
jQuery
$('input').click(function()
{
var existingDirectChildrenDivCount = $('#mainHolder > div').size();
if( existingDirectChildrenDivCount % 3 == 0)
{
$('#mainHolder').append ("<div class='firstDiv'> A </div>")
}
if( existingDirectChildrenDivCount % 3 == 1)
{
$('#mainHolder').append ("<div class='secondDiv'> B </div>")
}
if( existingDirectChildrenDivCount % 3 == 2)
{
$('#mainHolder').append ("<div class='thirdDiv'> C </div>")
}
}
);
HTML
<html>
<input type="submit" value="Add" />
<br/>
<div id="mainHolder">
S
</div>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.1.js"></script>
</html>
CSS
#mainHolder
{
width: 400px;
border-top: 3px solid orange;
border-bottom: 3px solid red;
border-left: 3px solid purple;
border-right: 3px solid pink;
height:auto;
}
.firstDiv
{
float: left;
display: inline;
background-color: #f5B5f5;
height:100px;
}
.secondDiv
{
float: left;
display: inline;
background-color: #FF007F;
height:100px;
}
.thirdDiv
{
float: left;
display: inline;
background-color: Pink;
height:100px;
}
Add overflow:auto
#mainHolder
{
width: 400px;
border-top: 3px solid orange;
border-bottom: 3px solid red;
border-left: 3px solid purple;
border-right: 3px solid pink;
height:auto; overflow:auto
}
Demo here http://jsfiddle.net/ZkLg6/11/
Try this: http://jsfiddle.net/ZkLg6/7/
The fix is to use a div that clears floated elements. I had to push your dynamic elements into a nested div inside mainHolder to ensure the clear div was always below them but it works well.
Try to add overflow: auto; to the CSS of #mainHolder.
The solution is to add a at the end of your #mainHolder and insert elements before that (or just keep removing and re-adding it every time you add a new div. This is because you're using floats, alternatively if you can drop the float from the other divs everything should work as expected. The overflow: auto; solution is also good and seems simpler.
Try something like this:
#mainHolder
{
min-width: 400px;
float:left;
border-top: 3px solid orange;
border-bottom: 3px solid red;
border-left: 3px solid purple;
border-right: 3px solid pink;
height:20px;
}
The only problem here is letter "S",but you may put it inside some div. Like those colored. Here is updated JS fiddle.
Hm. But that works if you want to increase WIDTH, not HEIGHT. If you want to increase height - just add overflow:hidden; Plus there are some more changes in your css. Take a look at JSfiddle
You have to clear the floating. You can do that inserting an element like br which has clear:both.
Here is a piece of code you can add in order to work:
$('#mainHolder').find("br").remove(); // remove already added br
$("<br>").css({clear : "both"}).appendTo($('#mainHolder')); // append a br after the last element.
I've updated your jsFiddle: http://jsfiddle.net/ZkLg6/13/
Check this http://jsfiddle.net/ZkLg6/19/
I used overflow:hidden
#mainHolder
{
width: 400px;
border-top: 3px solid orange;
border-bottom: 3px solid red;
border-left: 3px solid purple;
border-right: 3px solid pink;
height:auto; overflow:hidden;
}
Set both overflow and height to auto, and now the parent div's offsetHeight will update dynamically!
Related
I want on hover on parent, child's child's TEXT ONLY turn red too. Is it possible ?
<div id="row">o
<div id="col" class="col">o o
<div id="colChild" class="col-child">o o o Turn Me Red</div>
</div>
</div>
CSS
#row {
width: 300px;
height:100px;
border: 3px solid red;
}
#row:hover {
background-color:pink
}
#col{
padding:5px;
border: 2px solid blue;
}
#colChild {
padding:5px;
border: 2px solid black;
}
http://jsfiddle.net/NHbn8/235/
Out of Context information
In real these are rows of a table and they will also on select keep there hover state (but it's out of context for now)
Use this on hover parent #row:hover > .col > .col-child{background:red;}
http://jsfiddle.net/33mhdju6/
#row {
width: 300px;
height:100px;
border: 3px solid red;
}
#row:hover #colChild{
background-color:red
}
#row:hover {
background-color:pink
}
#col{
padding:5px;
border: 2px solid blue;
}
#colChild {
padding:5px;
border: 2px solid black;
}
Try this
#row:hover #colChild {
color:red;
}
demo
check this
#colChild:hover{
background-color:red
}
I am not sure this will work, but I think it would:
<div id="row">o
<div id="col" class="col">o o
<div id="colChild" class="col-child">o o o Turn Me Red</div>
</div>
</div>
Css:
#colChild:hover {
background-color:red;
}
DEMO
You can use css selectors property to apply the effects to any partiticular div. A list of the CSS selectors has been given in the link below..
http://www.w3schools.com/cssref/css_selectors.asp
I want to add a <div> container in place of a check box. But the <div> container takes up the entire line. I tried all sorts of "floats" but none worked.
here is my css code:
.checkbox{
border-bottom: 3px solid black;
border-top: 3px solid black;
border-right: 3px solid black;
border-left: 3px solid black;
width:15px;
height:15px;
}
With The inline div will not occupy the line
use this
.checkbox{
border-bottom: 3px solid black;
border-top: 3px solid black;
border-right: 3px solid black;
border-left: 3px solid black;
width:15px;
height:15px;
display:inline;
}
Style it with this: .inline {display: inline}
Use inline tag i.e.
inline { display : inline}
Inline is doing the trick, but you are really just avoiding the problem. You could have just set a width on the div and the label or whatever and floated them. By default block-level elements are 100% width. At some point, you are going to want to have some of the options that being display block allows - and inline doesn't. And you will probably also want to have some of the options that inline elements have, like vertical alignment. I suggest trying inline-block - I've been getting tons of use out of it. Give hit a spin: fiddle
HTML
<input type="checkbox" name="check-box-01" />
<div class="check-box-replacement"></div>
<label class="check-box-label" for="check-box-01">
Label for this checkbox
</label>
CSS
input[type="checkbox"] {
display: none;
}
.check-box-replacement {
width: 2em;
height: 10em; /* just to prove a point */
background-color: red;
}
.check-box-replacement, .check-box-label {
display: inline-block;
vertical-align: middle;
}
I need to draw a horizontal line after some block, and I have three ways to do it:
1) Define a class h_line and add css features to it, like
#css
.hline { width:100%; height:1px; background: #fff }
#html
<div class="block_1">Lorem</div> <div class="h_line"></div>
2) Use hr tag
#css
hr { width:100%; height:1px; background: #fff }
#html
<div class="block_1">Lorem</div> <hr />
3) use it like a after pseudoclass
#css
.hline:after { width:100%; height:1px; background: #fff; content:"" }
#html
<div class="block_1 h_line">Lorem</div>
Which way is the most practical?
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
<div>Hello</div>
<hr/>
<div>World</div>
Here is how html5boilerplate does it:
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
I'd go for semantic markup, use an <hr/>.
Unless it's just a border what you want, then you can use a combination of padding, border and margin, to get the desired bound.
.line {
width: 53px;
height: 0;
border: 1px solid #C4C4C4;
margin: 3px;
display:inline-block;
}
<html>
<body>
<div class="line"></div>
<div style="display:inline-block;">OR</div>
<div class="line"></div>
</body>
</html>
In HTML5, the <hr> tag defines a thematic break. In HTML 4.01, the
<hr> tag represents a horizontal rule.
http://www.w3schools.com/tags/tag_hr.asp
So after definition, I would prefer <hr>
If you really want a thematic break, by all means use the <hr> tag.
If you just want a design line, you could use something like the css class
.hline-bottom {
padding-bottom: 10px;
border-bottom: 2px solid #000; /* whichever color you prefer */
}
and use it like
<div class="block_1 hline-bottom">Cheese</div>
I wanted a long dash like line, so I used this.
.dash{
border: 1px solid red;
width: 120px;
height: 0px;
}
<div class="dash"></div>
My simple solution is to style hr with css to have zero top & bottom margins, zero border, 1 pixel height and contrasting background color.
This can be done by setting the style directly or by defining a class, for example, like:
.thin_hr {
margin-top:0;
margin-bottom:0;
border:0;
height:1px;
background-color:black;
}
it is depends on requirement , but many developers suggestions is to make your code as simple as possible .
so, go with simple "hr" tag
and CSS code for that.
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
<div>Hello</div>
<hr/>
<div>World</div>
emphasized text
This is relatively simple example and worked for me.
hr {
width: 70%;
margin-left: auto;
margin-right: auto;
}
Resource: https://www.w3docs.com/snippets/css/how-to-style-a-horizontal-line.html
When adding overflow to Google prettify elements, the line numbers disappear.
Unchanged CSS:
pre
{
font-size:11px;
background-color:white;
}
/* Alternate shading for lines */ li.L1,
li.L3,
li.L5,
li.L7,
li.L9 { background: #eee; width:200%;}
CSS & IMAGE BEFORE:
pre.prettyprint { padding: 2px; border: 1px solid #888;}
CSS & IMAGE AFTER:
pre.prettyprint { padding: 2px; border: 1px solid #888; overflow:auto;}
Apparently the numbers were in the padding of the pre.prettyprint element. If I increase the left padding to 30px with the overflow 'on', I can see the numbers. I'll have to comb over the CSS some more (it was inherited)
CSS change & the resulting output:
pre.prettyprint { padding-left:30px; border: 1px solid #888; overflow: auto;}
Is a simple exercice, probably some solution better than others, but I wonder which is the best to create this kind of structure in html and css:
What I want is the text, then create 2 pixel line, 1px red and other 1 px green.
Not sure what is the best solution for crossbrowser , want to lines end same time.
Already tried with border, hr , background .. but seems not perfectly finish.
ps-looking for a solution without recurring to a image
Simple answer is to use a simple tag (<i> for example) and apply CSS styles to it.
<p>Your text <span class="line"></span></p>
CSS might look like this:
.line {
position: relative;
display: inline-block;
* display: inline; /* fix for IE bugs */
* zoom: 1; /* fix for IE bugs */
height: 1px;
width: 100px;
background-color: #f00;
border-bottom: 1px solid #00f;
vertical-align: middle;
margin-bottom: 5px;
}
CSS:
#lines{
border-bottom: 1px solid red;
border-top: 1px solid green;
display: inline-block;
height: 5px;
margin-left: 10px;
width: 100px;
}
Markup:
<span id='text'>My text</span>
<span id='lines'></span>
Here is my 2 cents... similar to Rodolfo but no spacers
http://jsfiddle.net/c4HjQ/
Use the CSS :after along with content:
<div class="container">
<div class="linetext">Text</div>
</div>
.container {
padding: 15px;
border: 4px solid black;
}
.linetext:after {
content: "";
display:inline-block;
width: 50px;
height:1px;
border-top: 1px solid green;
border-bottom: 1px solid red;
margin-left: 6px;
}
Try it: http://jsfiddle.net/wBTqV/
Documentation
CSS :after pseudo-selector on MDN - https://developer.mozilla.org/en/CSS/:after
CSS content property on MDN - https://developer.mozilla.org/en/CSS/content
you probably have a 'spacer' image (1x1 transparent image), so you can just do a
<div style="float:left">Your text</div>
<div style="float:left">
<div style="background-color:green"><img src="spacer.gif" width="100px" height="1px"></div>
<div style="background-color:red"><img src="spacer.gif" width="100px" height="1px"></div>
</div>