Div float doesn't work

I want to create a div and place a remove link on the right edge of this div. But this link will go down to right edge of a new line.

How to fix it ? why this float doesn’t work ?

Thanks.


.msg_head {  
     padding: 5px 10px;  
     position: relative;   
     margin: 1px;  
 }  
 <div class="msg_head">New Car  <a style="float:right" href="#" onclick="">remove</a></div>  

You can’t use float on inline elements, so change style=“float:right” to style=“float:right; display:block”

Hi czy11421, welcome to SitePoint! :wave:

The float needs to come before the content that is meant go adjacent/wrap below it.

.msg_head {  
     padding: 5px 10px;  
     position: relative;   
     margin: 1px;  
 }  
 <div class="msg_head"><a style="float:right" href="#" onclick="">remove</a>[COLOR="Red"]New Car[/COLOR]</div>

@ CyberAlien, As floated it will automatically get block properties, no need for a block display setting. :wink:

Hi,

In ie6 and 7 floats must come before any content that you want to wrap the float (no matter which way the float is floated).

Just change the html like this:


<div class="msg_head"> <a style="float:right" href="#" onclick="">remove</a>New Car</div>

In all browsers flfats must come before block level content that you want to wrap anyway. For inline content on the same line as the float the inline content should be moved aside but ie6 and 7 get this wrong.

Therefore it’s just easier to say that floats must come first.

You don’t need the display:block (as mentioned by cyber alien above) because the computed value of inline elements is block when floated. You can float inline or block elements as you wish in the same manner.:slight_smile:

Edit:

Erik beat me :slight_smile:

I made this change, getting better, but still not good. please see this pic.

http://174.143.255.82:8080/files/11.png (under IE 8)

But in the firefox 3.6 , it works properly.

Thanks for your reply. Nice forum.

Thanks, didn’t know about that.

Do you have a link that we can look at as it would be easier to fix.?

What is that page supposed to look like as the jpg shows 3 lines with a pink background that is uneven and doesn’t seem to make much sense?

If the issue is that the text is underneath the pink background then it looks like a z-index issue and I’m not sure why it would even look like that as surely the background should be on the parent.

Try adding position:relative and z-index:99 to the right floated anchor.

However it would be better if we could see the page and fix it properly:)

Please see the attachment.

The result I want is, the ‘remove’ is on the top of the pink background.

Thank you very much.

Hi,

You don’t have a doctype so IE8 (and 6 and 7) will be in quirks mode and behave more like IE5. Use a full doctype to set standards mode.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Then you need some haslayout fixes for ie6 and ie7 as follows:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
    width: 100&#37;;
    height: 100%;
    border: 0;
    padding: 0;
    margin: 0;
    font-size: 85%;
    font-family: "Arial", "Trebuchet MS", "Helvetica", "Verdana", "sans-serif";
    background-color: #F8F8F8;
}
.msg_list {
    margin: 0px;
    padding: 0px;
    width: 383px;
}
.msg_head {
    padding: 5px 10px;
    cursor: pointer;
    position: relative;
    background-color: #FFCCCC;
    margin: 1px;
  [B]  min-height:0;[/B]
}
.msg_body {
    padding: 5px 10px 15px;
    background-color: #F4F4F8;
[B]    min-height:0;[/B]
}
[B]* html .msg_head, * html .msg_body {
    height:1%;
    overflow:visible
}[/B]
</style>
</head>
<body>
<form action="">
    <fieldset>
    <legend>Cars</legend>
    <div class="msg_list" id="carListDiv">
        <div id="car[idx].headdiv" class="msg_head"><a [B]style="float:right[/B];" href="#" onclick="removeCar('idx');">remove</a> New Car - not saved </div>
        <div id="car[idx].msgdiv" class="msg_body" >
            <p>
                <label for="car[idx].carId" >Car ID :</label>
                <input type="text" name="car[idx].carId" id="car[idx].carId" value="" />
            </p>
            <p>
                <label for="car[idx].madeyear">Model :</label>
                <input type="text" id="car[idx].madeyear" name="car[idx].model" value="" />
            </p>
        </div>
    </div>
    </fieldset>
</form>
</body>
</html>



Note that these are not valid IDs.

car[idx].headdiv

You can’t use a bracket or a dot in there.

Syntax and data types:

after I add this doctype, it works properly.

what this mean, why we need this ?

Thank you very much. You make the CSS a kind of art for me.

It’s an IE6 trick to set haslayout because min-height:0 doesn’t set haslayout for IE6. THe height:1% sets haslayout. The overflow:visible; is needed just in case (I don’t know if this applies to you, though it’s always safe) overflow:hidden; is set (and if a parent had a height set, then it would clip at 1% height and the rest of hte content would be hidden).

It’s a safety net ;).

I add a new CSS style, ‘simple_search_label’, and remove the bracket and the dot. Now look like the new CSS style not applied. I don’t know why.

Please see the attachment.

Thanks.

Could you be more clearly? Remove bracket and the dot?

Also, can you post the file here? OTherwise we have to wait for the file to approve :slight_smile:

Code is here. Thanks.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<style type="text/css">
html,body {
	width: 100%;
	height: 100%;
	border: 0;
	padding: 0;
	margin: 0;
	font-size: 85%;
	font-family: "Arial", "Trebuchet MS", "Helvetica", "Verdana","sans-serif";
	background-color: #F8F8F8;
}
.msg_list {
	margin: 0px;
	padding: 0px;
	width: 383px;
}
.msg_head {
	padding: 5px 10px;
	cursor: pointer;
	position: relative;
	background-color: #FFCCCC;
	margin: 1px;
}
.msg_body {
	padding: 5px 10px 15px;
	background-color: #F4F4F8;
}

.simple_search_label{
	width:150px;
	text-align:right;
}
</style>
</head>
<body>
<form>	
	<fieldset>
	<legend>Cars</legend>
	<div class="msg_list" id="carListDiv">
		<div id="car_idx_.headdiv" class="msg_head"><a style="float:right;" href="#" onclick="removeCar('idx');">remove</a> New Car - not saved  </div> 
		<div id="car_idx_.msgdiv" class="msg_body" >
		<p><label class="simple_search_label" for="car_idx_carId" >Car ID :</label> <input type="text" id="car_idx_carId" name="car[idx].carId"  value="" /></p>	
		<p><label class="simple_search_label" for="car_idx_madeyear">Model :</label><input type="text" id="car_idx_madeyear" name="car[idx].model" value="" /></p>
		</div>
	</div>	
	</fieldset>
</form>
</body>
</html>

A label is an inline element and inline elements can’t have dimensions applied because they are only as big as they are:)

You could float the label and then apply dimensions to it.


.simple_search_label{
    width:140px;
    text-align:right;
 [B]   float:left;
    padding:0 10px 0 0;[/B]
}