I have been spending hours on that...with no success.
Since inline-block is not well-supported by IE6&7, I wanted to know if it is possible to have the same render using other attributes given by the following code :
<html><head>
<style type="text/css">
.img {
float: left;
width:17px;
height:15px;
display:block;
background-color: #FD3;
border-style:solid;
}
.txt {
float: left;
}
.parent {
display: inline-block
}
</style></head><body>
Follow Me
<div class="parent ">
<div class="img"></div>
<div class="img"></div>
<div class="txt">(a comment)</div>
</div></body></html>
Careful : I cannot add/change the container of "Follow me" (using for instance a float:left). I can control ONLY what is inside the div "parent" (and the div "parent" itself)
Do you have a workaround?
Thx
Actually, inline-block works in IE6 and IE7, just in a strange way.
Basically, IE6 and IE7 implement inline wrong. When a naturally inline element has layout (google for "hasLayout" for more info on that) it will act like an inline-block element and respect width/height set on it.
So swap out those <div class=image>s with <span>s so they're naturally inline, and then all you have to do is trigger hasLayout on them and you're good to go. My typical method is to set a "zoom:1" property on the elements - it's an IE-only properly that won't do anything, but will trigger hasLayout.
An even better solution, of course, is to just use <img> elements, if that's possible at all.
Try this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
.img {
display: block;
position: absolute;
width: 17px;
height: 15px;
background-color: #FD3;
border-style: solid;
border-width: 3px;
}
.leftimg {
top: 0;
left: 0;
}
.rightimg {
top: 0;
left: 23px;
}
.txt {
display: inline;
}
.parent {
display: inline;
position: relative;
padding: 0 0 0 46px;
}
</style>
</head>
<body>
Follow Me
<div class="parent ">
<div class="img leftimg"></div>
<div class="img rightimg"></div>
<div class="txt">(a comment)</div>
</div>
</body>
</html>
I do not have IE to test, but anyway, don't forget the doctype, IE behaves differently without it.
it's lame, but this works in Chrome 3.0, Firefox 3.5, IE 6, 7 and 8
<html><head>
<style type="text/css">
.img {
display: inline-block;
width:17px;
height:15px;
background-color: #FD3;
border-style:solid;
}
.parent, .txt {
display: inline;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
.img {
display: inline;
}
.parent, .txt {
display: inline;
}
</style>
<![endif]-->
<!--[if IE 8]>
<style type="text/css">
.img {
display: inline;
}
</style>
![endif]-->
</head><body>
Follow Me
<div class="parent ">
<div class="img"></div>
<div class="img"></div>
<div class="txt">(a comment)</div>
</div></body></html>
Related
I am trying to adjust the divs in my application in a way that they remain beside each other in all condition, that is, Currently I am facing a problem that , when i decrease the width of the device the div start to come below the other div while with the device that have higher width have no issues. I have used viewport rendering but still there is no effect on the same .
Here id the code :
HTML:
<HTML>
<head>
<meta charset="ISO-8859-1">
<meta name="viewport" content="initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>Comment</title>
<link rel="stylesheet" type="text/css" href="Comment.css">
<script src="js/angular-1.0.7.js"></script>
<script src="js/Myangular.js"></script>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
</head>
<body>
<div class="main">
<div class="imageIcon"><img style="height:30px;width:30px;"src="images/male-shadow-circle-512.png" alt="UserMale" /></div>
<div class="contentDiv">
<div class="nameAndId">Name of the persion along with some IDS</div>
<div class="commentDetails">this is the conetent of the main div where we can put the graphics</div>
<div class="updateTime">Some time ago .</div>
</div>
</div>
</body>
</html>
CSS:
#CHARSET "ISO-8859-1";
body
{
margin : 0px;
padding: 0px;
}
.main
{
margin-top:10px;
}
.imageIcon
{
display:inline-block;
float:left;
margin-left:18px;
background-color: green;
}
.contentDiv
{
display:inline-block;
float:left;
margin-left:12px;
margin-right:10px;
background-color: blue;
}
.nameAndId
{
background-color: aqua;
}
.commentDetails
{
margin-top:8px;
background-color: red;
}
.updateTime
{
float:right;
margin-top: 16px;
background:silver;
}
Fiddle link :
http://jsfiddle.net/tvaibhav/rta9LLfw/
You could use display: table on .main and display: table-cell on .imageIcon and .contentDiv to prevent that. Instead of margin, you could use border-spacing property on parent(.main).
Play Ground
#CHARSET"ISO-8859-1";
body {
margin: 0px;
padding: 0px;
}
.main {
display: table;
border-spacing: 10px;
}
.imageIcon {
display: table-cell;
vertical-align: top;
}
.contentDiv {
display: table-cell;
vertical-align: middle;
background-color: blue;
}
.nameAndId {
background-color: aqua;
}
.commentDetails {
margin-top: 8px;
background-color: red;
}
.updateTime {
float: right;
margin-top: 16px;
background: silver;
}
<body>
<div class="main">
<div class="imageIcon">
<img style="height:30px;width:30px;" src="http://www.lorempixel.com/30/30" alt="UserMale" />
</div>
<div class="contentDiv">
<div class="nameAndId">Name of the persion along with some IDS</div>
<div class="commentDetails">this is the conetent of the main div where we can put the graphics</div>
<div class="updateTime">Some time ago .</div>
</div>
</div>
</body>
You can simply use the display: flex; property with your main div:
.main {
margin-top:10px;
display: flex;
display: -webkit-flex;
}
Here's a Demo fiddle, that works fine with all widths.
Take a look at W3School Tutorial here and try it here.
I've searched for several hours and tried out everything I found, but nothing helped, so here goes. I'm trying to set up a website that has a left column and right column both of width 200 pixels, while having the middle column taking up the remaining space. I noticed that margin-right is completely ignored. I tested out overflow, but that didn't seem to work either. Granted, I might have done the overflow bit wrong. Anyways, here's my test site, relevant CSS, and the HTML.
The current background for the middle column just doesn't do well with scaling, so I'll probably swap it for something else.
Site: http://mnslayer27.webs.com/bgtest.html
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">
<head>
<title>Mnslayer27</title>
<link rel="stylesheet" type="text/css" href="Mnslayer27.css" />
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
</head>
<body>
<iframe src="Main_Links.html" id="ml" frameborder="0" width="100%" height="1808"></iframe>
<div id="left">
<div id="right">
<div id="column2">
<div class="transbox"></div>
<div class="transtext">
<h1>Text~</h1><br />
</div>
sdtfghujikjuhygtfrdsfghjklhkgjhfdsdfghkn
</div>
</div>
</div>
<div id="column3">
<h3>Pictures</h3>
<div id="pics">
<img src="http://i195.photobucket.com/albums/z255/yukina17/letter%20r/rave%20master/Elie.jpg" border="0" width="100%" alt="Elie" title="Elie"></img><br /><br /><br />
<img src="http://mnslayer27.webs.com/Sasuke%20Eternal%20Mangekyou.gif" border="0" width="100%" alt="Sasuke's Eternal Mangekyou Sharingan" title="Sasuke's Eternal Mangekyou Sharingan"></img>
<center><img src="http://mnslayer27.webs.com/Torch.gif" border="0" width="50%" alt="Torch" title="Torch"></img></center><br /><br />
</div>
</div>
CSS:
#left {
//overflow:hidden;
margin-left: 200px;
}
#right {
margin-right:200px;
}
div.transbox {
width:100%;
//width:auto;
height:180px;
margin:0px 0px;
background-color:#ffffff;
border:none;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
#column2 {
position: absolute;
top: 120px;
//left: 200px;
overflow:hidden;
color: #000000;
float:left;
width: 100%;
height: 1688px;
//margin-left: 200px;
//margin-right: 200px;
border: none;
background-image: url("http://i246.photobucket.com/albums/gg106/mnslayer27/Ren-Winamp2.jpg");
background-repeat: repeat-y;
background-attachment: scroll;
background-position: 0% 0%;
}
You can try using absolute position and specify the left and right for the divs instead of using width.
#left {
position: absolute;
left: 0px;
width: 100px;
height: 100%;
background-color: #d0c0c0;
}
#right
{
position: absolute;
right: 0px;
width: 100px;
height: 100%;
background-color: #d0c0c0;
}
#centre
{
position: absolute;
left: 100px;
right: 100px;
height: 100%;
overflow:hidden;
background-color: #a0a0d0;
border: solid 2px black;
margin: 4px;
padding: 4px;
}
This also has the advantage that any added margin,border or padding do not extend the divs making the whole become wider than the 100% of the page.
Heres a simple JSFiddle
hope that helps
Look at my answer here that helped someone with just about the same exact issue. There's a JSFiddle included
Not positive based on your question exactly what you want the final product to look like but based on your three column approach and trying to get your margins to work properly try floating all three of your columns, like so
<!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>Mnslayer27</title>
<link rel="stylesheet" type="text/css" href="Mnslayer27.css" />
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
<style>
div.transbox {
width:100%;
//width:auto;
height:180px;
margin:0px 0px;
background-color:#ffffff;
border:none;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
.column1
{
float: left;
width: 200px;
margin: 0 100px 0 100px;
}
#column2 {
color: #000000;
float:left;
border: none;
background-image: url("http://i246.photobucket.com/albums/gg106/mnslayer27/Ren-Winamp2.jpg");
background-repeat: repeat-y;
background-attachment: scroll;
}
#column3
{
float: right;
width: 200px;
}
</style>
</head>
<body>
<div class="column1">
<iframe src="Main_Links.html" id="ml" frameborder="0" width="100%" height="1808"></iframe>
</div>
<div id="column2">
<div class="transbox"></div>
<div class="transtext">
<h1>Text~</h1><br />
</div>
sdtfghujikjuhygtfrdsfghjklhkgjhfdsdfghkn
</div>
<div id="column3">
<h3>Pictures</h3>
<div id="pics">
<img src="http://i195.photobucket.com/albums/z255/yukina17/letter%20r/rave%20master/Elie.jpg" border="0" width="100%" alt="Elie" title="Elie"></img><br /><br /><br />
<img src="http://mnslayer27.webs.com/Sasuke%20Eternal%20Mangekyou.gif" border="0" alt="Sasuke's Eternal Mangekyou Sharingan" title="Sasuke's Eternal Mangekyou Sharingan"></img>
<center><img src="http://mnslayer27.webs.com/Torch.gif" border="0"alt="Torch" title="Torch"></img></center><br /><br />
</div>
</div>
If you set your div to be display: inline-block; instead of display: block;, it may solve the issue you're having. Be aware that this may have other consequences in your code though. I'd be way of using a solution that involves position: absolute; as well though, because this can get messy when you have other elements interacting with it/each other.
I'm sure there was a method involving box-sizing: border-box; but I can't seem to work it out right now.
Say I have 2 divs next to each other in a container of fixed width. Horizontally next to each other that is. Then say one div is removed, how can i get the other div to fill up the space next to it where the other div was? As in it should expand its width.
Here's a way to do it without Javascript.
I don't think this will work in IE... I've tested it in Chrome, Firefox and Safari, but this might work for you.
Here is a fiddle for it.
CSS:
#container {
width: 400px;
}
#left {
width: 200px;
height: 200px;
background: #ddd;
float: left;
}
#right {
width:100%;
float: right;
height: 200px;
position: relative;
background: #CCC;
}
#left + #right {
width: 200px;
}
Javascript:
function removeElement(divNum) {
var d = document.getElementById('container');
var olddiv = document.getElementById(divNum);
d.removeChild(olddiv);
}
HTML:
<div id="container">
<div id="left"></div>
<div id="right"></div>
<input onclick="removeElement('left')" type="button" value="X"/>
</div>
You can use jQuery to manipulate the CSS properties and visibility. In this example I alter the widths.
You can do it with display: table; but it won't work in IE 7 and below. Here's the code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test div</title>
<style type="text/css">
#container {
width: 400px;
display: table;
}
#row-container {
display: table-row;
}
#left, #right {
display: table-cell;
height: 200px;
}
#left {
background-color: red;
}
#right {
background-color: blue;
}
</style>
</head>
<body>
<div id="container">
<div id="row-container">
<div id="left"></div>
<div id="right"></div>
</div>
</div>
</body>
</html>
I'm learning CSS and so far managed after many many hours to create a simple layout but still dont know how to center things (text,block,whatever) inside a float:left div. Here's the code i just hope someone might be able to help as im gonna go nuts in a very short time!
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
#container {
/* */
border: 1px solid;
/* */
padding-top: 10px;
margin-left:auto;
margin-right:auto;
width: 980px;
height: auto;
}
#content {
display: inline-block;
}
#content .left {
display: inline-block;
border: 1px solid;
padding-left: 5px;
padding-top: 10px;
width:773px;
float:left;
}
#content .right {
display: inline-block;
padding-top: 10px;
width:200px;
float:right;
}
#content .inside-left {
text-align: center;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<div class="left">
<!-- i need every inside-left class center aligned -->
<div class="inside-left">
<table border="1">
<tr>
<td>center align</td>
<td>damn it</td>
</tr>
</table>
</div>
</div>
<div class="right">
test
</div>
</div>
</div>
</body>
edit: oh and why the ** css is so hard to understand? is it just me??
Just a tiny CSS modification makes a huge difference:
Change this:
#content .inside-left {
text-align: center;
margin-left: auto;
margin-right: auto;
}
To this:
#content .inside-left, #content .inside-left > * {
text-align: center;
margin-left: auto;
margin-right: auto;
}
See the difference: http://jsfiddle.net/8JfNF/1/
This CSS selector, #content .inside-left > *, selects all of the direct children (not grandchildren) of the .inside-left and applies the same CSS to them.
CSS is not tough, i think this is simplest logical thing in world of web...try and learn from some good website..
and there is some suggestion for you..
better use class instead of id
always write 4 basic table property width, cellpadding, cellspacing and border
to horizontal centered the things inside a td use text-align:center; to make vertical center write vertical-align:middle
to learn CSS tricks see my bookmarks...this will surely helps u
Here's teh codez:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
html, body
{
margin: 0px;
padding: 0px;
}
#pageContainer {
min-width: 100%;
float: left;
background-color: red;
}
#leftColumn {
float: left;
background-color: lime;
}
#rightColumn {
position: relative;
}
</style>
</head>
<body>
<div id="pageContainer">
<div id="leftColumn">Left column</div>
<div id="rightColumn">Right column</div>
</div>
</body>
</html>
On IE8/Opera/FF everything looks fine. If I take IE8 and turn on IE7 mode (standards compliant), suddenly a horizontal scrollbar appears. Suspiciously it is just as big as the left column. Any ideas?!
Two solutions. On the right column, either:
Remove position: relative if you don't need it.
Or, keep that and add zoom: 1.
This is all about hasLayout.