Solved

CSS float element wrong position

Posted on 2008-10-27
17
2,686 Views
Last Modified: 2012-06-27
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
0
Comment
Question by:spiritwithin
  • 10
  • 7
17 Comments
 
LVL 42

Expert Comment

by:David S.
ID: 22819425
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
 
LVL 1

Author Comment

by:spiritwithin
ID: 22819429
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
 
LVL 42

Expert Comment

by:David S.
ID: 22819651
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
 
LVL 1

Author Comment

by:spiritwithin
ID: 22824112
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
 
LVL 42

Expert Comment

by:David S.
ID: 22826908
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
 
LVL 1

Author Comment

by:spiritwithin
ID: 22827111
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
 
LVL 1

Author Comment

by:spiritwithin
ID: 22827146
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
 
LVL 42

Accepted Solution

by:
David S. earned 455 total points
ID: 22827176
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
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 1

Author Comment

by:spiritwithin
ID: 22827202
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
 
LVL 1

Author Comment

by:spiritwithin
ID: 22827217
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
 
LVL 42

Expert Comment

by:David S.
ID: 22827291
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
 
LVL 1

Author Comment

by:spiritwithin
ID: 22827314
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
 
LVL 42

Expert Comment

by:David S.
ID: 22827393
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
 
LVL 1

Author Comment

by:spiritwithin
ID: 22829114
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
 
LVL 1

Author Comment

by:spiritwithin
ID: 22829119
Since i just found out i can not reward points to myself, i will reward them all over to you.
0
 
LVL 1

Author Closing Comment

by:spiritwithin
ID: 31510631
Thanks
0
 
LVL 42

Expert Comment

by:David S.
ID: 22837848
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

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now