I am having a problem keeping long data within a divs boundary.
Here is the demo for which I am facing the problem:
<html>
<head>
<style>
#main {
width: 500px;
margin:50px auto;
}
#data {
width:500px;
height:500px;
border: 1px solid #000000;
}
</style>
</head>
<body>
<div id="main">
<div id="data"> TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest
</div>
</div>
</body>
Here I make the div width 500px fix but still the data is extending the div boundary.
Is there any solution that when the data reaches to the max width the remaining data displayed in the next line?
You can use word-wrap:break-word; if you'd like the text to keep inside the div and appear on the next line.
jsFiddle here.
You can use:
word-wrap: break-word;
Word-wrap property specifies whether the current rendered line should
break if the content exceeds the boundary of the specified rendering
box for an element (this is similar in some ways to the ‘clip’ and
‘overflow’ properties in intent.) This property should only apply if
the element has a visual rendering, is an inline element with explicit
height/width, is absolutely positioned and/or is a block element.
This is a property introduced in CSS3 but it should work just fine for older browser.
Fiddle
#data
{
width:500px;
height:auto;
border: 1px solid #000000;
word-wrap:break-word;
overflow:auto;
}
Related
I have recreated a CSS compatibility issue I have come across between Chrome and Firefox.
An "inner" DIV with 100% height inside a Table cell which is inside a "container" DIV of fixed height. I want the inner DIV to fill the cell and dynamically add text to it such that a scrollbar appears when it begins to overflow.
In the JSFiddle you can see the code in both Chrome and Firefox. In Chrome it behaves as expected but in Firefox the scrollbar doesn't display and the inner DIV just keeps expending beyond the height of the container DIV.
JSFiddle code to try in both Chrome and Firefox
HTML as follows:
<style>
#container {
height:80px;
width:100%;
border:1px solid;
overflow:hidden;
resize:vertical;
}
#inner {
height:100%;
width:300px;
border:2px solid red;
overflow-y:auto;
}
table{
height:100%;
}
</style>
<div id="container">
<table>
<tr>
<td>
<div id="inner">
Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>
</div>
</td>
<td>
<img src="https://doc-snapshots.qt.io/qt-mobility/images/used-in-examples/video/qmlvideo/images/close.png" />
</td>
</tr>
</table>
</div>
EDIT, further requirement: I forgot to mention that I have this setup inside a resizable DIV i.e. the Container DIV is able to resize it's height so that the table and Inner DIV resize accordingly.
Thats a common mistake. Whenever an element is set to height: 100% or any other percentage, it relates to the height of its parent. So when using this, its important to define a height for the parent of your element:
To demonstrate the problem: Adding a class to the parent <td class="fix"> and add some css fixes the problem:
.fix {
height: 80px;
display: block;
}
WORKING JSFIDDLE DEMO
Keep in mind that setting the display attribute of a table cell from table-cell to block is something you should avoid, as you are changing the elements roots. Consider a solution without using a <table> markup if you have got the possibilities.
#inner {
border: 2px solid red;
height: 75px;
overflow: auto;
width: 300px;
}
You can use this CSS. I think it may work fine.
I have a CSS
.nav {
width: 200px;
line-height: 50px;
float: left;
}
.content {
margin: 0px 0px 0px 230px;
}
.container {
border: 1px solid red;
}
And here is the HTML
<body>
<div class="container">
<div class="nav">Some text
<br>more text
<br>even more text
</div>
<div class="content">
<h1>Home</h1>
<p>Text paragraph</p>
</div>
</div>
</body>
This gives me menu on the left and the content on the right. And a red box around the content on the right, but only the half menu on the left.
But I would like to have the red box also around the complete nav-div Can anyone help?
Thanks
Teddy
Add overflow:auto to your container div's CSS:
.container {
border: 1px solid red;
overflow:auto;
}
jsFiddle example
Floating the child div removes it from the flow of the document and the container essentially collapses as if it didn't exist. Adding the overflow restores the behavior you're after.
I think this is a quick fix if you float your container it should solve the problem your having. See here http://jsfiddle.net/1540sscj/
.container {
border: 1px solid red;
float:left;
width:100%;
}
Floating an element removes it from the normal flow of the page with one side effect being that its parent's dimensions won't expand to fit it.
So, what you need to do is clear the floated item. The best way to do this, without using additional markup or using the overflow property, which may cause other issues, depending on your layout, is to use the :after pseudo class on the parent element, like so:
.nav{
width:200px;
line-height:50px;
float:left;
}
.content{
margin:0px 0px 0px 230px;
}
.container{
border:1px solid red;
}
.container::after{
clear:both;
content:"";
display:block;
height:0;
width:0;
}
<body>
<div class="container">
<div class="nav">Xalsdk fjaskldfj alskdfj asädf<br>asdf<br>asdf</div>
<div class="content">
<h1>Home</h1>
<p>Bla bla.</p>
</div>
</div>
</body>
More information on clear
More information on pseudo elements
Best way imho would be to add a div like:
<div style="clear:both;"></div>
Under your floating elements: FIDDLE
This way you don't need to use oveflow:hidden on your container that may give you problems once you have more stuff in your project.
Also you shoudn't use a margin-left for your content as the previous element is already floating left. The best practise if you want to add some margin between nav and content would be to make your content float left as well and then use margin left (the exact size you want) with respect of the nav and not with the left of the window.
Finally, if you don't want to add the clear:both div to the html you could add somethign like
.content:after {
content:'';
display:block;
clear: both;
}
it's a bit less browser (old ones) compatible but cleaner
You have to add overflow:auto to .container in your css
Check my js fiddle
Also the css that modified.
.container {
border: 1px solid red;
overflow:auto;
}
Description of property overflow from MDN
The overflow property specifies whether to clip content, render
scrollbars or just display content when it overflows its block level
container.
Div with id "message-box" is going outside its parent div "message-container"
I dont understand why?
I used "overflow:auto;" in my css for "message-box". but still its not giving me the desired result. margin left is not working properly when i use "overflow:auto" on "message-box".
Below is my HTML file:
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css" >
<title>temp</title>
</head>
<body>
<div id="main">
<div id="header">header</div>
<div id="container">
<div id="user-container">user</div>
<div id="message-container">
<div id="message-box">message box</div>
<div id="text-box"> text box</div>
</div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>
Below is my CSS file:
#main{
border: 1px solid red;
margin: 5px;
}
#header{
border: 1px solid red;
height:30px;
margin: 10px;
}
#container{
margin:10px;
height:32em;
}
#footer{
border: 1px solid red;
height:30px;
margin: 10px;
}
#user-container{
border: 1px solid red;
float:left;
width:120px;
height:32em;
}
#message-container{
border: 1px solid red;
height:32em;
width:100%;
}
#message-box{
border: 1px solid grey;
overflow:auto;
margin:5px;
}
#text-box{
border:1px solid grey;
overflow:auto;
margin:5px;
}
please someone help me out here.
Quick answer
Your #message-box has correct margins all around in relation to the #message-container div, but the problem is that both #message-container and #message-box are overflowing into #user-container. Since #message-box has the overflow property, it is clipped at the exact edge where it overflows into #user-container. Since #message-container does not have overflow, it continues to flow behind the #user-container to the edge of the #container div. To fix this, add overflow to the #message-container.
#message-container {
height: 32em;
border: 1px solid red;
overflow: hidden;
}
I think what you want here is overflow: hidden to clip the overflowing content; overflow: auto adds scroll bars to see the overflowing content.
Explanation
The float on #user-container is causing the problem. Floats remove an element from the normal document 'flow' (see Normal Document Flow below).
I added background colors to #user-container(green) and #message-container(blue) so you can see what's happening. If you remove overflow from #text-box and #message-box, you'll see margins are actually working correctly between #message-box and #message-container. Add them back and you'll see how they get clipped by #user-container.
This is what's happening http://jsfiddle.net/fmceqbdp/2/
Normal Document Flow
The DOM has an element hierarchy. The document is the highest level parent (or outermost box), and any element you add is its child. The element's starting position is the upperleft of its parent. If you add another element at the same level (not nested), it is another child of the document and a sibling of the first element. The sibling also wants to be positioned as close as it can to the upperleft of the document, but it gets pushed right by the first element (inline) or to the next line (block). When you nest an element inside that element, the nested element is the child, it is contained inside the parent. It's starting position is the upperleft of its parent element. This is normal document flow. A floated element is removed from this normal flow, so it doesn't push other elements the way it normally would.
How Floats Behave
Divs are block elements, they push other elements away. However, when you float an element, it removes that element from the normal document flow -- that means its position is invisible to sibling elements (elements at the same level), so they're now positioned in front or behind the floated element as though the floated element doesn't exist. Because you floated #user-container, #message-container fills the entire #container as though #user-container is not there.
How Overflow Works
The element that has the overflow property will self-clear from overflowing into other elements. This is why #message-container flowed into the space occupied by #user-container but its children #message-box and #text-box with the overflow property had cleared themselves from flowing into the space #user-container. Their margins were still relative to their parent #message-container, not where they're clipped, which is why it appeared there was no left margin where they ran into #user-container.
For more details, see http://css-tricks.com/the-css-overflow-property/ -- scroll about 1/4 of the way down the page.
You need to add an overflow to #message-container because that's the div that's being pushed by the float not its children. #message-box and #text-box don't interact with their parents previous siblings.
So, remove all overflow: auto; and do this:
#message-container {
height: 32em;
border: 1px solid red;
overflow: hidden;
}
Here is a Fiddle:
http://jsfiddle.net/Ljqmjzkp/1/
PS: Cleaned the code so it's easier to read, also I indented it according to your DOM so you can see the structure. Keep that in mind, it helps ^^
Lets say take this as an example:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link type="text/css" rel="stylesheet" href="s.css">
</head>
<body>
<div id="container">
<p>qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq</p>
</div>
</body>
</html>
css:
* {
margin:0px;
padding:0px;
}
#container {
margin:10px;
width:400px;
border: 2px solid red;
}
And it displays like so:
What do I do to place this kind of texts always within the parent div?
You could use word-wrap:break-word.
#container {
margin: 10px;
width: 400px;
border: 2px solid red;
word-wrap: break-word;
}
jsFiddle example
Alternatively, you could also use overflow:hidden, which will hide the overflow. This is assuming you don't want the text to wrap. jsFiddle example
Lastly, there is overflow:scroll which will allow you to scroll through the overflow. Note - there will always be a scrollbar regardless of the length of the text. To avoid this you could also use overflow:auto. I don't know what you want. jsFiddle example of overflow:scroll
You have a text string which would not normally exist in the real world where the total width the character/letter images exceeds the set width of parent element.
In the unlikely event of this happening you would use word-wrap: break-word;
JSFiddle with normal text.
Warning: Probably, your desired behavior is JoshC's answer, but my answer keeps text inside the parent too (in another way).
Use overflow different than visible (i.e auto, scroll or hidden).
On most cases, I recommend auto:
#container {
margin:10px;
width:400px;
border: 2px solid red;
overflow: auto;
}
Demo
This is unlikely that you will have a single word or string such long length without any spaces. Please reconsider the length of your actual content. Using overflow:hidden you will only hide the extra text outside of the container, i assume thats what you wouldn't want. If you really need a single word which is this much (or even more) long then you need to use word-wrap:break-word or word-break:break-word. Still you can read the following posts for further reference.
how to use automatic css hyphens with word-break: break-all?
How to break long words in a table td?
http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/
For me, one of the most useful features of tables is that their width adjust to its content.
You can very easily do things like:
<table align=center style="border: 1px solid black">
<tr><td style="padding: 20px">
some text here
</table>
If the content of that box is wider, the box will be wider. Very intuitive and it works on ALL browsers, period.
You can achive something similar for normal block elements by using the float CSS property, i.e. their width adjust to its content. But the element will not be centered.
So, the question: How can you center a block element and make that element to adjust its width to its content in a cross-browser manner?
The modern way is to specify display:table and the workaround for IE is having a parent element and text-align:center on a inline/inline-block:
<div id="for-ie">
<div id="el">whatup son</div>
</div>
<style>
#el {
display:table;
margin:0 auto;
}
/* for IE, throw this in a CC */
#for-ie { text-align:center; }
#el {
zoom:1;
display:inline;
}
</style>
Demo
Here's a quick tutorial I wrote on this subject: http://work.arounds.org/centering-block-level-element-variable-width/
I'll lengthen it when I'm not sleepy.
Quoting CSS: The Definitive Guide by Eric Meyer
If both margins are set to auto, as shown in the code below, then they are set to equal lengths, thus centering the element within its parent:
p {width: 100px; margin-left: auto; margin-right: auto;}
Setting both margins to equal lengths is the correct way to center elements, as opposed to using text-align. (text-align applies only to the inline content of a block-level element, so setting an element to have a text-align of center shouldn't center it.)
In practice, only browsers released after February 1999 correctly handle auto margin centering, and not all of them get it completely right. Those that do not handle auto margins correctly behave in inconsistent ways, but the safest bet is to assume that outdated browsers will reset both margins to zero.
However,
One of the more pernicious bugs in IE/Win up through IE6 is that it actually does treat text-align: center as if it were the element, and centers elements as well as text. This does not happen in standards mode in IE6 and later, but it persists in IE5.x and earlier.
If your intend is to display just some text at the middle of the page, you can use something like this:
<div style="text-align:center;">
<div style="background:red;display:inline;">
Hello World!
</div>
</div>
The first block will align contents to the middle. The second will fill the height equal to its contents, since display:inline will force the <div/> block to behavior like a <span/>, ie. adjust its width to content, and not to the remaining space.
Note this is limited to single line text only (like "some text here").
Use this CSS
#content {
position: absolute;
width: 150px;
margin-left: -75px;
left: 50%;
border: 1px solid #000;
text-align: center;
padding: 20px;
}
and this html
<div id="content">
some text here
</div>
Good golly, miss Molly! These answers are really overcomplicated.
CSS:
div.centered {
width:100%;
margin:0 auto;
text-align:center;
}
div.centered span {
padding:20px;
border:1px solid #000;
}
And then use this in your body:
<div class="centered"><span>Hello world!</span></div>