Forum Moderators: not2easy

Message Too Old, No Replies

Expanding Div to Content in every browser but IE

Having a problem with IE 6 and 7 expanding a div to hold content

         

Stewart81

3:15 pm on Jan 20, 2009 (gmt 0)

10+ Year Member



Hi. I have a little bit of CSS done like this:

.LeftBoxCol {
float: left;
display: inline;
width: 70px;
text-align: center;
}

.RightBoxCol {
float: left;
display: inline;
width: 470px;
}

.LeftTextCol {
float: left;
display: inline;
width: 160px;
}

.RightTextCol {
width: 270px;
float: left;
display: inline;
}

.DescriptionIn {

display: block;
border: 1px solid #EAEAEA;
background: #F6F6F6;
padding: 4px;
font-size: 11px;
line-height: 1.4em;
color: #000000;
padding-bottom: 6px;
}

.clearit {
clear: both;
height: 0;
line-height: 0.0;
font-size: 0;
z-index: 155;
}

Then the HTML example is as follows:

<div class="DescriptionIn">
<div class="LeftBoxCol">
<img src="/uploads/atom.jpg" alt="Stewart81" style="width: 50px; margin: auto 0" />
</div>
<div class="RightBoxCol">
<a href="viewblog.asp?ID=72">View Article - A Great Web Design is Important</a><br /><br />
<div class="LeftTextCol">
<strong>Submitted By: </strong> <a href="/viewmember.asp?id=72">Stewart81</a>
</div>
<br /><br />
<div class="RightTextCol">
<strong>Date: Thursday, January 15, 2009</strong>
</div>
<br class="clearit" />
When developing a website for your company it is imperative that you not only develop a clean, easy to use and attractive website for your customers. You must also remember to use clean code so it is easy to read by the search engines. Also take into account that not everyone will be using the a standard web browser so develop code that can be read even with a screen reader or a cell phone.

</div>
<br class="clearit" />
</div>

Now in firefox, opera, google chrome and safari the main DescriptionIn div is expanded is it should be to fill all the content. In IE 6 and 7 it's not. My first thought would be because of the use of float however the clearit class has handled that problem well in the pass for me. In fact the entire site uses floats quite extensively and the rest of it works just fine with IE. I just can't figure out what's different about this one.

Thanks for any help you guys can offer

Stewart

simonuk

3:55 pm on Jan 20, 2009 (gmt 0)

10+ Year Member



You haven't set what you'd like the .DescriptionIn to do so IE tries to guess and IE always guesses wrong :-)

Add a float:left and then set a width or just add height:1% and you're all set.

*edit* spelling

Stewart81

4:57 pm on Jan 20, 2009 (gmt 0)

10+ Year Member



Thanks for that reply. It worked perfectly :)
I really hate IE sometimes.