Stuck - CSS
Can anyone tell me why #right extends out the bottom of #main in Firefox.
#main {
width: 720px;
height: 300px;
border: 1px solid #000000;
}
#left {
float: left;
width: 300px;
max-height: 300px;
margin: 0;
padding: 0;
}
#right {
position: relative;
float: left;
text-align: left;
width: 400px;
height: 280px;
min-height: 280px;
margin: 0 0 0 10px;
padding: 0px 0px 10px 0px;
}<div id="main">
<div id="left"><img src="image.jpg" width="300" height="300" border="0" alt=""></div>
<div id="right">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>Text.</p>
<h2>Heading 2</h2>
<p>Text.</p>
<h2>Heading 2</h2>
<p>Text.</p>
<h2>Heading 2</h2>
<p>Text.</p>
<h2>Heading 2</h2>
<p>Text.</p>
<h2>Heading 2</h2>
<p>Text.</p>
<h2>Heading 2</h2>
<p>Text.</p>
<h2>Heading 2</h2>
<p>Text.</p>
<h2>Heading 2</h2>
<p>Text.</p>
<h2>Heading 2</h2>
<p>Text.</p>
<h2>Heading 2</h2>
<p>Text.</p>
<h2>Heading 2</h2>
<p>Text.</p>
<h2>Heading 2</h2>
<p>Text.</p>
</div>
</div>There are no stupid questions, only stupid people!
slickfish
web site design, production and maintenance for small business
www.justapickle.com
Blogging for the socially conscious
Renegade posted this at 10:14 — 2nd May 2005.
He has: 3,022 posts
Joined: Oct 2002
You had two problems:
1, You had set a height to #main and #right, if you want things to fit properly inside something, don't set a height to them.
2, Since you have floated everything, you need a block level element after you block of floats to make things look "right." This can be done by making an invisible DIV and setting "clear:both;" to it in the CSS.
<!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 type="text/css">
#main {
width: 720px;
border: 1px solid #000000;
}
#left {
float: left;
width: 300px;
max-height: 300px;
margin: 0;
padding: 0;
}
#right {
position: relative;
float: left;
text-align: left;
width: 400px;
min-height: 280px;
margin: 0 0 0 10px;
padding: 0px 0px 10px 0px;
}
</style>
<title></title>
</head>
<body>
<div id="main">
<div id="left"><img src="image.jpg" width="300" height="300" border="0" alt=""></div>
<div id="right">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>Text.</p>
<h2>Heading 2</h2>
<p>Text.</p>
<h2>Heading 2</h2>
<p>Text.</p>
<h2>Heading 2</h2>
<p>Text.</p>
<h2>Heading 2</h2>
<p>Text.</p>
<h2>Heading 2</h2>
<p>Text.</p>
<h2>Heading 2</h2>
<p>Text.</p>
<h2>Heading 2</h2>
<p>Text.</p>
<h2>Heading 2</h2>
<p>Text.</p>
<h2>Heading 2</h2>
<p>Text.</p>
<h2>Heading 2</h2>
<p>Text.</p>
<h2>Heading 2</h2>
<p>Text.</p>
<h2>Heading 2</h2>
<p>Text.</p>
</div>
<div style="position:relative;clear:both;"></div>
</div>
</body>
</html>
Hope that helped
Assassin posted this at 22:25 — 2nd May 2005.
He has: 77 posts
Joined: Apr 2005
if that doesn't work you might want to try the #right id in a span tag rather than a div.
syawilim posted this at 00:04 — 7th May 2005.
He has: 93 posts
Joined: Jun 2004
It is the main div that I am having trouble with. The left and right divs are nested inside it but it has no height setting but when I put a lot of text into the right div it extends out the bootom of the main div. It works fine in IE but Firefox is the problem.
There are no stupid questions, only stupid people!
slickfish
web site design, production and maintenance for small business
www.justapickle.com
Blogging for the socially conscious
Renegade posted this at 05:06 — 7th May 2005.
He has: 3,022 posts
Joined: Oct 2002
What? Did you try my code? I viewed it in Firefox and IE. It works just fine.
syawilim posted this at 00:59 — 11th May 2005.
He has: 93 posts
Joined: Jun 2004
Sorry I had been looking at it for too long and just didn't see it. You were right clear:both after the end of the right div. I had already tryed this many times without achieving the desired result, but I must have been dropping the tag in the wrong spot.
Thanks for your help.
There are no stupid questions, only stupid people!
slickfish
web site design, production and maintenance for small business
www.justapickle.com
Blogging for the socially conscious
JeevesBond posted this at 11:54 — 11th May 2005.
He has: 3,956 posts
Joined: Jun 2002
Glad to hear your problem has been sorted... Floats can be very confusing!
One other thing: You shouldn't really refer to elements as by their positioning or formatting, doing this negates the purpose of XHTML/CSS and what happens if one of those divs is positioned along the top of the page? As soon as you make a change all your id's need to be changed - a nightmare!
a Padded Cell our articles site!
syawilim posted this at 14:32 — 11th May 2005.
He has: 93 posts
Joined: Jun 2004
I generally don't name id's by position, in this case it just made it easy to understand.
But I did learn this the hard way, lucky it was only a small site.
There are no stupid questions, only stupid people!
slickfish
web site design, production and maintenance for small business
www.justapickle.com
Blogging for the socially conscious
JeevesBond posted this at 23:24 — 11th May 2005.
He has: 3,956 posts
Joined: Jun 2002
That's ok then, sorry for lecturing!
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.