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/
Related
html code,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
#primaryContent{
text-align: center;
}
</style>
</head>
<body id="twoColLayout">
<div id="primaryContent">
<img src="banner_1.png" /><img src="banner_2.jpg" /><img src="banner_3.png" />
</div>
</body>
</html>
and this is the result.
ok this works fine, but if make the browser smaller,
it goes like this,
how can i make a scrollbar, not placing down the image?
You need to use min-width property to achieve what you are looking for.
For Instance, let us assume that each of your image is 300px wide, so your #primaryContent that contains the images should be greater than 300px * 3 of the total width of all the three images.
#primaryContent{
min-width:950px;
}
This will create a horizonatal scroll bar once the browser is stretched to 950px or less.
PS: 950px is an arbitary value. Calculate its width according to your requirements.
READ MORE HERE
Hope this helps.
You have to set your body to a specific width.
So add width to your CSS:
<style>
body {
width: 1000px;
}
#primaryContent{
text-align: center;
}
</style>
Change 1200 to whatever size you need.
You need to set a min-width on your container that is enough for the content.
Here is the demonstration fiddle.
try this in your stylesheet...
#primaryContent { overflow:scroll; }
Set the primaryContent div to not allow content wrapping by setting white-space:pre
See my jsbin demo here
<style>
#primaryContent{
text-align: center;
white-space: pre;
}
</style>
Images are inline elements. They are wrapped like words if the parent element is not wide enough.
To disable the wrapping use:
#primaryContent {
white-space: nowrap;
}
See here how it works.
Sorry, I miss understood so ignore previous answer
If you want to make horizontal scroll bar you have to use below property in css
#primaryContent {
min-width:1000px; /*you can set whatever width you want to keep*/
}
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;
}
I know it's difficult to understand the problem from the title, so I will explain it in real example.
The server generates DIVs with contents and sends to the browser.
Each DIV has same class: eg. '.column'.
All DIVs have "almost" same height. One can be slightly taller or shorter than the other.
The goal is to force FLOAT:left all columns even if the first column above is taller than its siblings. See the below screenshot.
In the above image you can see that Col4 is NOT under Col1 because Col1's height is taller than its siblings'. Is there a way to force Col4 DIV be floated left under Col1 DIV?
I'm looking for a native CSS solution if possible. And I don't need simple solution like creating 3 columns and pushing DIVs into each one.
If it's really impossible, I would really appreciate if you could answer why Col6 is not "sticking" up to Col1?
The above can be obtained from:
.col{
float:left;
height:50px;
width:130px;
border-left: 1px solid;
border-bottom: 1px solid;
}
.col1{
height:60px
}
And HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="col col1">Col1</div>
<div class="col">Col2</div>
<div class="col">Col3</div>
<div class="col">Col4</div>
<div class="col">Col5</div>
<div class="col">Col6</div>
</body>
</html>
Here is the live example in jsbin.
I would really appreciate any help.
You should simply be able to clear the floats:
.col:nth-child(4) {
clear: left;
}
If you need to support older browsers, use this selector instead:
.col1 + .col + .col + .col {
clear: left;
}
If you need your 5th and 6th columns to be flush with the bottom borders of your 2nd and 3rd columns respectively, though, you can't achieve it with floats alone. You'll need to find another way around it, or use something like jQuery Masonry to lay out your page.
The only possible reason why your 6th column isn't sticking up to your 1st column is because it's wrapping to a new line, and according to the float model a box cannot be higher than the bottom of its preceding floated boxes.
you may simply try to remove "float:left;" from you "col" class on your css and replace it with "display:inline-block;" and it may work. Not sure if it works on all browsers. Have only tried this on chrome and mozilla.
.col{
/*float:left;*/
height:50px;
width:130px;
border-left: 1px solid;
border-bottom: 1px solid;
display:inline-block;
}
live example at http://jsbin.com/ajikoq/11/edit
I want to have a horizontal scrollbar if necessary, by having the 'child' divs be added side-by-size instead of getting pushed to the next row when the parent isn't wide enough.
My code is below. If you set .mid to have width: 1000px you'll see what I'm going for, only I only want it to be as wide as the dynamically generated children.
<html>
<head>
<style type="text/css">
.parent {
width: 400px;
background-color: #666;
overflow:scroll; /* cater to the older browsers */
overflow-y:hidden; /* Hide vertical*/
}
.mid {
background-color: red;
}
.child {
display:inline-block;
background-color: #ccc;
border: 1px solid black;
width: 190px;
}
</style>
</head>
<body>
<div class="parent">
<div class="mid">
<div class="child">
I am a child.
</div>
<div class="child">
I am a child.
</div>
<div class="child">
I am a child.
</div>
</div>
</div>
</body>
</html>
Heck, might as well answer this. You're going to need Javascript for this, but given that you already use that to dynamically generate the child elements, it shouldn't really be a problem.
Assuming you're using jQuery, add these two lines after you generate the element:
var child = $('child');
$('.mid').width(child.length * child.outerWidth(true));
Sorry about the miscommunication
Using this, however, will create another problem. When you use display: inline-block, a whitespace added behind each div, so jQuery cannot get the correct width. This wouldn't happen if you use float: left instead though.
People have been here before and found the best / easiest way to do this. Look here:
http://css-tricks.com/how-to-create-a-horizontally-scrolling-site/
You could try and use overflow:auto
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>