I want to make contenteditable div works like as it works on Chrome in firefox and chrome as if i dont hit Enter and keep pressing keys then content becomes overflow from div's width in Firefox(26 ver) and IE9 but in Chrome it automatically adjust in div's width here is my code
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
div {
width:20%;
height:100px;
border:1px solid;
}
</style>
</head>
<body>
<div contenteditable="true"></div>
</body>
</html>
and i have created bin here
You need to apply word-wrap property in css so it will work as expected.
CSS:
div {
width:20%;
height:100px;
border:1px solid;
word-wrap: break-word; /*Added property*/
}
DEMO
I have a setup requiring a div filling 100% of the screen with a margin of 10px. Inside that, there is a navigation pane at the top followed by a content div below with a padding and an inner content dive with a padding. However, using the 100% height of parent and then adding a margin/padding stretches the div to 100% + margin + padding. Is there a fix for this? I noticed the absolute positioning trick, but that messes up the flow of the other divs if I absolutely position my content div. It also makes the resizing and flow non-liquid. Any way to keep those things and still achieve my goal, preferrably with CSS and not javascript?
Code Below:
ASPX
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<link rel="Stylesheet" href="test.css" />
</head>
<body>
<div id="wrapper">
<div id="navigation">
</div>
<div id="content">
<div id="inner">
</div>
</div>
</div>
</body>
</html>
CSS
html, body
{
height:100%;
width:100%;
margin:0px;
padding:0px;
background-color:Black;
}
#wrapper
{
height:100%;
margin:10px;
background-color:Blue;
}
#navigation
{
height:100px;
background-color:Green;
}
#content
{
height:100%;
padding:10px;
background-color:Orange;
}
#inner
{
height:100%;
width:100%;
padding:5px;
background-color:Lime;
}
You can try adding box-sizing:border-box onto any elements which you want to have 100% height and padding at the same time.
Works in IE8+ and the good browsers, so browser support is actually quite good
http://css-tricks.com/box-sizing/
You can try two things...
1) changing the height of the wrapper, navigation, content and inner to something like 98%.
2) try adding a transparent 1px solid border to the wrapper and other elements. This often shifts the margin to margin relationship of elements.
Hope this helps
Here's a sample code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Sample Textarea</title>
<style type="text/css">
* {width:100%; height:100%; margin:0; border:0; padding:0; background:#D3D3D3;}
textarea {overflow:auto; box-sizing:border-box; -moz-box-sizing:border-box; padding:6px;}
</style>
</head>
<body>
<form action="#">
<textarea rows="1" cols="1">This is some text.</textarea>
</form>
</body>
</html>
I used the box-sizing property to set the textarea width to 100% plus some padding and it works in all major browsers. However, in Firefox if you add more content to the textarea, you'll see unwanted padding around the scrollbar.
Firefox applies the padding not only to the content but to the scrollbar as well.
Change your textarea style definition so that it reads like this:
textarea
{
overflow:auto;
box-sizing:border-box;
-moz-box-sizing:border-box;
line-height:26px;
padding: 0;
padding-left: 6px;
}
This corrects the padding issue, but once there are two or more lines of text it will look somewhat awkward.
I'm trying to have an element with a greater width then the body, but not cause horizontal scrolling.
http://jsfiddle.net/hYRGT/
This hopefully demonstrates my problem somewhat.
The #header contains the #imghead and is set to 960px width.
What I want is the browser to 'think' the page is 960px wide.
Because #imghead is more wide then #header and positioned relative so it's in the center.
I'm not able to use a background-image because #imghead is going to be replaced by a flash component.
I'm also not able to use overflow:hidden because I DO want the element to show outside the 960px. I just don't want it to cause h-scrolling.
I do not want to disable h-scrolling altogether, I'd really love a CSS solution. But if javascript is the only way of dealing with this, I guess it would do.
Can't you just absolutely position it relative to the body, 50% from the left and then on the inner element do a negative left margin of half the total width of the element itself which would center it?
I think I got what I wanted:
http://jsfiddle.net/hYRGT/3/
Just in case jsfiddle would be down:
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<title>WEBSITE title</title>
</head>
<body>
<div id="header">
<div id="imghead"><img src="/img.jpg" alt=""/></div>
</div>
<div id="wrapper" class="index">
<div id="container">SOME CONTENT</div>
</div>
</body>
CSS:
/*RESET*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dd,dl,dt,li,ol,ul,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;font-family:inherit;font-weight:inherit;font-style:inherit;text-align:left;vertical-align:baseline}
table{border-collapse:collapse;border-spacing:0}
a img,:link img,:visited img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0}
img{display:block}
a{color:inherit}
/*STYLES*/
html, body{
height:100%}
body{
background:#000;
text-align:center;
overflow:auto;
overflow-x:hidden;
overflow-y:auto}
#wrapper{
z-index:12;
position:relative;
height:auto!important;
min-height:100%;
width:100%;
background:#0f0;
overflow:auto;
overflow-x:auto;
overflow-y:visible}
#container{
width:960px;
margin:0 auto;
overflow:auto;
background:#00f}
#header{
z-index:50;
position:relative;
overflow:visible;
width:960px;
margin:0 auto;
height:0px;
background:#f00}
#imghead{
width:1100px;
position:relative;
left:-70px;
background:#ff0}
The content overlaps the header by design,
I hope this helps someone.
1 limitation is that the header does not horizontally scroll,
but in my design that is not necessary.
Tested in FF3, IE8, S4 and C5
Specifically, I am referring to a situation where you need to have a total width of say 100% on a DIV, but a 10 pixel padding and 1 pixel border. (And don't rely on the browser automatically setting it to that width — say it's floated left for instance.)
Is there any simple way to accomplish this without using JavaScript?
No, there's no way to set this on one element that works with the currently major browsers.
You could use 2 nested divs. Set the 100% width on the outher div, and set the padding and border on the inner div.
If you use box-sizing: border-box you can set width: 100%; border: 1px solid black; padding: 10px; and the total of the width, border, margin, and padding will be what is specified for the width. Source
EDIT: True, browser support is a bit limited. FF 3.5 and Safari 4 support it, not sure about IE8 or Chrome.
What about the following solution?
<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Content with Menu</title>
<style type="text/css">
.content .outer{
width:100%;
border:1px solid black;
background-color:green;
}
.content .inner{
margin-left:10px;
margin-right:10px;
background-color:red;
}
</style>
</head>
<body>
<div class="content">
<div class="outer">
<div class="inner">
<p>Hi!</p>
</div>
</div>
</div>
</body>
</html>
Update
OK, doesn't accomplish what you are talking about with just one element.
That's only possible with CSS 3.