For some reason I think I'm forgetting something here. Below is my code:
<style type="text/css">
#content {
width: 400px;
height: 100px;
background: orange;
padding: 10px;
}
</style>
<div id="content">
<h1>what</h1>
foofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoo
</div>
When that loads, it shows this:
http://grab.by/6Mhp
The text is not inside the box. Why...? And how to fix?
Add the style
word-wrap:break-word;
on your #content
#content {
width: 400px;
height: 100px;
background: orange;
padding: 10px;
word-wrap:break-word;
}
I don't think CSS will automatically break words into pieces to fit into the div. You could use overflow:hidden to hide the overflow. The example you already use should work fine if you have words that don't exceed the size of the div.
You can also use word-wrap:break-word but, IIRC, that requires either IE or CSS3 (though that probably represents a lot of browsers out there).
Related
Your probably going to say this has been asked before but this is a variation with a bug. So we are all aware of the technique used to answer this question:
Fixed width div on left, fill remaining width div on right
However this does not work if the variable width element is an input tag.
http://jsfiddle.net/8pk4K/2050/
even overriding the inputs default css doesnt fix this:
display: block;
overflow:hidden;
background-color:green;
height: 100px;
width: auto;
Iv been playing with this for ages, it only happens on input tags, if you replace it with a span (default display inline but set it to display block) it still works.
Any idea why this only doesnt work for input tags and nothing else?
EDIT:
For clarification, I know that the fix for this is to put the input into a div and apply width 100% to the input. My question is why this is necessary, not how to fix it.
I know the problem, styling form elements will always be a pain in the ass.
I've came up with this work around, by wrapping the input in the right div.
<div class="header"></div>
<div class="header-right">
<input type="text" />
</div>
.header{
float:left;
background: #efefef;
background-repeat: no-repeat;
width: 240px;
height: 100px;
}
.header-right{
overflow:hidden;
background-color:#000;
height: 100px;
position: relative;
}
.header-right input {
background: green;
position: absolute;
width: 100%;
height: 100%;
}
JSFiddle
You can use calc to produce the width what you desire because inputs are replaced elements that have intrinsic dimensions just like images
CSS
.header-right{
display: block;
overflow:hidden;
background-color:green;
height: 100px;
border: none;
width: calc(100% - 240px); //Add this
}
Note: You must give a dimension (width) to the select or otherwise give you the default browser width
DEMO HERE
Try adding width in % for both .header and .header-right.
Like
.header{
width:20%;
}
.header-right{
width:80%;
}
I have a wrapper that contains all the elements of an html page.
#wrapper {
width: 1000px;
height: auto;
min-height: 100%;
margin: auto;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4488ff), to(#4422ff));
[...]
background-attachment: fixed;
-moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius:20px;
}
Here's the HTML code sample
<div id="wrapper">
<div id="uppermenu">
<div id="container">
<div id="logo"> <img src="images/logo.png" height="100%"> </div>
<div id="banner"> <br></div>
</div>
</div>
<div class="sidemenu"> [...] </div>
<div id="guide"> [...] </div>
</div>
I want this wrapper to change its height depending on the content it has to contain, but as I do this is not happening.
If I try to use
overflow: hidden;
the wrapper is shifted down by the uppermenu div (which it should be containing) and using
clear: both;
at the end of the contents doesn't change anything.
I've tried at least 5 different question answered correctly here but none worked well for me.
Last thing: the wrapper set as I wrote (with min-height at 100%) fits perfectly the screen of my browser, but that clearly not what I want it to look!
Any help???
EDIT: here's the CSS of sidemenu class
.sidemenu {
float: left;
margin-left: 20px;
margin-top: 20px;
height: 200px;
width: 150px;
background-color: #4488ff;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
z-index: 3;
}
and of the guide id
#guide {
float: left;
margin-top: 20px;
margin-left: 50px;
height: 100%;
width: 760px;
background-color: #4488ff;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
z-index: 3;
}
uppermenu and container
#uppermenu {
position: fixed;
top: 0px;
width: 1000px;
height: 100px;
margin: auto;
background: #004465;
z-index: 5;
}
#container {
width: 1000px;
min-height: 100%;
margin: auto;
}
Solution one: clear: both
Adding a block element with the style clear:both; onto it will clear the floats past that point and stop the parent of that element from collapsing. http://jsfiddle.net/TVD2X/1/
Pros: Allows you to clear an element and elements you add below will not be effected by the floated elements above and valid css.
Cons: Requires the another tag to clear the floats, bloating markup.
Note: To fall back to IE6 and for it to work on abstinent parents (i.e. the input element) you are not able to use :after.
Solution two: display: table
Adding display:table; to the parent to make it shrug off the floats and display with the correct height. http://jsfiddle.net/h9GAZ/1/
Pros: No extra markup and is a lot neater. Works in IE6+
Cons: Requires invalid css to make sure everything plays nice in IE6 and 7.
Note: The IE6 and 7 width auto is used to prevent the width being 100%+padding, which is not the case in newer browsers.
A note on the other "solutions"
These fixes work back to the lowest supported browser, over 1% usage globally (IE6), which means using :after does not cut it.
Overflow hidden does show the content but does not prevent the element from collapsing and so does not answer the question. Using an inline block can have buggy results, children having strange margins and so on, table is much better.
Setting the height does "prevent" the collapse but it is not a proper fix.
Invalid css
Invalid css never hurt anyone, in fact, it is now the norm. Using browser prefixes is just as invalid as using browser specific hacks and doesn't impact the end user what so ever.
In conclusion
I use both of the above solutions to make elements react correctly and play nicely with each other, I implore you to do the same.
get rid of min-height: 100%. this means that the minimum height of the div is 100% of your browser height. eliminating this should make it fit to the content
I'm trying to "flank" a centered div with some design elements that are absolutely positioned outside the main div's width. I'm getting a scroll bar due to the element on the right, but not the element on the left (IE6/7/8, Chrome, Firefox). How can I get rid of that horizontal scrollbar?
<html>
<head>
<style type="text/css">
html, body {
height: 100%;
width: 100%;
margin: 0;
}
body { text-align: center; }
.wrapper {
margin: 0 auto;
position: relative;
width: 960px;
z-index: 0;
}
.main {
background: #900;
height: 700px;
}
.right, .left {
position: absolute;
height: 100px;
width: 100px;
}
.right {
background: #090;
top: 0px;
left: 960px;
z-index: 1;
}
.left {
background: #009;
top: 0px;
left: -100px;
z-index: 1;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
This works in IE6-9, FF3.6, Safari 5, and Chrome 5. Didn't seem to matter what doctype I threw at it(none, xhtml 1 transitional, html5). Hope this helps, that was an interesting problem.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html,
body {
margin: 0;
padding: 0;
text-align: center;
}
body {
overflow: auto;
}
#container {
min-width: 960px;
zoom: 1; /*For ie6*/
position: relative; /*For ie6/7*/
overflow: hidden;
margin: 0 auto;
}
#main {
background: #cea;
width: 960px;
margin: 0 auto;
height: 700px;
position: relative;
top: 0;
}
#right,
#left {
position: absolute;
height: 100px;
width: 100px;
top: 0;
z-index: 100;
}
#right {
background: #797;
right: -100px;
}
#left {
background: #590;
left: -100px;
}
</style>
</head>
<body>
<div id="container">
<div id="main">
<div id="left">left</div>
<div id="right">right</div>
</div>
</div>
</body>
</html>
Throwing an overflow-x: hidden on the body tag would work in anything that's not IE6/7... but for those two browsers, you'll need to also add overflow-x: hidden to the html tag.
So use what you have now with this adjustment:
html, body {
height: 100%;
width: 100%;
margin: 0;
*overflow-x: hidden;
}
body { text-align: center; overflow-x: hidden; }
Note that the reason the "*" hack is used in the html, body declaration is because IE8 is unconventional. If you don't use it, IE8 will lose vertical scrollbars as well, not just horizontal. I don't know why. But that solution should be fine.
I was having a similar issue to this and was completely tearing my hair out as I found the solution above didn't quite work for me. I overcome this by creating a div outside of my main container div and using min-width and max-width to come up with a solution.
#boxescontainer {
position: relative;
max-width: 1100px;
min-width: 980px;
}
#boxes {
max-width: 1100px;
min-width: 900px;
height: 142px;
background:url(../grfx/square.png) no-repeat;
background-position: center;
z-index: 100;
}
I found however that I also needed to make the square.png image the size of the div so I made it as a transparent png at 1100px. This was my solution to the problem and hopefully it might help someone else.
On a side note I also had an image on the left side in which I used absolute positioning which didn't have the same scrollbar issue as the right side. Apparently the right and left side do take on different properties from what research I did regarding this matter.
In regards to people using overflow-x:hidden I would have to disagree with this method mainly because you are taking away the users ability to horizontal scroll completely. If your website is designed to be viewed the a 1024px resolution then people who are on an 800px resolution won't be able to see half of your website if you take away the ability to horizontally scroll.
Your body is not set to relative.
Not knowing what you'd like to do with this, I would perhaps set a background image on the body instead.
You're getting a scrollbar only when the viewport's thinner than the main plus that right box, right? (Don't think that was clear to some people.) This is expected browser behavior for content overflow.
Depending on what you want to happen (why do you want it to disappear in this circumstance, if you do?), you could set overflow:hidden on .wrapper. That would always hide it--if you're looking to dynamically display it on some other event, that'll work.
If I'm not mistaken, though, you just don't want it to show when their viewport's only 960px wide. AFAIR you can't do that without some js/jQuery. My suggestion would actually be--especially if you don't want to mess with javascript--if you want this content to be visible at all, accept the scrollbar at narrow widths. It might irk you as a designer, but most people won't notice it, and those who do can still access your content--which is a win, right?
Wrap all the elements in a div, make that div position relative and overflow hidden. It solves this problem every time. :D
If the page language is left-to-right, then the left non-fitting elements don't cause a scrollbar.
Try this:
<html dir="rtl">...</html>
This will change the text direction of the page to Right-To-Left, and now the left div will cause a scrollbar, not the right one.
You can do the same with direction:rtl css property.
If you want your page render to be independent from text direction then you can arrange page elements differently to avoid this.
Old question I know, but may help someone else out. The below expands on James response but works in IE6/7/8/9, FF and Webkit. Yes it uses evil expressions but you can put that in a IE6 specific stylesheet.
#bodyInner {
width: 100%;
min-width: 960px;
overflow: hidden;
width:expression(((document.compatMode && document.compatMode=='CSS1Compat') ? document.documentElement.clientWidth : document.body.clientWidth) > 980 ? "100%" : (((document.compatMode && document.compatMode=='CSS1Compat') ? document.documentElement.clientWidth : document.body.clientWidth) #LT# 980 ? "960px" : "97.5%"));
}
I needed a solution like this too - thanks to all who suggested the 100%-wide wrapper with overlow-x hidden. However, I don't think you have to add the extra #bodyInner div - I've successfully tested it applying the width and overflow attributes directly to body in Safari, Opera, Firefox, Chrome, and IE8.
I have a solution that doesn't work in IE7/IE6, but seems to be fine everywhere else.
Create wrapper (#bodyInner) around everything inside your <body> tag.
Apply this CSS rule:
#bodyInner {
width:100%;
overflow:hidden;
min-width:960px;
}
Too bad you can't just apply this on the <body> element.
i've got a very simple CSS example detailed below. The .entry class generates a simple box with a 1px black border. the example below, will render "123" within the box and "abc" and "xyz" outside the box because those elements are tagged with float left and right. My goal is to have .box1 inside .entry aligned left, and .box2 inside .entry aligned right.
<html>
<head>
<style type="text/css">
.entry
{
width: 400px;
border-style: solid;
border-width: 1px;
border-color: #000;
}
.box1
{
width: 75px;
float: left;
}
.box2
{
width: 300px;
float: right;
}
</style>
</head>
<body>
<div class="entry">
123
<div class="box1">abc</div>
<div class="box2">xyz</div>
</div>
</body>
</html>
it renders fine in IE but not firefox
Since floats are taken out of the normal flow, their surrounding boxes will collapse.
I'll first explain why it is working in IE. You have given it "layout" by setting a width or height on each element. It's width in this case. See hasLayout for more about this. This is very handy as it will also solve most of any other IE bugs you come across.
The magic bullets are:
height: 1%; /* or any other value. IE6 wrongly sees height as min-height. */
or if you aren't in a position to set a specific size, use
zoom: 1; /* A IE only property. Doesn't validate, but doesn't cause any harm either */
So, to your problem, making it working in a proper browser, there are a couple of solutions. If you set the parent of the floated elements to have float as well, the box will stretch around the child floats. Although this might cause trouble further up the DOM, I don't know how the rest of your markup is.
An easier way can then be to set overflow:hidden; which also fixes it. But now you have to watch out for long url's, code-snippets, or anything else that might accidentally push out of the div. If you're doing the whole site yourself this is normally not a big problem, if you're handing it over to someone to use in a CMS, chances are slightly larger. Still worth taking the risk though, if you can't solve a myriad of floats around your layout.
Adding an element at the end to clear the floats is also a way of doing it, but I find the former ways easier.
I better stop blabbering, you probably want to see the code:
.entry {
width: 400px;
border: 1px solid #000;
float: left; /* Option 1 */
overflow: hidden; /* Option 2 */
}
.box1 {
width: 75px;
float: left;
}
.box2 {
width: 300px;
float: right;
}
Since you have no Doctype, you are triggering Quirks mode. This renders browsers significantly more buggy then Standards (AKA Strict) mode. Internet Explorer is the worst offender here.
I suspect your problem is that you want the border of .entry to extend around .box1 and .box2. See containing floats for more detail and Methods for Containing Floats for some nicer solutions..
Of course, your problem might be something different. You were rather vague.
You need to clear your floats for FF:
.entry:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
I would do it for IE as well:
.entry { min-height: 10px;}
Otherwise, I don't see why it wouldn't work...
Try this; I've tested it and it works in FF 3, Safari 3.2, Opera 9.6 and IE 7.
(The reason I added the extra line of text in the .box2 div was to ensure that the .entry div would stretch vertically as extra content was added).
<html>
<head>
<style type="text/css">
.entry
{
width: 400px;
border-style: solid;
border-width: 1px;
border-color: #000;
}
.box1
{
width: 75px;
float: left;
}
.box2
{
width: 300px;
float; left;
margin: 0 0 0 75px;
}
.entry span
{
width: 400px;
float: left;
}
</style>
</head>
<body>
<div class="entry">
<span>123</span>
<div class="box1">abc</div>
<div class="box2">xyz<br>More text</div>
</div>
</body>
</html>
Try adding overflow:hidden (or auto) to .entry{...}
I am trying to write a CSS in which when the user writes text and it overflows instead of having a scrollbar or hiding, it just goes down like in a normal Word Document or so. I have this code:
#content-text {
width: 960px;
padding-left: 10px;
padding-right:10px;
text-align: left;
color:#000;
height:100%;
margin-left: 25px;
margin-right:25px;
}
The odd thing, is that while this code actually does what I want in IE in Firefox it overflows and becomes a scrollbar. I've tried overflow:auto; overflow:hidden; and overflow:inherit; just to see if any helped but no luck so far, and I honestly have no idea of why is this happening in Firefox, =/ would any of you know?
Update:
I tried with overflow:visible; but I just get the overflow...well visible but still it doesn't wraps. and ONLY in Firefox so far. =/
Update:
The only other thing that could be affecting is that I have another CSS code and the first is contained:
#content-title{
background-color: transparent;
background-image: url(../img/content-title-body.png);
background-repeat: repeat-y;
background-attachment: scroll;
background-x-position: 0%;
background-y-position: 0%;
height:auto;
position:absolute;
z-index :100; /* ensure the content-title is on top of navigation area */
width:1026px;/*1050px*/
margin: 160px 100px 5px 100px;
overflow: visible;
top: 55px;
}
and the HTML that uses this is:
<div id="content-title">
<div id="content-text"> Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!<p>Hola!Hola!Hola!Hola!Hola!Hola!<p>Hola!Hola!Hola!Hola!<p>Hola!Hola!Hola!Hola!<p>Hola!Hola!Hola!<p>Hola!Hola!Hola!Hola!<p>Hola!Hola!
</div>
</div>
So your css is probably fine. For example on my page I have css is like this:
textarea.input_field2 {
margin: 10px 10px 10px 0px;
width: 440px;
height: 150px;
background:#696969;
color: white;
border: none;
font-size: 14px;
text-align: left;
vertical-align: middle;
}
Then in the body I call it up like this:
<textarea rows="9" cols="9" class="input_field2" name="user_comments"></textarea>
It works fine.
But make sure when you test it you test it with something like Lorem Ipsum, words with spaces and not one long string like 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa' cause that will force a scroll bar probably. Also check your html and css for validation.
Try: overflow: visible.
There must be more to the story than you are showing here. I used the CSS provided and I am seeing the same behavior in both Internet Explorer and Firefox. The page is rendered 960 pixels wide and when the browser width is less than this, a horizontal scroll bar is rendered.
If you specify a width on an element, the browser is not going to render it less than this value. If you remove the width declaration from your example, the element will only render as wide as it needs to.
If this is not the answer you are looking for, please provide more code to give us the whole picture.
Add word-wrap: break-word; to your #content-text