How can I make an automatic horizontal scroll bar in my page if the content will overflow in its border.
<html>
<body>
<div style ="width: 20px; height:30px; border:1px solid black; overflow:auto">
<!-- various of text here that can makes it go out the border-->
</div>
</body>
</html>
What if the text in my content is too long, how can I make an automatic horizontal scrollbar?
change your code into this:
<html>
<body>
<div style ="width: 20px; height:30px; border:1px solid black; overflow-x:scroll">
<!-- various of text here that can makes it go out the border-->
</div>
</body>
</html>
Insert in the div style :
overflow-x:scroll;
overflow: auto;
white-space: nowrap;
http://jsfiddle.net/GCPDE/
Change your style to this:
style="width: 20px; height:30px; border:1px solid black; overflow:auto;"
Just a case of incorrect syntax.
NOTE: In order to make text horizontally scrollable you will have to add
overflow-x:scroll; overflow-y: hidden; white-space: nowrap; to your div.
<html>
<body>
<div style ="width:20px; height:30px; border:1px solid black; overflow-x:scroll; overflow-y:hidden; white-space:nowrap;">
<!-- various of text here that can makes it go out the border-->
</div>
</body>
</html>
Related
Please see see code http://jsbin.com/eveqe3/edit, also quoted below.
I need to show text inside the item divs in such a way the text appear only in the green box with specified width rest of the line need to be hidden. Any suggestions please...
<style>
#container{
width : 220px;
}
.item{
float:left;
border: 1px solid #0a0;
width: 100px;
height: 12px;
padding 2px;
margin: 0px 2px;
}
.clearfix{
clear: both;
}
</style>
</head>
<body>
<div id="container">
<div class="item"> A very loooooooooooooooooooooong text </div>
<div class="item"> Another looooooooooooooooooooong text </div>
<div class="clearfix"> </div>
</div>
</body>
</html>
Additionally to overflow:hidden, use
white-space:nowrap;
Just use:
overflow: hidden;
white-space: nowrap;
In your item's divs
Use the css property overflow . For example:
.item{
width : 100px;
overflow:hidden;
}
The overflow property can have one of many values like ( hidden , scroll , visible ) .. you can als control the overflow in one direction only using overflow-x or overflow-y.
I hope this helps.
I appear to have a peculiar problem.
I've got the following code snippet and as you can see i've just added the footer div at the end:
<body>
<div id="conainer">
<div id="wrapper">
<p>this is the wrapper</p>
<div id="centerDoc">
<p>this is the centerDoc</p>
</div> <!--centerDoc !-->
</div> <!-- wrapper !-->
</div> <!--container !-->
<div id="footer">
<p>footer</p>
</div>
</body>
I get the follwing output [I added borders to see whats going on]:
I hope you can see that the centerDoc div is inside the footer div and i don't understand why.
CSS for divs:
#container {
margin:auto;
width: 100%;
}
#wrapper{
width:80%;
border:1px dashed black;
}
#centerDoc {
margin-top:2.8%;
margin-left:10px;
float:left;
width: 100%;
border:1px dashed black;
}
#footer{
text-align:center;
color:#333333;
border:1px dashed black;
}
Any pointers to sort this out is appreciated!
That is normal behavior. Your #centerDoc division is floated left, so it's position is correct. However, because it's floated, it's removed from the flow of the document, so it's not included in the height of the wrapper division and the footer division fills in behind it, then the text moves down so that it's not behind other content.
#animuson is right. you may use "clear: both;" to fix it. see below
<pre>
#footer{
text-align: center;
color: #333333;
border: 1px dashed black;
clear: both;
}
</pre>
I have this code:
<html>
<head>
<style type="text/css">
.container {
border-bottom: 1px dotted #999999;
width:500px;
padding-left:200px
}
</style>
</head>
<body>
<div class="container">asdf</div>
</body>
</html>
And it works fine except for the fact that the bottom border is also applied to the 200px before the indent. I want the bottom border to start at 200px. Can this be done?
Use margin instead of padding or use an inner div.. (updated to match requirements disclosed in comments)
<html>
<head>
<style type="text/css">
.container {
width:500px;
padding-left:200px
}
.inner{
border-bottom: 1px dotted #999999;
}
</style>
</head>
<body>
<div class="container">
<div class="inner">
asdf</div>
</div>
</body>
This is what it should look like: http://jsfiddle.net/dKVTb/1/
If that's the case, use this:
<div class="container">
<div class="content">
content here
</div>
</div>
CSS code:
.container {
padding-left:200px;
}
.content {
width:500px;
border-bottom: 1px dotted #999999;
}
Maybe like this, with margin-left
http://jsfiddle.net/ppMmy/
The CSS padding properties define the
space between the element border and
the element content.
Thus not "padding" the whole <div>
Here is my code:
<style type="text/css">
div.page {
text-align:center;
border: 1px solid rgb(0,0,0);
width:20px;
height:20px;
}
span.page {
text-align:center;
border: 1px solid rgb(0,0,0);
width:20px;
height:20px;
}
</style>
<div class="page">1</div>
<div class="page">2</div>
<div class="page">3</div>
<span class="page">1</span>
<span class="page">2</span>
<span class="page">3</span>
Div's look fine but they places vertically. Is there any way to place them horizontally in one line?
Span's place in the one line, but the span can not have the width as any inline element.
If there is no way to use DIV's and SPAN's for my task I will use a table, but I am looking for the no-table solution.
xandy is correct, but this is better:
<div class='pageHolder'>
<div class='page'>1</div>
<div class='page'>2</div>
<div class='page'>3</div>
</div>
with CSS:
.page {
text-align:center;
border: 1px solid rgb(0,0,0);
width:20px;
height:20px;
float: left;
}
.pageHolder{
overflow: auto;
width: 100%;
}
Elements to clear floats is markup. It's like using <br> but for floats. Mixing markup and content is considered bad practice in semantic web.
Read this article for more information.
Use
display:inline-block
in the div's style
Lorenzo's answer is correct, but I would add something to the markup:
<div class='pageHolder'>
<div class='page'>1</div>
<div class='page'>2</div>
<div class='page'>3</div>
<div class='pageHolder-footer'></div>
</div>
in CSS, add:
div.pageHolder-footer{
clear: left;
height: 0;
}
So that the rest of your stuff will flow correctly.
==Alternative method (From Jan, and SitePoint) ==
No need to have the div.pageHolder-footer (but keep pageHolder). And then:
div.pageHolder { overflow: auto; } /* Jans' method */
/* or */
div.pageHolder { overflow: hidden; } /* From SitePoint */
They both may have drawbacks, but it depends on what you need.
use display:inline; and your div's will be in one line.
other solution : float:left;
Use this
div.page {
text-align:center;
border: 1px solid rgb(0,0,0);
width:20px;
height:20px;
float: left;
}
Use display: table-cell; It will solve your issue of div alignment in horizontal order.
<div class="content">
<div> Page1</div>
<div>Page 2</div>
<div>Page 3</div>
</div>
CSS
.content > div{
display: table-cell;
}
You can try out with the combination of ul/li with list-style ( css property ) as none.
some thing like
<ul> <li> <div ....</li> <li><div...></li></ul>
or
you can try within table / tds inside divs.
Is there an elegant way to align 3 elements left, center, and right on the same line?
Right now I'm using 3 <div>'s all with width:33%;float:left; and it's not working too well.
that works for me:
<html>
<head>
<style>
div.fl {
float: left;
width: 33%;
}
div.fr {
float: right;
width: 33%;
}
</style>
</head>
<body>
<div class="fl">
A
</div>
<div class="fl">
B
</div>
<div class="fr">
C
</div>
</body>
</html>
do you mean the same?
You may get strange results if there is any margin in the element you are adding it to. This is where width: 33% may not work because you will need to factor in the amount of margin that element has.
<html>
<head>
<title></title>
<style type="text/css">
div { float: left; width: 33%; margin: 4px; }
</style>
</head>
<body>
<div style="border: 1px solid #ff0000;">1</div>
<div style="border: 1px solid #00ff00;">2</div>
<div style="border: 1px solid #0000ff;">3</div>
</body>
</html>
This will cause it not work as expected because of the margin added to each div. Similarly, if you add too much of a border to each div you will get a similar result border: 5px solid !important;
As soon as you take away the margin from the above code, it should work as expected.
Try this:
<div style="float: left; width: 100px;">
left
</div>
<div style="float: right; width: 100px;">
right
</div>
<div style="width: 100px; margin: 0 auto;">
center
</div>
You need to take into account that the left and right divs do not push the container box (a div around the code above) height down, even if they have more content than the center div, the only one not floated. A clearfix will take care of this.
I created a page with all three methods for comparison at http://www.salestime.com/Ref/LeftCenterRight.html.
Float the first two left and float the third one right, while ensuring the widths will fit the line you are placing them on.
Use pixel widths if your design allows for it.
Float LeftBlock 'left', CenterBlock 'none' and RightBlock 'right'. But make sure the Center element appears last on your HTML page, otherwise it wont work.
Here is yet another varition of the theme:-
<html>
<head>
<style type="text/css">
div div {border:1px solid black}
div.Center {width:34%; float:left; text-align:center}
div.Left {float:left; width:33%; text-align:left}
div.Right {float:right; width:33%; text-align:right}
</style>
</head>
<body>
<div class="Left"><div>Left</div></div><div class="Center"><div>Center</div></div><div class="Right"><div>Right</div></div>
</body>
</html>
Note that the border is possible by using an inner div for each of the 'panel' divs. Also gives the center the remain 1% of pixels.
This works for me. I don't know if it's the most elegant, but it does do the work: it reacts well to the "cell" contents and resizing.
<html>
<head>
<style>
.a {
border: 1px dotted grey;
padding: 2px;
margin: 2px;
}
.l {
border: 1px solid red;
background-color: #fee;
float:left;
}
.c {
border: 1px solid green;
background-color: #efe;
text-align:center;
}
.r {
border: 1px solid blue;
background-color: #eef;
float:right;
}
</style>
</head>
<body>
<div class="a">
<div class="l">
</div>
<div class="r">
toto v.2 adfsdfasdfa sdfa dfas asdf
</div>
<div class="c">
item 1 | tiem 2 | asdf 3 | asdfad asd | aasdfadfadfads
</div>
</div>
</body>
</html>