I'm sure you've heard it before... a div is not centering correctly in IE even though it works perfectly in Chrome and Firefox. I've already researched and tried stuff with text-align and auto margins but have come up empty. I also tried replacing the tags with another div or something else but did not have any positive results. Any insight anyone can offer will be appreciated.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.thumbnails {
background-color:white;
border: solid 1px #000099;
height:120px;
width: 640px;
overflow-y:scroll;
margin-bottom:20px;
position:relative;
padding-top: 10px;
}
#hugeimage {
background-color:white;
border-top: solid 1px #000099;
border-left: solid 1px #000099;
border-right: solid 1px #000099;
height:550px;
width: 640px;
display:table-cell;
vertical-align:middle;
}
#hugeimage a,
#hugeimage img {
margin: 0px;
padding: 0px;
border: 0px;
}
#imageinfo {
background-color:white;
border-left: solid 1px #000099;
border-right: solid 1px #000099;
width: 640px;
}
body {
background-color: #99ccff;
text-color: #000099;
}
</style>
</head>
<body>
<h3 align="center">Ship Detail</h3>
<center>
<div class="filedrop">
<div id="hugeimage">
<a href="#" target="_blank">
<img src="images/spin/wait30.gif" />
</a>
</div>
<div id="imageinfo"></div>
<div class="thumbnails"></div>
</div>
</center>
</body>
</html>
I've removed data from the divs. This bare-bones markup still has the hugeimage and imageinfo divs left-aligned in IE but not in chrome/ff.
Remove the <center> tags and the align="center", and add a wrapper <div id="content"> around all your content. Then add this CSS style.
#content {
width: 960px;
margin: 0 auto;
}
Example:
<div id="content">
<h3>Ship Detail</h3>
<div class="filedrop">
<div id="hugeimage">
<a href="#" target="_blank">
<img src="images/spin/wait30.gif" />
</a>
</div>
<div id="imageinfo"></div>
<div class="thumbnails"></div>
</div>
</div>
Here is your solution:
See the working demo
I had the same issue while trying to center a loading modal box in IE. Removing
display: table; did the trick. Maybe this could help someone else.
Related
For some reason, the first word of my paragraphs keep appearing above my blockquotes. My code structure looks something like this:
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<style>
blockquote {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0px;
margin-right: 0px;
}
p {
width: 640px;
}
<!-- CSS style to put div side by side -->
<style type="text/css">
.container {
width:600px;
height:190px;
}
#ab-box {
float:left;
width:360px;
height:160px;
background-color:white;
}
#tb-box {
float:left;
width:180px;
height:160px;
background-color:white;
}
</style>
</head>
<body>
<div class="container">
<div id="ab-box">
<blockquote style="border: 2px solid #666; padding: 10px; background-color: #fff; width: 240px"> <b>AUTHOR:</b>
<br><br>{{NAME}}</blockquote>
</div>
<div id="tb-box">
<blockquote style="border: 2px dotted #666; padding: 10px; background-color: #fff; width: 240px"> <b>PUBLISHED:</b>
<br><br>December 1993</blockquote>
</div>
</div>
<div>
<p>Dear *|SUBSCRIBER|* - <br /><br />We're happy to have you onboard!</p>
</div>
</body>
This isn't a perfect representation... But the word "Dear" in the paragraph below keeps appearing above the blockquotes for some reason. The rest of the paragraph moves just fine and is perfectly in line - it's just that one word. And if I duplicate the paragraph, I get the same issue. Please assist; thank you in advance!
close your "style" tag
<style>
blockquote {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0px;
margin-right: 0px;
}
p {
width: 640px;
}
</style>
Hello and welcome to StackOverflow. Your code has two errors: first of all, you opened the style tag two times, firstly after the head open and then after the comment
<!-- CSS style to put div side by side -->
Second, the comment is an Html comment, not a Css one: inside Style tags you cant use html comments
<!-- blabla -->
Instead, you have to write them like this
body {
background: red;
height: 100%;
/*
width: 100%;
display: flex;
Multi line comment
*/
}
Here you can find a more detailed example.
https://www.w3schools.com/css/css_comments.asp
Cheers!
This question already has answers here:
Why top margin of html element is ignored after floated element?
(10 answers)
Closed 2 years ago.
So I applied clear:left to a div and tried changing its top margin but it did not affect anything. Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>Float</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.div1 {
border: 2px solid black;
float: left;
}
.div2 {
clear: left;
border: 2px solid red;
width: 120px;
height: 120px;
margin-top: 320px; /* Why is margin not working?*/
}
</style>
</head>
<body>
<div class="div1">This is suppose to be a first div</div>
<div class="div2">Div2</div>
</body>
</html>
Here is the result :
Now the problem is that the result is same even if I add or remove the top margin. It would be great if you can show me the right answer and also explain why this is happening.
Use of one container like this :
<div class="con" style="overflow: hidden">
<div class="div1">This is suppose to be a first div</div>
</div>
.div1 {
border: 2px solid black;
float: left;
}
.div2 {
border: 2px solid red;
width: 120px;
height: 120px;
margin-top: 100px;
}
<div class="con" style="overflow: hidden">
<div class="div1">This is suppose to be a first div</div>
</div>
<div class="div2">Div2</div>
I have a simple HTML page in which i want to align Div vertically middle of another div. There is one way of using positioning concept. But i want to use vertical-align property.
Below is my html and css files.
What i am trying to do is to place <div class='plink'> vertically centered which is inside of
<div class='tiles'>
.plink{
height: 100%;
vertical-align: middle;
}
is also not working
index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="/favicon.icon" type="image/jpeg">
<link rel="stylesheet" href="style.css" type="text/css">
<title>Some title</title>
</head>
<body>
<main>
<h1>Some heading</h1>
<hr>
<div id="tilescontainer">
<div class="tiles" id="tile_1">
<div class="plink">some text</div>
</div>
<div class="tiles" id="tile_2">
<div class="plink">some text</div>
</div>
<br>
<div class="tiles" id="tile_3">
<div class="plink">some text</div>
</div>
<div class="tiles" id="tile_4">
<div class="plink">some text</div>
</div>
</div>
</main>
</body>
</html>
style.css
/*Main style sheet*/
main{
height: 600px;text-align: center;
}
a{
text-decoration: none;
}
/*tilescontainer*/
#tilescontainer{
text-align: center;position: relative;top: 10%;
}
/*tilescontainer*/
/*tiles*/
.tiles{
display: inline-block;height: 200px;width: 200px;box-shadow: 2px 2px 2px #808080;margin: 5px;text-align: center;vertical-align: middle;
}
/*tile_1*/
#tile_1{
background-color: #ff8000;
}
#tile_1:hover{
background-color: #808080;
}
/*tile_1*/
/**/
#tile_2{
background-color: #00aced;
}
#tile_2:hover{
background-color: #808080;
}
/**/
/**/
#tile_3{
background-color: #82858a;
}
#tile_3:hover{
background-color: #808080;
}
/**/
#tile_4{
background-color: ;
}
#tile_4:hover{
background-color: #808080;
}
span{
border: 2px solid;
}
/*tiles*/
Here at w3schools example is give i tried this link
Have you tried working with the table display modes?
When I am doing css styling I find vertical alignment to work well with these technique.
Example:
.title{
display: table;
}
.plink{
display:table-cell;
height: 100%;
vertical-align: middle;
}
I think what you want to do with the vertical-align property is not what it was designed to do and therefor not possible. This article explains why:
Vertical Alignment
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.
I am trying to make a simplistic layout for my website.
I want this navigation bar to fill the screen horizontally but the page content to be centered.
I have managed to achieve this, but it breaks when the content gets bigger than its predefined width.
I have only a few pages where reports and tables push the design wider than its default so would like these pages to expand nicely.
Currently the moment my content gets to wide, it hugs the left of its container but pushes the right margin out.
I would like this to push the left and right margins out equally and remain in the center.
How can I achieve this? Here is my current 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" xml:lang="en" lang="en">
<head>
<style>
body{margin-top: 10; margin-bottom: 0; margin-left: 0; margin-right: 0; padding:0 0 0 0;}
#main{width: 100%; margin: auto auto;min-height:100%;}
#header{width: 740px;position:relative;margin: auto auto;border: 1px solid #000;border-bottom: none;background-image: url('/resources/images/General/hdr_bg.png');}
#nav{width: 100%; text-align: center; height: 31px; margin: auto auto;background-color:#c3daf9;border-top:1px solid #000;border-bottom:1px solid #000;}
#content{width: 740px;position:relative;margin: auto auto; padding-top: 10px;}
#footer{position: absolute; font-size: 11px; color: Gray; border-top: 1px solid #303030; bottom: 0px; width: 100%;}
</style>
</head>
<body>
<div id="main">
<div id="header">LOGO</div>
<div id="nav">LINK | LINK | LINK</div>
<div id="content">
here is some contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
</div>
<div id="footer">footer content</div>
</div>
</body>
</html>
I have simulated the content getting wider by making a really really long word.
In my site this would typically be a report in an HTML table.
Any help will be greatly appreciated. Thanks!
edit:
this isn't just about text which can be wrapped or broken.
Consider replacing the "contentcontentcontent" above with a table that is wider than its parent div:
<table border="1" width="800px"><tr><td>here is some content</td></tr></table>
This table now touches the left border of the content div, but pushes out the right border of the content div. I want it to push out both borders equally and remain in the center
Here's how to do it (Scroll to MidiMagic's post): http://www.daniweb.com/forums/thread57605.html
You need to wrap words in div#content.
You can use something like this:
div#content {
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -pre-wrap; /* Opera 4 - 6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* CSS3 */
word-wrap: break-word; /* IE 5.5+ */
}
Someone who is not a member on this site managed to solve this problem for me.
What we did is set the content div to 100%, then place a div inside this surrounding the content with align="center"
<div align="center"><table border="1" width="1000px" ><tr><td>here is some content</td></tr></table></div>
The entire solution:
<!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" xml:lang="en" lang="en">
<head>
<style>
body{margin-top: 10; margin-bottom: 0; margin-left: 0; margin-right: 0; padding:0 0 0 0;}
#main{width: 100%; margin: auto auto;min-height:100%;}
#header{width: 740px;position:relative;margin: auto auto;border: 1px solid #000;border-bottom: none;background-image: url('/resources/images/General/hdr_bg.png');}
#nav{width: 100%; text-align: center; height: 31px; margin: auto auto;background-color:#c3daf9;border-top:1px solid #000;border-bottom:1px solid #000;}
#content{width: 100%;position:relative;margin: auto auto; padding-top: 10px;border: solid 1px;}
#footer{position: absolute; font-size: 11px; color: Gray; border-top: 1px solid #303030; bottom: 0px; width: 100%;}
</style>
</head>
<body>
<div id="main">
<div id="header"><br/>LOGO<br/></div>
<div id="nav">LINK | LINK | LINK</div>
<div id="content">
<div align="center"><table border="1" width="1000px" ><tr><td>here is some content</td></tr></table></div>
</div>
<div id="footer">footer content</div>
</div>
</body>