SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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.

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

  2. #2
    Forums Designer
    Join Date
    Jun 2004
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can't use float on inline elements, so change style="float:right" to style="float:right; display:block"

  3. #3
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi czy11421, welcome to SitePoint!

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

    Code:
    .msg_head {  
         padding: 5px 10px;  
         position: relative;   
         margin: 1px;  
     }  
     <div class="msg_head"><a style="float:right" href="#" onclick="">remove</a>New Car</div>
    @ CyberAlien, As floated it will automatically get block properties, no need for a block display setting.
    Happy ADD/ADHD with Asperger's

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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:

    Code:
    <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.

    Edit:


    Erik beat me

  5. #5
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    Forums Designer
    Join Date
    Jun 2004
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Erik J View Post
    @ CyberAlien, As floated it will automatically get block properties, no need for a block display setting.
    Thanks, didn't know about that.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by czy11421 View Post
    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.
    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

  8. #8
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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.
    Attached Files Attached Files

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.


    Code:
    <!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:
    Code:
    <!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;
        min-height:0;
    }
    .msg_body {
        padding: 5px 10px 15px;
        background-color: #F4F4F8;
        min-height:0;
    }
    * html .msg_head, * html .msg_body {
        height:1%;
        overflow:visible
    }
    </style>
    </head>
    <body>
    <form action="">
        <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 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:
    Quote Originally Posted by w3c
    In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A1 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".

  10. #10
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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.
    :
    after I add this doctype, it works properly.

    Quote Originally Posted by Paul O'B View Post
    height:1%;
    overflow:visible
    :
    what this mean, why we need this ?

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

  11. #11
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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 .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  12. #12
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Attached Files Attached Files

  13. #13
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  14. #14
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Also, can you post the file here? OTherwise we have to wait for the file to approve
    Code is here. Thanks.

    Code:
    <!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>

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

    Code:
    .simple_search_label{
        width:140px;
        text-align:right;
        float:left;
        padding:0 10px 0 0;
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •