PDA

View Full Version : Resolved Float: Right, only working in IE?



pheen
Jan 22nd, 2010, 04:03 AM
Hi, I just registered as I am completely lost with this problem, but I'll be sure to stick around and give any help I can to others.

Alright, so this is the issue. I have a <div> containing 5 other <div>'s, 3 for content and 2 separators. Within the 3 content divs I have a <ul> that is suppose to floating left, then an image that is floating right. But for some reason, in every browser except for IE, the image is not floating right.

This is how it renders in IE, which is correct.
http://joel.mrkernel.net/projects/memorial/ss1.png

Now, this is how it renders in Firefox and Chrome.
http://joel.mrkernel.net/projects/memorial/ss2.png


Here is the code for that section


<div id="col_left_top" class="grid_9 prefix_1">
<div class="for">
<img alt="For Teachers" src="img/col_left_forTeachers.png" />
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div><!-- end for -->

<div class="clear"></div>
<div class="seperator"></div>

<div class="for">
<img alt="For Parents" src="img/col_left_forParents.png" />
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div><!-- end for -->

<div class="clear"></div>
<div class="seperator"></div>

<div class="for">
<img alt="For Students" src="img/col_left_forStudents.png" />
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div><!-- end for -->
</div><!-- end col_left_top -->


and the css..


/* LEFT TOP COL */

#col_left_top {
border: 1px solid;
margin-top: 28px;
}

#col_left_top .seperator {
width: 270px;
margin-bottom: 25px;
margin-top: 25px;
}

.for {
display: inline-block;
}

.for ul {
float: left;
margin-bottom: 0px;
}

.for ul li {

}

.for img {
float: right;
}


If you need to see the rest of the code the website is currently being hosted at http://joel.mrkernel.net/projects/memorial & http://joel.mrkernel.net/projects/memorial/css/style.css

I am also using the 960 css framework if that applies at all. Hopefully the pictures work alright, the links won't work for me because of the way I have my web server setup. The borders are just temp while im working on this problem.

I'm still pretty new to this, so if you have any other suggestions on how I can improve the code I have thus far it would be greatly appreciated! :)

Excavator
Jan 22nd, 2010, 05:11 AM
Hello pheen,
display: inline-block; is colapsing your #for to the size of it's contents. Remove that and #for will expand to the size of it's container.
Have to really wonder what #for is for though... do you have divitis (http://www.apaddedcell.com/div-itis) there?

Next problem, your floats do not have widths. We float things so other things can go beside them, need to know how wide they are to know where to put them.

Excavator
Jan 22nd, 2010, 05:17 AM
Something like this -
/* LEFT TOP COL */

#col_left_top {
border: 1px solid;
margin-top: 28px;
}

#col_left_top .seperator {
width: 270px;
margin-bottom: 25px;
margin-top: 25px;
}

.for {
/*display: inline-block;*/
}

.for ul {width: 150px;
float: left;
clear: left;
margin: 0 0 20px 0;
}

.for ul li {

}

.for img {
width: 150px;
float: right;
}

Might get you started anyway.

pheen
Jan 22nd, 2010, 05:43 AM
Ahh, a width, that would have been smart wouldn't it xD

Thanks, that fixed it!