| View Question |
|
|
 | ||
|
| Subject:
CSS display:inline problem with firefox
Category: Computers > Programming Asked by: jtc_333-ga List Price: $25.00 |
Posted:
06 Dec 2005 23:06 PST
Expires: 05 Jan 2006 23:06 PST Question ID: 602501 |
Hello, I am trying to get this CSS code to work on Firefox. Currently the code works on IE 6. Basically I want these 2 Divs to be side by side if there is enough room on the browser. They need to be centered and auto space themselves. When you resize the window width small enought the 2 Divs then stack on top of each other and are still centered after stacking. I know this will work if you take the inner Divs out and just use the images but I need there to be 2 Divs inside the Main Div so I can add text and other objects. Like I said this all works in IE but in FireFox the display:Inline seems to be killing the width settings. Need it to function like it does in IE for Firefox. Hopefully someone can solve this : ) | |
|
| ||
|
| There is no answer at this time. |
| ||
|
| Subject:
Re: CSS display:inline problem with firefox
From: k8lizard-ga on 07 Dec 2005 16:27 PST |
Hey,
Not sure if this will solve all of your problem, but adding the following:
.new-float{
float:right;
margin:0px 0px 0px 0px;
background: #eee8aa;
}
and using it as the class for both images places them side by side,
unless the window is very narrow in which case they appear one above
the other.
-Sarah
Here is your full code with the changes added:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.float-left-pic {
float: left;
width: 50%;
padding: 0em;
margin: 0 0 0 0;
background: #eee8aa;
}
.new-float{
float:right;
margin:0px 0px 0px 0px;
background: #eee8aa;
}
.float-right-pic {
background: green;
}
.works {
width: 95%;
background: #eee8aa;
}
.works-left {
display:inline;
width: 45%;
background: green;
}
.works-right {
display:inline;
width: 45%;
background: red;
}
</style>
</head>
<body>
<div align="center"><div align="center" class="works">
<div class="works-left">
<div class="new-float"><img src="../images/Courses/AZ0010101/SCH3.jpg"
width="253" height="190"></div>
</div>
<div class="works-right">
<div class="new-float"><img src="../images/Courses/AZ0010101/SCH2.jpg"
width="253" height="190"></div>
</div>
</div></div>
</body>
</html> |
| Subject:
Re: CSS display:inline problem with firefox
From: jtc_333-ga on 07 Dec 2005 21:06 PST |
Well that works alittle in IE 6. The images are just a bit off center to the right. But that code still doesnt work in FireFox. Doing the same thing of ignoring the widths when I open that code in FF. : ( |
| Subject:
Re: CSS display:inline problem with firefox
From: strocks-ga on 08 Dec 2005 18:33 PST |
You may try this variant: www.studio.ee/temp/google/columns.html I've added few divs and 50% to columns instead of 45%. |
| Subject:
Re: CSS display:inline problem with firefox
From: jtc_333-ga on 08 Dec 2005 19:35 PST |
Well that one doesnt stack right in IE and when they do they arent centered. And that one doesnt stack at all in FF. |
If you feel that you have found inappropriate content, please let us know by emailing us at answers-support@google.com with the question ID listed above. Thank you. |
| Search Google Answers for |
| Google Home - Answers FAQ - Terms of Service - Privacy Policy |