I'm having a problem with floating divs and IE7. For example, the following HTML code:
<!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' lang='en' xml:lang='en'>
<head>
<title>IE Float Test</title>
<style>
.container {
width: 200px;
background: #ddd;
overflow: hidden;
}
.item {
float: left;
padding: 5px;
background: #eee;
margin: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">This is a item</div>
<div class="item">This is another item</div>
<div class="item">Last item</div>
</div>
</body>
</html>
Give's the following in chrome (plus other major browsers):
But, the following in IE7:
How do I get IE7 to move the item div to the next vertical position if it is too wide?
Many thanks, John.
Adding white-space: nowrap to .item works: http://jsbin.com/ifexuf/2
Is that acceptable?
You need to add min-width property to the .item
If you want the items stacked, there is no need to "float:left" in your ".item" CSS style. Block level elements like <div> appear stacked by default.
Related
I am a beginner to HTML and CSS. i have some knowledge of javascript, not jquery and also responsive design.
So I want to make a 3 column grid aligned to center and each with 33.33% width. Also a little space between each horizontally and some space on either side. but i can seem to align it to the center.
here is my html. I also want it to be Responsive. It should be reduced to two columns then to one and stuff like that. How could i achieve this?
Here is my 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>
<link rel="stylesheet" href="Home.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div class="layout" align="center">
<div class="success"> </div>
<div class="success"> </div>
<div class="success"> </div>
<div class="success"> </div>
<div class="success"> </div>
<div class="success"> </div>
<div class="success"> </div>
</div>
</body>
</html>
CSS
#charset "utf-8";
/* CSS Document */
.success {
display:inline-block;
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin-top: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center
}
.success li:last-child {
float: none;
width: auto;
}
.layout {
width:75%;
}
You need to start again.
Basically your html structure needs to reflect your 3 column layout. Usually this is achieved with <div> tags.
so something like:
<div id="content">
<div id="contentleft">
your first column content is here
</div>
<div id="contentcenter">
the stuff for the middle goes here
</div>
<div id="contentright">
etc. etc. etc.<br>
...
</div>
</div>
then your .css can do something along the following lines:
#content {
width: 900px;
}
#contentLeft {
width:33%;
float:left;
}
#contentcenter {
width:33%;
padding:1%;
float:left;
}
#contentright {
width: 33%;
float:right;
}
I am trying to center a div. This is my code:
<!Doctype Html>
<html>
<head>
<title>title</title>
<style type="text/css">
* {
text-align: left;
}
</style>
</head>
<body>
<div id="container" style="width: 500px; margin-left: auto; margin-right: auto; text-align: center;">
<div id="content" style="text-align: center;">
<p>Beispiel: DIV Container horizontal zentrieren.</p>
</div>
</div>
</body>
</html>
It isn't completely center, because I set in the CSS reset that text-align is left. If I remove this line everything is fine. Why is text-align: center; of the div with the id #content not overriding the CSS reset?
You need !important to overwrite that (leaving the p tag)
#content{margin:0 auto; background:red; width: 500px; text-align: center !important;}
DEMO 1
Or else you can write css for p tag
#content p{text-align: center }
DEMO 2
Try this
Key point is
margin: 0 auto
Even better, less markup:
<!Doctype Html>
<html>
<head>
<title>title</title>
<style type="text/css">
#content{
width: 500px;
margin:0 auto;
}
#content p {
text-align:center;
}
</style>
</head>
<body>
<div id="content">
<p>Beispiel: DIV Container horizontal zentrieren.</p>
</div>
</body>
</html>
In most cases it's better to prevent useing ìnline-styles`. Also move your styles in an seperate css file for a better maintainability.
In HTML * tag means its consider all tags strictly the property as you mention in between, you need to little change your style please visit link
I am trying to design a navigation menu that is centered that sits within a div that spans 100% width of the screen. I have my navigation divs within a parent div called navigation, and that parent div is within a navigation container. I felt this was necessary to have a centered navigation within this 100% width parent div.
The problem is that I am not having luck getting the parent div to expand with the appropriate padding I give to the navItem divs. Sorry if this is kind of confusing, thanks for any advice offered.
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>
MC Machine Test
</title>
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<div class="top">
</div>
<div class="navContainer">
<div class="navigation">
<div class="navItem">Home</div>
<div class="navItem">Products</div>
<div class="navItem">Facility</div>
<div class="navItem">Photo Gallery</div>
<div class="navItem">Request a Quote</div>
<div class="navItem">Contact Us</div>
</div>
</div>
<div class="mainSection">
</div>
</body>
</html>
Here is the CSS.
.navContainer
{
width:100%;
background-color:#ffffff;
color:#333333;
border-bottom:solid 1px #333333;
}
.navigation
{
border:0px 1px 1px 0px solid #333333;
width:680px;
margin-left:auto;
margin-right:auto;
}
.navItem
{
padding:20px;
border-right:1px solid #cccccc;
display:inline;
}
Don't use DIVs to build menus. Use styled unordered lists.
See: I love lists.
I may be mistaken here but I think you can't add top/bottom padding to inline elements. If I understood what you want to do correctly, you could define the display as block and use floats to make them stand next to each other as opposed to below each other.
.navItem
{
padding:20px;
border-right:1px solid #cccccc;
display:block;
float:left;
}
I've got a parent div floated left, with two child divs that I need to float right.
The parent div should (if I understand the spec correctly) be as wide as needed to contain the child divs, and this is how it behaves in Firefox et al.
In IE, the parent div expands to 100% width. This seems to be an issue with floated elements that have children floated right. Test page:
<!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" lang="en" xml:lang="en">
<head>
<title>Float test</title>
</head>
<body>
<div style="border-top:solid 10px #0c0;float:left;">
<div style="border-top:solid 10px #00c;float:right;">Tester 1</div>
<div style="border-top:solid 10px #c0c;float:right;">Tester 2</div>
</div>
</body>
</html>
Unfortunately I can't fix the width of the child divs, so I can't set a fixed width on the parent.
Is there a CSS-only workaround to make the parent div as wide as the child divs?
Here's a solution which makes inline-block work on IE6 as at http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/ to make the elements behave more like right-floated <div>s:
<!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" lang="en" xml:lang="en">
<head>
<title>Float with inline-block test</title>
<style type="text/css">
.container {
border-top: solid 10px green;
float: left;
}
.tester1,
.tester2 {
float: right;
}
.tester1 {
border-top: solid 10px blue;
}
.tester2 {
border-top: solid 10px purple;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
.container {
text-align: right;
}
.tester1,
.tester2 {
float: none;
zoom: 1; display: inline;/* display: inline-block; for block-level elements in IE 7 and 6. See http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/ */
}
</style>
<![endif]-->
</head>
<body>
<div class="container">
<div class="tester1">Tester 1</div>
<div class="tester2">Tester 2</div>
</div>
</body>
</html>
I came up with a solution using text-align: right and display: inline.
Try this:
<div style="border-top:solid 10px #0c0; float: left;">
<div style="margin-top: 10px; text-align: right;">
<div style="border-top:solid 10px #c0c; display: inline;">Tester 2</div>
<div style="border-top:solid 10px #00c; display: inline;">Tester 1</div>
</div>
</div>
Notice I had to switch the order of the "tester" boxes in the markup to show up in the same way as your example. I think there is an alternative that margin-top on the new container, but I don't have time looking into right now.
If you want cleaner styling for all other browsers try this:
<div style="border-top:solid 10px #0c0; float: left;">
<div style="float: right;">
<div style="border-top:solid 10px #c0c; float: left;">Tester 2</div>
<div style="border-top:solid 10px #00c; float: left;">Tester 1</div>
</div>
</div>
There are some different issues that can come up when you want to layout stuff around those boxes. However, I think those issues will be much easier to solve than this one.
Hope this was helpful for you.
I couldn't come up with a CSS-only solution that fits your requirements, but if you want to use a JavaScript solution, maybe the following code can help? I did not alter the style of the divs, I only added the IDs main, sub1, and sub2 to your divs.
var myWidth = document.getElementById('sub1').offsetWidth + document.getElementById('sub2').offsetWidth;
document.getElementById('main').style.width = myWidth;
I had the same problem and solved in by positioning the child element (which I wanted to float right) with position:absolute and right:0. I gave the parent element enough right padding to make room for the child element... Worth a shot, might not work for all applications!
What about using a single-cell table instead of the outer div? It may need some more work to have everything aligned properly, but the table doesn't expand.
Something you could start with is this:
<DIV style="BORDER: #0c0 10px solid; FLOAT: left; MARGIN-LEFT: 100%;">
<DIV style="BORDER: #00c 10px solid;FLOAT: right;">
Tester 1
</DIV>
<DIV style="BORDER: #c0c 10px solid;FLOAT: right;">
Tester 2
</DIV>
</DIV>
The result of that seems to be at least in the ballpark of what you're looking for. Obviously, you'd want to tweak it for your needs, and probably add some css logic to only apply it to browser < IE 7.
If that's not exactly what you're looking for, try playing with some negative margins.
Firstly, why aren't you using inline styles?
I'd use this to target IE with a separate css file:
<!--[if lt IE 7]>
<link rel="stylesheet" href="ie6.css" type="text/css" />
<![endif]-->
I know this isn't a direct question, but IE is ALWAYS a pain to deal with! Most designers/developers that I know will make a totally new stylesheet for IE.
A very hacky but a CSS only solution that works okay in IE, chrome and FF.
I took kaba's solution - but the problem was, it works okay in IE but all the other browsers show a 4px space between the 2 child divs. The space remains as 4px even if the content on both the divs expand. So to fix that I've used IE conditional statements. I doesn't look like the best code in the world but it gets the job done.
<!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" lang="en" xml:lang="en">
<head>
<title>Float test</title>
</head>
<body>
<div style="border-top:solid 10px #0c0; float: left;">
<div style="border-top:solid 10px #00c; text-align: right;">
<div style="border-top:solid 10px #c0c; display: inline;">Tester2</div>
<div style="border-top:solid 10px #00c; display: inline;margin-left:-4px">
<!--[if gte IE 5]>
<div style="border-top:solid 10px #00c; display: inline;margin-left:4px">
<![endif]-->
Tester1
<!--[if gte IE 5]>
</div>
<![endif]-->
</div>
</div>
</div>
</body>
</html>
even after many lines i've written in css and html, the css-behaviour still manages to surprise me - in a bad way.
I was putting together a sample site for a friend to show him how he could build his layout,
but Firefox 3.0.5 and IE8 create margins between my #header, #content, and #footer-divs out of nowhere. If i switch in IE7 Mode, the margins disappear.
CSS:
html, body {
background-color: #fff;
margin: 0;
padding: 0;
width: 100%;
}
#page {
background-image: url('bg_gradiant.png');
background-repeat: repeat-y;
width: 950px; /* 770px + 2 * 90px; */
margin: 0 auto;
padding-left: 90px;
}
#header {
width: 770px;
margin: 0;
padding: 0;
}
#header #row1 {
background-color: #9ab3ba;
height: 50px;
}
#header #row2 {
background-color: #517279;
height: 50px;
}
#content {
width: 770px;
background-color: #d7e9ed;
}
#footer {
background-color: #5eb6cc;
width: 770px;
height: 150px;
}
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" href="./style.css" />
<title>Test</title>
</head>
<body>
<div id="page">
<div id="header">
<div id="row1"></div>
<div id="row2"></div>
</div>
<div id="content">
<p style="height: 600px">Beware of the Content</p>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
You can view this page here: https://codepen.io/lx-s/pen/eRrOpL
Browsing through the IE Developer Tools and Firebug showed me that they were no default-margin values set for these div's, but as one can see, they are there.
Hope you can give me a hint how to get rid of them - it's seriously driving me crazy.
Thanks in advance!
Add the following to your stylesheet:
* {
margin: 0;
}
It's not the DIV but the P tag that has the margin set by default. I tested setting it to 0 and the space disappeared.
The margins are on the p tag in the #content div
Hope this helps you a little
You need to use a reset css. You should do this on every Web page/site you develop. A good reset CSS will remove many of the default settings and make cross-browser look and feel much less painless.
There are several of these around such as Eric Meyer's or the Yahoo UI Reset CSS.
When I've seen this before, I've added a padding-bottom:1px to the bottom of the containing DIV so that I can keep the margins on the Paragraphs
Hope that helps