...

View Full Version : Floating right inside DIV. IE problem.



Saurdo
08-01-2007, 10:31 PM
I'm having this problem with IE. It just completely breaks when I view it in IE.

What i'm trying to do is make a lesson viewing type thing. Where it's a div box that contains a title box, a description box, and a floating box which contains links to the questions and lesson.

The floating div box is giving me trouble.

This is my HTML.


<!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=utf-8"><link rel="stylesheet" href="css/base.css" type="text/css">
<link rel="stylesheet" href="css/lesson.css" type="text/css">
</head>
<body>
<div class="main">
<div class="header">test</div>
<div class="content">
<div class="lesson_box">
<div class="lesson_title"><a href="questions.php?id=2">Morbi vel erat non justo venenatis rutrum. Vivamus in sem.</a></div>
<div class="lesson_desc">
dolor vel enim. Pellentesque sagittis. Etiam tristique tincidunt mi. In quis lectus. Donec vulputate turpis in pede. Quisque tellus sapien, convallis ac, porttitor sit amet, egestas et, est. Duis varius suscipit turpis. Etiam placerat nibh eget massa bibendum rutrum. Phasellus ante.
<div style="float: right; border: 1px solid #fa0; border-bottom-width: 0px; border-right-width: 0px; padding: 5px;">test</div>
<div style="clear: both;"></div>
</div>
</div>
</div>
<div class="footer">A bunch of crappy copyright stuff</div>

</div>
</body>
</html>


This is my CSS.


.lesson_box{
background: #ccc;
border: 1px solid #999;
border-bottom-width: 0px;
margin-bottom: 10px;
}
.lesson_title{
font-size: 18px;
font-weight: bold;
background-color: #aaa;
border: 1px solid #999;
padding: 5px;
}
.lesson_title a{
text-decoration: none;
color: #3d4b6e;}
.lesson_desc{
padding: 10px;
padding-right: 0px;
padding-bottom: 0px;
}

The CSS for the floating right box is contained within the HTML because I was just testing it.

And preferably if the problem is simple enough I'd like the floating div box to not go to a new line and instead kind of stick itself in the description. So the description flows around it.

Jutlander
08-01-2007, 10:42 PM
Where exactly do you want that link div?

Saurdo
08-01-2007, 10:50 PM
On the right bottom within the description.

Saurdo
08-02-2007, 10:01 PM
Any ideas?

Edit: nevermind I fixed it.

New CSS:


.lesson_box{
margin-right: auto;
margin-left: auto;
width: 95%;
background: #ccc;
border: 1px solid #999;
border-bottom-width: 0px;
margin-bottom: 10px;
}
.lesson_title{
font-size: 18px;
font-weight: bold;
background-color: #aaa;
border: 1px solid #999;
padding: 5px;
}
.lesson_title a{
text-decoration: none;
color: #3d4b6e;}
.lesson_desc{
padding: 10px;
padding-right: 0px;
padding-bottom: 0px;
}

Needed to specify a width.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum