I tried the display:table-cell but it didn't worked. How can I show the word inside the div. Now it show overflow the div. I am use CSS2 on my webpage. Thanks in advance.
<div style=" width:60px; border-style: solid; border-width: 15px; display: block;">
Visit W3Schoolseeeeee
</div>
<div style="float: right; border-color: #ff33ff" width:50%;>Column 2</div>
Use word-wrap:
a{
word-wrap: break-word;
}
demo
Change the width of the div container to allow the content to fit. Right now you have it set to 60px, which is not wide enough for the text to display without overflowing. You could do something like this instead:
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<div style="width:150px; border-style: solid;
border-width: 15px; display: block; text-align: center;">
Visit W3Schoolseeeeee
</div>
<div style="float: right; border-color: #ff33ff" width:50%;>Column 2</div>
</body>
</html>
This example really isn't leveraging best practices of HTML and CSS. Ideally your CSS would be outside of the HTML document entirely, and you likely don't need to hard code a pixel width for your div container.
Related
I've found out that setting display property of containing block to table and enclosing descendant block boxes in boxes with display property set to table-cell and vertical-align property set to top has same effect as if float property of those boxes was set to left.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>simulating float</title>
<style type="text/css">
#container {
background-color: darkgrey;
margin: 10px;
padding: 10px;
height: 240px;
display: table;
}
.box {
margin: 5px;
width: 240px;
height: 240px;
background-color: grey;
}
.float {
display: table-cell;
vertical-align: top;
}
</style>
</head>
<body>
<div id="container">
<div class="float">
<div class="box"></div>
</div>
<div class="float">
<div class="box"></div>
</div>
<div class="float">
<div class="box"></div>
</div>
</div>
</body>
</html>
Can someone give me an explanation of this? Thanks.
The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it.
Also, display:table-cell makes the element behave like the HTML tag.
The vertical-align:top propriety makes the element aligned to the top of the entire line or align the top padding edge of the cell with the top of the row. So the
.float {
display: table-cell;
vertical-align: top;
}
looks like if it had float:left only.
I hope this will help you understand CSS better.
If you have markup like this:
<div class="inlineblock">one</div>
<div class="inlineblock">two</div>
<div class="inlineblock">three</div>
and css like this:
.inlineblock{ display: inline-block; }
You will get spaces between the elements. about 4px of space. unless your markup looks like this:
<div class="inlineblock">one</div><div class="inlineblock">two</div><div class="inlineblock">three</div>
Now, what i would like to know is WHY?
What is the technical reason that "good" browsers still do this, even the latest Firefox, Chrome, and Opera at the time of this posting still do this. I assume there is a technical reason behind it, otherwise it would have been fixed by now?
Thanks!
This is exactly what they should do.
Spaces between inline elements are no different from spaces between words.
If you don't want that, use block elements, or set the font size to zero.
Well, there are spaces between them!
For a fix, try using font-size: 0 in the parent element.
There's a better way of removing the white space than setting font size to zero (as that method has unpleasant side effects). You can word-spacing instead:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
section {
word-spacing:-.25em; /* hide whitespace nodes in all modern browsers (not for webkit)*/
display:table;/* Webkit Fix */
}
div {
width: 100px;
height: 40px;
background: #e7e7e7;
padding: 10px;
display:inline-block;
word-spacing:0; /* reset from parent*/
}
</style>
</head>
<body>
<section>
<div>one</div>
<div>two</div>
<div>three</div>
</section>
</body>
</html>
This is The solution.
<style>
* {
border:0;
margin:0;
padding:0;
box-shadow:0 0 1px 0px silver;
}
.foo {
width: 100%;
}
.bar {
width: 50%;
float:left;
text-align: center;
}
</style>
<div class="foo">
<div class="bar">
...a new customer
<!-- the whitespace between the following divs affects rendering - why? -->
</div> <div class="bar">
...an existing customer
</div>
</div>
I have two divs in which I cannot predict the width of each and has to be displayed inline.
<div id="container">
<div id="left">Primary variable content</div>
<div id="right">variable content</div>
</div>
The CSS for this as of now:
#left, #right{
display:inline-block;
}
I need
#right to be right aligned to the edge of the parent #container
#left to fill the remaining space.
Thus, all content of #right will be displayed and subsequently #left will have the remaining space to show its content. The overflow can be clipped.
I cannot use float:right here for this as it will not help achieve requirement 2. I do not know the widths of the content.
JS Fiddle of current situation here - http://jsfiddle.net/chandika/fVkzV/2/
Any ideas?
It's easy if you are able to reverse the order of the divs in the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
#container{
border: 1px solid;
padding: 2px;
}
#left{
border: 1px solid #99CC00;
overflow: hidden;
}
#right{
display:inline-block;
text-align: right;
float: right;
border: 1px solid #FFCC00
}
</style>
</head>
<body>
<div id="container">
<div id="right">content, content</div>
<div id="left">some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here </div>
</div>
</body>
</html>
I want the background image of one of my divs to overflow into the body section. I've tried overflow:visible without any luck.
Check the pic:
See how the gold bits get cut off on the edge of the div? Suggestions please?
Here's my set up:
in the HTML:
<body>
<div id="container">
in the CSS:
body{
background-color: #0e0a04;
}
#container{
max-width: 960px;
margin: 0px auto;
padding: 0px;
margin-top:60px;
background-color: #0e0a04;
background-image: url(/bundles/tabredirector/images/background-image.png);
background-repeat:no-repeat;
background-position: -70px -20px; /*x,y*/
overflow:visible;
}
Thanks!
WHAT I ENDED UP IMPLEMENTING:
Thanks for all of your suggestions, they inspired my solution. My final solution was to use a master div (position:relative with z-index:-1) and my container (position:absolute z-index:1) and stick an image in the master div that can be positioned absolutely. This way the content always sits on top and the background isn't clipped.
first post your markup and css. Also give the div a width:100%.
You need to make sure there is a div outside your containing div. You can have a container above and below it which will hold all your other content.
Then you need to have a 100% width div with the full bg image centered.
Then within that div add another div for your content which can be 960 wide with an auto left and right margin to center it to the page.
Paste your HTML in your post as well the css is not enough as you need to add to your html!
Thanks
Background images on an element only appear within that element.
If you want your <div>’s background image to appear outside the boundaries of the <div>, you need to assign the background image to another element instead, e.g. the <body> element.
Heres a quick example:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.container {
padding: 0px;
width: 960px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#fullWidthImage {
background-color: #0F9;
height: 200px;
width: 100%;
}
#centeredContent {
padding: 0px;
width: 960px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
height: 200px;
background-color: #09C;
}
</style>
</head>
<body>
<div class="container">
<p> </p>
<p>top site content </p>
<p> </p>
</div><!--container-->
<div id="fullWidthImage">
<div id="centeredContent">
content bla bla
</div>
</div><!--fullwidthImage-->
<div class="container">
<p> </p>
<p> </p>
<p>bottom of site content </p>
</div>
<!--container-->
</body>
</html>
If you run the simple HTML page found at:
http://ss.bigwavesoftware.net/2.htm
in IE8 and FireFox 3.5.8, the DIV's display differently. In IE they behave as block elements and FireFox they behave as inline elements. I need them to behave as inline in both browsers. Can someone suggest a workaround to make them display inline in IE8 as well as FireFox?
<html>
<body>
<div style="display: inline; float: none; width:100px; height:100px; border:1px solid red;">Left Box
</div>
<div style="display: inline; float: right; width:100px; height:100px; border:1px solid green;">Right Box
</div>
</body>
</html>
Reverse the order of your divs and it will work. That is put the first one second and the second one first in the markup.
<html>
<body>
<div style="display: inline; float: right; width:100px; height:100px; border:1px solid green;">Right Box
</div>
<div style="display: inline; float: none; width:100px; height:100px; border:1px solid red;">Left Box
</div>
</body>
</html>
Add a doctype at the very start of your document. It's being rendered in quirks mode. E.g.
<!doctype html>
<html>
... etc.
Oh, and what exactly do you mean by "behave as inline"? Do you simply mean you want them to appear side-by-side, or do you actually want the width and height to be ignored (as Tom pointed out)? Because you won't be able to do the latter for floated elements. The display: inline is useless on floats (except to fix IE6 bugs), because "inline" floats automatically turn into block.
You can't set height and width on inline elements. If you want the boxes to be laid out as they are in Firefox, remove the display: inline and float the left-hand box.
use float: left instead of float: none in the first div (the one on the left).
<html>
<body>
<div style="display: inline; float: left; width:100px; height:100px; border:1px solid red;">Left Box
</div>
<div style="display: inline; float: right; width:100px; height:100px; border:1px solid green;">Right Box
</div>
</body>
</html>