The following image shows how I would like a set of nested elements to appear.
However, the elements are actually appearing like this...
I've tried setting various overflow and white-space options but can't achieve what I'm hoping for. My best guess is that the float is causing the blue-outlined element to have no width and consequently there's no reason to break the text.
How can I fix this?
If the person's surname is long without any spaces then the blue bordered element cannot fit in the same level as of the left element.
To make the blue bordered element fit in the same level as the left element you have to give some width to it along with word-break property.
<div style="width:25%;background:#ccc;float:left;word-break:break-word">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
<div style="width:74%;background:#ccc;float:left;margin-left:1%;word-break:break-word">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
Related
I have to apply the same style for a set of paragraph. The top border have to be look the same like this.like this
I don't want to make it for me, I just need some advice where to start!
Thank you!
It looks like there are 2 out-of-the-ordinary things you need to do for this:
Have "partial" left and right borders.
Add a diamond (or is it a circle?) to the center of the top border.
To achieve number 1, you can add a ::before and ::after pseudo element to the container. If you make them shorter than the main element, fill it with white, you can position it so that it overlaps the main element's left and right borders, causing a partial overlap and the partial-border effect.
For number 2, you can add a separate element and position it over the center of the top of the main element's top border.
Does this make sense?
If you don't want to / cannot use images but may add additional code to your paragraphs, this should work for you:
http://jsfiddle.net/Moonbird_IT/3rafe27z/2/
This draws the additional time line with the dot above your paragraph:
<div class="head-info">
<span class="year-left">2000</span>
<span class="year-right">2005</span>
<div class="yellow-dot"></div>
</div>
The rest is just CSS positioning the years to the left and right and the dot showing up in the middle. You may have to add an additional <br> tag to clear the floated years.
Using CSS only, I'm trying to force a right-floated element NOT to clear its left-aligned sibling text without giving the parent container a width. The parent is block level, but floated. Basically, the container needs to always be the smallest width possible to fit the text node and the <div> on one line, and they need to actually render on one line.
For example, the right floated div here will always jump down to the line below the text node:
#demo {float:left;border:solid 1px blue;}
#demo div {float:right;border:solid 1px green;}
<div id="demo">
Text Node!
<div>right-floated</div>
</div>
The big constraint is that I can't change the HTML at all--I can't add a <span> tag around the text node, and I can't switch the order so that the text node comes second. Switching the order would solve the problem.
The other thing is that I don't want to specify a width for the containing element because the content width will vary wildly. This may not be possible using just CSS, but I just wanted to see if anyone has a brilliant trick.
I'm trying to get an div with its display property set to inline (or inline-block if I want a margin) to behave correctly in IE (it does in most others).
My situation is this - imagine a workspace in which an item container contains inline items laid out in a horizontal fashion. These items can hold things like text, or images, but also be composite types, say for example a 'fraction', whose numerator and denominator are themselves item containers, containing more horizontal items.
So for example, I might have the HTML:
<div class='item-container'>
<div id='statictext' class='item'>x = </div>
<div id='fraction' class='item'>
<div id='numerator' class='item-container'>...</div>
<hr/>
<div id='denominator' class='item-container'>...</div>
</div>
</div>
Clearly, I don't want fixed width or height for an item or item-container, because they can contain nested content which will increase the amount of space needed (e.g. imagine an fraction inside another fraction), and similarly if I want the width of a static text 'item' to be just big enough to contain the text on one line, i.e. inline.
The problem I think is that it's hard to avoid putting block elements inside my inline 'item'/'item-container' elements, for example the <hr> in the fraction, or if I want say a menu bar at the top of an 'item' that uses the whole width after the width of the rest of the item's contents has been calculated.
I know it's invalid syntax to put an actual block item inside an inline one, although setting the block element's display attribute to inline or inline-block makes things behave correctly in Firefox/Chrome at least. But alas, not in IE.
Is there an adequate fix?
EDIT: I actually used inline-block (with the appropriate IE hack) for 'item' and 'item-container' to get it to work spiffingly in Firefox et al, but IE still treats them as inline, which then subsequently gets converted into block because one of its children is a block.
Don’t use <hr>. You can draw a line using text-decoration: underline or using a bottom border or using an image (say, a one-pixel image stretched to the desired width). Then you can work with inline elements.
I know about margin auto. However, it does not work for me here.
I'm trying to center a (possibly long) line of text over a (relatively narrow) image. If the text is longer than the image, it should spill out of the resulting box on either end, so the whole complex is only as wide as the image.
The markup is something like this:
<div class="bb">
<a href="blahblah">
<b>CaptionAbove</b>
<img src="blah.png"/>
</a>
<b>below</b>
</div>
.bb is an inline-block so these bb's pop together horizontally in a row. CaptionAbove may be longer than the img is wide, but should not make the neighbors spread out! elements a and b are display:block, so everything inside here stacks up vertically.
If I give the <b> a specified width like 1em so it doesn't grow to surround the text, then the overflow of the text is on the right only, and the artificial box is flush left within the enclosing <a> block.
I like the markup grouping the img and the caption together, and a table would not only lose that but the mouse-over effects knowing that the vertical stack is all one item.
Any suggestions welcome.
How's about something like this?
http://jsfiddle.net/UvbQJ/1/
We overlap two Divs using "postion:absolute" and z-index.
http://jsfiddle.net/z5GXV/
The text in the green zone (div id="Zone2") is hide by text in the yellow zone (div id="Zone3"). Any help on how to display the text?
Edit1: We can't use nested divs.
I'm not sure what all the absolute positioning is good for, but you might want to put the yellow zone into the green-zone div, and use a float.
Solution with a float within the green zone
Solution with padding
Simplest way I can possibly think to do this:
Uses one nested div inside the Zone2 to wrap your text and make it appear as if it's wrapped to Zone3.
This is similar to using a <p> or <span> with display: block;.
jsFiddle example.