Hi everybody. I am learing CSS, so bear with me if I ask some dumb questions...
I am working on a new site (Some of you have already seen this, but now I'm redoing it... again) and float is driving me insane. I've got two divs, both of equal height. The left div I "floated" left. The one on the right just won't go in place. I viewed it in IE6 and in FF 1.0.6 and both show it incorrectly. Attached is a small zip folder in which this problematic page is contained.
Just FYI, I use an external stylesheet.
Thanks everybody!
-Sunny GAttached is a small zip folder in which this problematic page is contained.Nope.Sometimes it's best to absolutely position the left one and use a left margin to keep the right one off the top of the left one. That way the right one can still be liquid.Oops...Sometimes it's best to absolutely position the left one and use a left margin to keep the right one off the top of the left one. That way the right one can still be liquid.
How do I do that? Won't it not work if I center the page? How do I do that?Hi -
I think when floating things, it's best to remember a few points:
- Consider the width of the container they're in.
- Set each one's width in % or px.
- Be sure to clear:both; in the next element's css.
Kind of like:
<div class="contain">
<div class="main">
<p>
</p>
</div>
<div class="left">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="foot">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"..." title=""></a>
</div>
</div>
With css:
body{
width:100%; height:100%; text-align:center; margin:0 auto;...}
div.contain{
width:90%; margin:0 auto;}
div.main{
width:45%; float:right; margin:0 auto; padding:5%;}
div.left{
width:45%; float:right; margin:0 auto; padding:5%;}
div.foot{
width:100%; clear:both; margin:0 auto;}
Good luck,
ElBut when I float the main div right and the left div left, the right div goes underneath the left div.
clear:both;
What does that do/mean?Put the content in a wrapper div for centering purposes. Here's a quicky example with content removed to save space. Slap some lorem ipsum into the two content divs.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<title>Conforming HTML 4.01 Template</title>
<style type="text/css">
#wrap {
width:85%;
margin: 1em auto;
border: 1px dotted #999;
}
#left {
width: 10em;
float:left;
background: #ffe;
}
#main {
margin: 0 1em 0 11em;
}
</style>
</head>
<body>
<div id="wrap">
<div id="left">
<p>Throw some lorem ipsum in here.</p>
</div>
<div id="main">
<p>Try som ut enim ad minim veniam in this one</p>
</div>
<div style="clear:both"></div>
</div>
</body>
</html>Yeah, I've already got it in a container div (#MAIN_CONTAIN).
I still don't know what to do fix the weird left and right divs.
Just FYI, it looks OK in IE6 but not OK in FF (1.0.6)Are you sure its not a width issue? Sometimes IE is adding a bit of a margin to an element causing the floated elements to not fit side-by-side within the container. FF doesn't do that, so they fit. I've had that happen.
You might try arbitrarily narrowing one of the floated elements and see if that solves the problem.Actually, my problem is that it works in IE but not in FF. I think I should absolutely position both divs, but I don't know how--well, I kinda know but it does not work for me.How do absolutely position things?Put margin:auto; in the body and margin-left:100px; in the main.OK, I didn't do that, but I got it to work. I'm not sure what I did, but it worked!
I'll see if I can get a zip folder attached later.
Thanks!OK, I didn't do that, but I got it to work. I'm not sure what I did, but it worked!Ok, your pentence is to sit down and listen to Stevie Wonder do Superstition for an hour.Sometimes IE is adding a bit of a margin to an element causing the floated elements to not fit side-by-side within the container. FF doesn't do that, so they fit.
This is exactly the problem i've got, and i've spent hours trying to figure it out:
pop this into a blank document and see what i mean:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
#MainGraphicFrame{
padding: 0;
margin: 0;
margin-left: 13em;
height: 170px;
background-color:#C6F0CE;
}
#SubGraphicFrame{
overflow:hidden;
width: 13em;
float:left;
height: 170px;
padding: 0;
background-color:#FFACF6;
</style>
</head>
<body>
<div id = "SubGraphicFrame"></div>
<div id = "MainGraphicFrame"></div>
</body>
</html>
What i need is for the two boxes to be touching, but as you say, for some reason IE adds like a little space between the two boxes, so they're not in contact. To see how it should look, view the page in firefox, and thats exactly what i need to happen in IE.
Is there any work around for this?
What I wanted was for the two boxes to be 10px apart. The left div overlapped the right div because the right div wouldn't except float:right or something. Well, I got it to work though. I'll post it soon.... very soon. (next few hours)Hi -
You still haven't put them in a 'container' div and still haven't set a width for each that would allow 10px in between and fit them into the container.
[IE adds padding to it's total width amt., so watch that...]
ElOK, I got it posted. Yes, all the visible divs are in a div container.
In IE there is a large space between the menu and main div, but I'm OK
with that. In FF the space is exactly 10px, just as I wanted it.
Thanks for your help guys!
<!-- w --><a class="postlink" href="http://www.team847.com/New">www.team847.com/New</a><!-- w -->
I am working on a new site (Some of you have already seen this, but now I'm redoing it... again) and float is driving me insane. I've got two divs, both of equal height. The left div I "floated" left. The one on the right just won't go in place. I viewed it in IE6 and in FF 1.0.6 and both show it incorrectly. Attached is a small zip folder in which this problematic page is contained.
Just FYI, I use an external stylesheet.
Thanks everybody!
-Sunny GAttached is a small zip folder in which this problematic page is contained.Nope.Sometimes it's best to absolutely position the left one and use a left margin to keep the right one off the top of the left one. That way the right one can still be liquid.Oops...Sometimes it's best to absolutely position the left one and use a left margin to keep the right one off the top of the left one. That way the right one can still be liquid.
How do I do that? Won't it not work if I center the page? How do I do that?Hi -
I think when floating things, it's best to remember a few points:
- Consider the width of the container they're in.
- Set each one's width in % or px.
- Be sure to clear:both; in the next element's css.
Kind of like:
<div class="contain">
<div class="main">
<p>
</p>
</div>
<div class="left">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="foot">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"..." title=""></a>
</div>
</div>
With css:
body{
width:100%; height:100%; text-align:center; margin:0 auto;...}
div.contain{
width:90%; margin:0 auto;}
div.main{
width:45%; float:right; margin:0 auto; padding:5%;}
div.left{
width:45%; float:right; margin:0 auto; padding:5%;}
div.foot{
width:100%; clear:both; margin:0 auto;}
Good luck,
ElBut when I float the main div right and the left div left, the right div goes underneath the left div.
clear:both;
What does that do/mean?Put the content in a wrapper div for centering purposes. Here's a quicky example with content removed to save space. Slap some lorem ipsum into the two content divs.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<title>Conforming HTML 4.01 Template</title>
<style type="text/css">
#wrap {
width:85%;
margin: 1em auto;
border: 1px dotted #999;
}
#left {
width: 10em;
float:left;
background: #ffe;
}
#main {
margin: 0 1em 0 11em;
}
</style>
</head>
<body>
<div id="wrap">
<div id="left">
<p>Throw some lorem ipsum in here.</p>
</div>
<div id="main">
<p>Try som ut enim ad minim veniam in this one</p>
</div>
<div style="clear:both"></div>
</div>
</body>
</html>Yeah, I've already got it in a container div (#MAIN_CONTAIN).
I still don't know what to do fix the weird left and right divs.
Just FYI, it looks OK in IE6 but not OK in FF (1.0.6)Are you sure its not a width issue? Sometimes IE is adding a bit of a margin to an element causing the floated elements to not fit side-by-side within the container. FF doesn't do that, so they fit. I've had that happen.
You might try arbitrarily narrowing one of the floated elements and see if that solves the problem.Actually, my problem is that it works in IE but not in FF. I think I should absolutely position both divs, but I don't know how--well, I kinda know but it does not work for me.How do absolutely position things?Put margin:auto; in the body and margin-left:100px; in the main.OK, I didn't do that, but I got it to work. I'm not sure what I did, but it worked!
I'll see if I can get a zip folder attached later.
Thanks!OK, I didn't do that, but I got it to work. I'm not sure what I did, but it worked!Ok, your pentence is to sit down and listen to Stevie Wonder do Superstition for an hour.Sometimes IE is adding a bit of a margin to an element causing the floated elements to not fit side-by-side within the container. FF doesn't do that, so they fit.
This is exactly the problem i've got, and i've spent hours trying to figure it out:
pop this into a blank document and see what i mean:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
#MainGraphicFrame{
padding: 0;
margin: 0;
margin-left: 13em;
height: 170px;
background-color:#C6F0CE;
}
#SubGraphicFrame{
overflow:hidden;
width: 13em;
float:left;
height: 170px;
padding: 0;
background-color:#FFACF6;
</style>
</head>
<body>
<div id = "SubGraphicFrame"></div>
<div id = "MainGraphicFrame"></div>
</body>
</html>
What i need is for the two boxes to be touching, but as you say, for some reason IE adds like a little space between the two boxes, so they're not in contact. To see how it should look, view the page in firefox, and thats exactly what i need to happen in IE.
Is there any work around for this?
What I wanted was for the two boxes to be 10px apart. The left div overlapped the right div because the right div wouldn't except float:right or something. Well, I got it to work though. I'll post it soon.... very soon. (next few hours)Hi -You still haven't put them in a 'container' div and still haven't set a width for each that would allow 10px in between and fit them into the container.
[IE adds padding to it's total width amt., so watch that...]
ElOK, I got it posted. Yes, all the visible divs are in a div container.
In IE there is a large space between the menu and main div, but I'm OK
with that. In FF the space is exactly 10px, just as I wanted it.
Thanks for your help guys!
<!-- w --><a class="postlink" href="http://www.team847.com/New">www.team847.com/New</a><!-- w -->