CSS float element wrong position

Hello,

i am having a problem with CSS.

I have three DIVs that should be placed next to each other within a container DIV. However, the middle DIV should stretch out to fill the whole empty space. The left DIV is floatet left, the right DIV is floatet right.

For some reason the right DIV drops to the next line but i fail to see why, since there would be enough space for it (exactly the right space, actually) to be placed there (where it belongs).

I have create a little graphic to illustrate my problem.

I will also add all according source code (HTML & CSS). However, please be aware that the container ("bottom-corners") which contains the three DIVs ("left","mid" and "right") is, in itself, nested in another container.

The correct result this, should be that the two DIV elements on the left and on the right stick to their sides, resulting in those corners (see image). The middle DIV should stretch out to fill all the space that is left with the appropriate color. I am trying to achieve a rounded corner effect here.

Does anybody know how to solve this problem?
/* the html */
	
	<div class="bottom-corners">                        
		<div class="left"></div>
		<div class="mid"></div>
		<div class="right"></div>
	</div>
 
/* the css */
 
.bottom-corners .left {
                                         
	float:					left;
	width:					10px;
	height:					10px;
	background-image:			url('/img/interface/tr_corner_left.gif');
	background-repeat:			no-repeat;
	
}
 
.bottom-corners .mid {
                                         
	height:					10px;
	background-image:			url('/img/interface/tr_flow.gif');
	background-repeat:			repeat-x;
	margin:              			0px 10px;
 
 
}
 
.bottom-corners .right {
                                         
	float:					right;
	width:					10px;
	height:					10px;
	background-image:			url('/img/interface/tr_corner_right.gif');
    background-repeat:				no-repeat;
    
}

Open in new window

problem.jpg
LVL 1
spiritwithinAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

David S.Commented:
That's the way floats work.  The simplest solution is to move the right one before the middle one in your markup.

More information:
http://www.positioniseverything.net/ordered-floats.html
http://www.autisticcuckoo.net/archive.php?id=2004/12/10/floating
0
spiritwithinAuthor Commented:
Thank you Kravimir! This was already VERY good information! It solved the problem immedeately, but only in Firefox and Opera. Internet Explorer 6  and 7 still refuse to display the whole structure correctly.

I will raise the points to 350 in the hope that you can provide a solution for this problem as well.

Thank you!
0
David S.Commented:
You're welcome.

It looks like you ran into two different IE bugs.

1) http://www.positioniseverything.net/explorer/expandingboxbug.html
http://www.dynamicsitesolutions.com/css/min-height-for-msie/
http://www.quirksmode.org/css/overflow.html

2) http://www.positioniseverything.net/explorer/threepxtest.html

.bottom-corners .left {
  float: left;
  width: 10px;
  height: 10px;
  background-image: url('/img/interface/tr_corner_left.gif');
  background-repeat: no-repeat;
  overflow: hidden;
  margin-left: -3px;
  left: 3px;
  position: relative;
}
.bottom-corners .mid {
  height: 10px;
  background-image: url('/img/interface/tr_flow.gif');
  background-repeat: repeat-x;
  margin: 0 10px;
  position: relative;
  overflow: hidden;
}
* html .bottom-corners .mid { /* for IE6 */
  margin: 0; 
}
 
.bottom-corners .right {
  float: right;
  width: 10px;
  height: 10px;
  background-image: url('/img/interface/tr_corner_right.gif');
  background-repeat: no-repeat;
  overflow: hidden;
  margin-right: -3px;
  right: 3px;
  position: relative;
}

Open in new window

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

spiritwithinAuthor Commented:
Thanks again!

I have tried your code and it works again: in Firefox. In Opera now there is a small space between the middle flow and the right corner.

IE6 now displays the thing correctly, but stretches it out way too far.
IE7 still displays it incorrectly.

I will attach a new graphic to illustrate the problem according to the current state.

I will furthermore raise the points to 450.

Thanks in advance!
problem2.jpg
0
David S.Commented:
Ah. I just assumed that Opera would display the same as FF. I forgot that setting overflow:hidden on an element can make margins act differently.

Try this. If there are still problems, I'll probably need to see more of your code.

.bottom-corners .left {
  float: left;
  width: 10px;
  height: 10px;
  background-image: url('/img/interface/tr_corner_left.gif');
  background-repeat: no-repeat;
}
* html .bottom-corners .left {
  overflow: hidden;
  margin-left: -3px;
  left: 3px;
  position: relative;
  display: inline;
}
.bottom-corners .mid {
  height: 10px;
  background-image: url('/img/interface/tr_flow.gif');
  background-repeat: repeat-x;
  margin: 0 10px;
}
* html .bottom-corners .mid {
  margin: 0;
  overflow: hidden;
  position: relative;
}
.bottom-corners .right {
  float: right;
  width: 10px;
  height: 10px;
  background-image: url('/img/interface/tr_corner_right.gif');
  background-repeat: no-repeat;
}
* html .bottom-corners .right {
  overflow: hidden;
  margin-right: -3px;
  right: 3px;
  position: relative;
}

Open in new window

0
spiritwithinAuthor Commented:
Alright.

I tried your CSS code and it performed very well on Opera and Firefox.

Unfortunately IE6 and IE7 both insist on displaying the whole thing exactly as they did before.

In order to make things more clear, i will now post more code.

/* this is the container */
 
<div style="display: none;" class="smartlist-filter-mask" id="customers-filter-mask">
	         
	<div class="outer">
		                          
		<form name="customers_filter" id="customers_filter" method="post" onsubmit="return false;" action="">
		
			<div class="field"><select name="filter[field_id]">
				%--field_list--%
			</select></div>
		
			<div class="equation"><select name="filter[equation]">
				%--equations--%
			</select></div>
			
			<div class="value">
				<input onkeypress="if(check_cr(event)){ajax_update('smartlist/customers/filter/submit','smartlist-customers',$('customers_filter').serialize(true));};" id="filter[value]" onfocus="this.select()" type="text" name="filter[value]" value="%--value--%" />
			</div>
			              
			<div class="submit">
				<div onclick="ajax_update('smartlist/customers/filter/submit','smartlist-customers',$('customers_filter').serialize(true));" onmouseover="this.className='submit-button on';" onmouseout="this.className='submit-button';" class="submit-button">submit</div>
			</div>
		       
		</form>
		
	</div>    
	
	<div class="bottom-corners">                        
		<div class="left"></div>
		<div class="right"></div>
		<div class="mid"></div>
	</div>
	
</div>
 
/* end of container */
 
 
/* this is all the associated css */
 
/* filter mask */
                            
.smartlist-filter-mask {
 
	z-index:						1002;
	position:						absolute;
	top:							0px;       
	left:							0px;
	padding:						0px;
	border:							1px solid #ffffff;
	
}
 
	.smartlist-filter-mask .outer {
 
		background-color:				#C6D1D5;
		height: 						40px;
		padding:						0px;
		
	}
 
	.smartlist-filter-mask select, .smartlist-filter-mask input, .smartlist-filter-mask .submit-button {
 
		font-size:						10px;
		color:							#013243;
		font-family:					Verdana, Arial, Helvetica, Geneva;
		
	}
 
	.smartlist-filter-mask input {
 
		border:							1px solid #B0B0B0;
		padding:						2px 0px 0px 2px;
		height:							14px;
			
	}
	            
	.smartlist-filter-mask .field, .smartlist-filter-mask .equation, .smartlist-filter-mask .value, .smartlist-filter-mask .submit {
 
		float:							left;
		padding-left:					2px;
		padding-top: 					2px;
 
		}     
 
	.smartlist-filter-mask .field {
 
		padding-left:					3px;
 
	}
 
	.smartlist-filter-mask .submit-button {
 
		border:							1px solid #B0B0B0;
		padding:						2px 8px 0px 8px;
		text-align:						center;
		background-color:				#e1e1e1;
		height:							14px;
		cursor:							default;
 
	}                                           
	                       
	* html .smartlist-filter-mask .submit-button {
 
		width:							1%;
		      
	}
	   
		.smartlist-filter-mask .submit-button.on {
 
			background-color:				#fbff98;
 
		}
                                                  
/* end of filter mask exclusive definitions */
 
/* div area bottom corner definitions */
/* according to Kravimir @ experts-exchange */
         
.bottom-corners .left {
  float: left;
  width: 10px;
  height: 10px;
  background-image: url('/img/interface/tr_corner_left.gif');
  background-repeat: no-repeat;
}
 
* html .bottom-corners .left {
  overflow: hidden;
  margin-left: -3px;
  left: 3px;
  position: relative;
  display: inline;
}
 
.bottom-corners .mid {
  height: 10px;
  background-image: url('/img/interface/tr_flow.gif');
  background-repeat: repeat-x;
  margin: 0 10px;
}
 
* html .bottom-corners .mid {
  margin: 0;
  overflow: hidden;
  position: relative;
}
 
.bottom-corners .right {
  float: right;
  width: 10px;
  height: 10px;
  background-image: url('/img/interface/tr_corner_right.gif');
  background-repeat: no-repeat;
}
 
* html .bottom-corners .right {
  overflow: hidden;
  margin-right: -3px;
  right: 3px;
  position: relative;
}
 
/* end of corner definitions */
 
/* end of css */

Open in new window

0
spiritwithinAuthor Commented:
If you need to see more code, please ask right away.

Ps.: I would spice the question up to 500 points - if i had more. All i have left now is 5.
0
David S.Commented:
Don't worry about the points.

IE isn't shrink-wrapping the absolutely positioned element (.smartlist-filter-mask) correctly. It looks like you'll have to set a width on it.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
spiritwithinAuthor Commented:
Oh my. Are you sure there is no way around this? I know it works well with a fixed width, but then the whole purpose of the container would become deprecated.
0
spiritwithinAuthor Commented:
Isn't there a way to apply a width of, lets say for example, 1% to .smartlist-filter-mask and then make sure the contents of the DIV stretch it to the minimum required width to display all of its contents?
0
David S.Commented:
I don't see any other CSS only solution for this in IE7.

I hate to say it but the simplest solution might be to use a <table>.
0
spiritwithinAuthor Commented:
I hate to admit it, but you're probably right.

But i fail to see how a table would solve the problem? How would i use the table to replace the three DIVs in order to achieve the same result?
0
David S.Commented:
Perhaps something like this:

<table class="smartlist-filter-mask" id="customers-filter-mask">
	         
	<tr class="outer"><td colspan="3">
		                          
		<form name="customers_filter" id="customers_filter" method="post" onsubmit="return false;" action="">
		
			<div class="field"><select name="filter[field_id]">
				%--field_list--%
			</select></div>
		
			<div class="equation"><select name="filter[equation]">
				%--equations--%
			</select></div>
			
			<div class="value">
				<input onkeypress="if(check_cr(event)){ajax_update('smartlist/customers/filter/submit','smartlist-customers',$('customers_filter').serialize(true));};" id="filter[value]" onfocus="this.select()" type="text" name="filter[value]" value="%--value--%" />
			</div>
			              
			<div class="submit">
				<div onclick="ajax_update('smartlist/customers/filter/submit','smartlist-customers',$('customers_filter').serialize(true));" onmouseover="this.className='submit-button on';" onmouseout="this.className='submit-button';" class="submit-button">submit</div>
			</div>
		       
		</form>
		
	</td></tr>
	
	<tr class="bottom-corners">
    <td class="left"></td>
		<td class="mid"></td>
		<td class="right"></td>
	</tr>
	
</table>

Open in new window

0
spiritwithinAuthor Commented:
Well,

i tried the table solution, but it worked out horribly and to be honest, if i go to tables now, i can throw away my whole concept of keeping this project clearn in regards to using a CSS based layout.

I ended up setting a fixed width on the containers. It stinks, specifically because now i have to set fixed widths for the input fields (the selects) - but it still stinks less than a table.

Actually i ended up with a solution i had before. However, iI am very thankful for your grand and fine effort in trying to help me. Therefore i will shall share the points - 300 to you, the rest back to me. I hope you are agreeing with that.

Thank you, once more!
0
spiritwithinAuthor Commented:
Since i just found out i can not reward points to myself, i will reward them all over to you.
0
spiritwithinAuthor Commented:
Thanks
0
David S.Commented:
You're welcome. Thanks for the points.

I came up with a solution that works in IE7 but not IE6.

Have you considered the possibility of making it look a bit different in IE6 than in other, newer browsers.

.smartlist-filter-mask {
  z-index: 1002;
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 0 10px;
  border: 1px solid #ffffff;
}
 
.bottom-corners {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 10px;
}
.bottom-corners .left {
  width: 10px;
  height: 10px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: url('/img/interface/tr_corner_left.gif');
  background-repeat: no-repeat;
}
.bottom-corners .mid {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 0;
  margin: 0;
  height: 10px;
  background-image: url('/img/interface/tr_flow.gif');
  background-repeat: repeat-x;
}
.bottom-corners .right {
  width: 10px;
  height: 10px;
  position: absolute;
  right: 0;
  bottom: 0;
  background-image: url('/img/interface/tr_corner_right.gif');
  background-repeat: no-repeat;
}

Open in new window

0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.