I'm pulling my hair out here. I just want two divs side by side containing content that resizes the divs and their containing divs based on the content with all content visible, no scroll.
The following markup isn't my site but I have written it to demonstrate what I want:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<style>
#outer{
width:400px;
}
#innerleft{
width:200px;
float:left;
}
#innerright{
width:200px;
color:#900;
float:left;
}
</style>
</head>
<body>
<div id="outer">
<div id="innerleft">
sdgfjfdbvkjfdbvkjfdbvkjdfbvkjdfbvkjdfbvkjdbvkjdfbvkjdfbvkjdfbvkjdfbvkjdfbjkfbvjkdfbdfkjdfbjkfdbkjdfjvfjkbfvbjkfvkjbvbfjdjdfdfbdfj
</div>
<div id="innerright">
dsufbjksvkudfsvkdfubvjkdfhbvkhdfbvksdbvkjsdbvkjdsbvkjsbdvkjbsdvkjbsdkjvbskjvbsdkjvbskdjbvksdbvksdjvbkjdsbvkjsbvkjsdbvkjdsbvkjdsksbdjv
</div>
</div>
</body>
</html>
I seem to have tried everything!
Apply word-wrap:
#outer > div
{
word-wrap: break-word;
}
http://jsfiddle.net/NEbj7/1/
To make it automatically resize you want to add more -- % percentage to make it automatically fill the space
#outer{
width:100%; /* 100% */
}
#innerleft{
width:50%; /* 50% */
float:left;
word-break:break-all; /* Lines may break between any two characters for non-CJK scripts */
}
#innerright{
width:50%; /* 50% */
color:#900;
float:left;
word-break:break-all; /* Lines may break between any two characters for non-CJK scripts */
}
http://jsfiddle.net/eZpvr/1/
Browsers by default won't wrap the text which doesn't have any white space in it. To force the browser to wrap the text you must add the word-wrap property to #innerleft and #innerright
#innerleft, #innerright{
word-wrap: break-word;
}
reference: http://webdesignerwall.com/tutorials/word-wrap-force-text-to-wrap
Related
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 canvas element inside a div element. The canvas size can change, and I want it vertical centered. I'm using this CSS approach:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Vertical Centering</title>
<style>
html,
body{
height:100%;
width:100%;
margin:0;
padding:0;
}
#container{
width:100%;
height:100%;
text-align:center;
font-size:0;
background:#aae;
}
#container:before{
content:'';
display:inline-block;
height:100%;
vertical-align:middle;
}
canvas{
width:400px;
height:300px;
display:inline-block;
vertical-align:middle;
background:#fff;
}
</style>
</head>
<body>
<div id="container">
<canvas></canvas>
</div>
</body>
</html>
You can see it working on this fiddle: http://jsfiddle.net/8FPxN/
This code works great for me, until the browser resizes under the canvas width. The virtual element defined by the :before selector stands on the first line, and the canvas falls to the second line. I'm trying to keep them sticked, avoiding the line break, and showing scroll bars when needed. Adding the overflow:auto rule to the container shows the scroll bars, but the line keeps breaking.
The canvas size can change, so the top:50%; margin-top:- ($canvas_height / 2); approach is not suitable for this. Well, it can be, but I prefer not to control the margin-top using JavaScript. Just CSS would be great.
Any ideas? Thanks!
It seems (from limited testing) that adding white-space: nowrap; works:
#container{
width:100%;
height:100%;
text-align:center;
font-size:0;
background:#aae;
white-space: nowrap;
}
Updated JS Fiddle demo.
Adding white-space:nowrap should do the trick. http://jsfiddle.net/David_Knowles/aEvG5/
#container{
width:100%;
height:100%;
text-align:center;
font-size:0;
white-space:nowrap;
}
EDIT: correct fiddle
I am completely new to html and css so my question could be very basic but hope you guys can help me udnerstnad,
I am using following css code
body
{
background-color:Olive;
width:550px;
font-family:Verdana;
}
I am setting width to 550px and as a result all my paragraphs contract to 550px but the background is applied to the whole page even beyond the 550px
I understand that because of inheritance the child elements would have inherited the width property from body, but I was thinking that if I set width property of body to 550px then background should be visible in 550px wide area and not the full page,
I don't get the logic here..
If you apply a color to the html, for example html { background-color: yellow; }, you'll see this is not the case at all. The <body> tag is special in that it is intended to encompass the entire contents of the HTML page. When you apply a background, then, the default is for it to paint the entire background page, unless htmls background has otherwise been set.
See this jsfiddle example. Like the other posters above, I highly recommend using a <div> element to wrap, size, and color your content.
This is described in the CSS2 specifications as so:
The background of the root element becomes the background of the canvas and covers the entire canvas, anchored (for 'background-position') at the same point as it would be if it was painted only for the root element itself. The root element does not paint this background again.
Why not wrap your content in a div, and set the properties to that?
<body>
<div class="content">
... content here
</div>
</body>
and apply the same classes to the div
.content
{
background-color:Olive;
width:550px;
font-family:Verdana;
}
You can use a container div that wraps your whole page and acts like a "fake" body. Then if you apply these style to this div your problem will be solved.
css
#wrapper {
width: 550px;
margin: 0 auto;
text-align: left;
}
HTML:
<body>
<div id="wrapper">
Piece of text inside a 550px width div centered on the page
</div>
</body>
You should try this http://jsfiddle.net/ajaypatel_aj/8tfKc/
HTML
<div id="wrapper">Test me!</div>
CSS
*{
margin:0;
padding:0;
}
body{
text-align:center; /*For IE6 Shenanigans*/
font-family:Verdana;
}
#wrapper{
width:550px;
margin:0 auto;
text-align:left;
background-color:Olive;
}
Answer is simple applied body color will set to whole page you must have to use div .
This is what you are looking for.
<html>
<head>
<title>
Your title goes here.
</title>
</head>
<style type="text/css">
#test
{
background-color:Olive;
width:550px;
font-family:Verdana;
}
</style>
<body>
<div id='test'>
Hello
</div>
</body>
Another answer is:
<html>
<head>
<title>
Your title goes here.
</title>
</head>
<style type="text/css">
html
{
background-color:white;
}
body
{
background-color:Olive;
width:550px;
font-family:Verdana;
}
</style>
<body>
Hello
</body>
</html>
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
Can anyone explain to me this code because it seems to beat my logic?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test CSS Lay 2 col, 1 fix 1 fluid</title>
<style type="text/css">
body{
background-color:#000;
padding: 0;
margin: 0;
}
#main{
width:70%;
min-width:300px;
height:500px;
}
#colWr{
width:100%;
height:500px;
float:left;
}
#col{
height:inherit;
background-color:#900;
margin-left:200px;
}
#left{
height:inherit;
background-color:#9C3;
float:left;
width: 200px;
margin-left: -100%;
}
</style>
</head>
<body>
<center>
<div id="main">
<div id="colWr">
<div id="col"></div>
</div>
<div id="left"></div>
</div>
</center>
</body>
</html>
My questions rely on the facts that #left holds a margin-left: -100px attribute, the position of the div's within the main div suggest that the left column would rather be a right column and why is the "col" column floated to the left within the "colWr" div?
For a 1_fixed-1_liquid css layout, the code is quite a mind-twister.
The order of the divs doesn't matter as colWr has a width of 100% which means anything floated after it will appear on a new line anyway, if the left column came first it would force the colWr column on to a new line and it would have to be given a negative margin. The left div has a negative margin of 100% which brings it back on top of colWr.
As to why the page was laid out this way I have no idea, the same effect could be just as easily achieved by putting the left next to the col div and removing the colWr div (doesn't do any harm but it serves no purpose).
You should also note that the center tag in HTML has been deprecated and I recommend you give centre a div by specifying in it's css margin: auto. The code also lacks a DOCTYPE declaration which is required to trigger standards mode in most browsers - you can find more information about browser modes here.
My suspicion is that the code you have was written pre-dating the release of HTML 4.01. It will work in most browsers due to their legacy support but that doesn't mean it works well, I wouldn't use it. I would however use this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test CSS Lay 2 col, 1 fix 1 fluid</title>
<style type="text/css">
body{
background-color:#000;
padding: 0;
margin: 0;
}
#main{
width:70%;
min-width:300px;
height:500px;
margin: auto;
}
#col{
height:inherit;
background-color:#900;
margin-left:200px;
}
#left{
height:inherit;
background-color:#9C3;
float:left;
width: 200px;
}
</style>
</head>
<body>
<div id="main">
<div id="left"></div>
<div id="col"></div>
</div>
</body>
</html>