#1
  1. No Profile Picture
    I hate nerds
    Devshed Novice (500 - 999 posts)

    Join Date
    Jul 2003
    Posts
    540
    Rep Power
    0

    css newbie, floats, thought i had it figured out


    thought i had it figured out with css, but i guess not.
    here is a small example. everything works well until i try to float those pieces of text--then it goes crazy.
    anyone have any suggestion how to do this? im operating in strict mode

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html><head>
    <style type=text/css>
    div.entryWindow
    {
     position:relative;
     border:2px solid #CCCCCC;
     width:60%;
     left:20%;
     background:#FFFFFF;
     color:#000000;
     font-family:inherited;
     font-size:12px;
     margin-top:20px;
     margin-bottom:20px;
    }
    div.header
    {
     position:relative;
     background:#CCCCCC;
     color:inherited;
     font-family:inherited;
     font-weight:bold;
     padding-left:15px;
     padding-right:15px;
     padding-top:5px;
     padding-bottom:5px;
    }
    div.footer
    {
     position:relative;
     background:#CCCCAA;
     color:inherited;
     font-family:inherited;
     padding-left:15px;
     padding-right:15px;
     padding-top:5px;
     padding-bottom:5px;
    }
    div.content
    {
     position:relative;
     background:#AF3FF8;
     color:inherited;
     font-family:inherited;
     padding:15px;
    }
    </style>
    </head><body>
    <div class=entryWindow>
         <div class=header>
              [float this left] 	
              [float this right]
         </div>
         <div class=content>blah balh</div>
         <div class=footer><span class=entryActions>
              [float this right]
         </div>
    </div>
    </body></html>
  2. #2
  3. No Profile Picture
    Super Moderator
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Jul 2003
    Posts
    4,008
    Rep Power
    2790
    I imagine that when you float the elements they plant themselves on either side of the content element. This is because they are being floated in relation to their parent element, entryWindow, and do not take into consideration the other elements, such as 'content' or 'footer'.

    Try placing 'header' and 'footer' inside of 'content', and then float two header elements to the left and right, then vertical-align 'footer' and float it right. You'll have to swap 'content's' padding with the other elements.

    Also, using percentages with absolute values is not the best idea.

    Why are you doing this? You could use a table with CSS:
    Code:
    <table>
     <tr>
      <td>[float this left]</td>
      <td>[float this right]</td>
     <tr>
     <tr>
      <td colspan=2>content</td>
     <tr>
     <tr>
      <td colspan=2>[float this right]</td>
     </tr>
    </table>
  4. #3
  5. No Profile Picture
    I hate nerds
    Devshed Novice (500 - 999 posts)

    Join Date
    Jul 2003
    Posts
    540
    Rep Power
    0
    i guess im an idiot. for some reason im under the impression that tables are "bad" for some reason and that divs are the way to go.

    im just trying to learn something new, i guess you could say and understand this CSS thing.
  6. #4
  7. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    if its only text that you try to align, you can use the text-align propety

    i made this fast, could be better solutions
    (checked in moz and op7)


    just listing the changes i made:

    html:
    Code:
     
    <div class="header">
    	<div class="left">[float this left]</div>
        [float this right]
    </div>
    css:
    Code:
     
    
    div.header{
    	 ...
    	 text-align:right;
    }
    
    div.footer{
    	 ...
    	 text-align:right;
    }
    
    
    
    .left {
    	float:left;
    	width:20%;
    }

    and one last ting remeber to use quotation marks " " ie, <div class="header">
  8. #5
  9. No Profile Picture
    I hate nerds
    Devshed Novice (500 - 999 posts)

    Join Date
    Jul 2003
    Posts
    540
    Rep Power
    0
    thanks.
    maybe i should just use tables. seems so much easier.

    question:
    as long as your class names or id names have no space, then not using quotes seems to be ok.

    are there any future problems with not using quotes>
  10. #6
  11. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    in x-html you have to use quotations on every attribute value http://www.w3.org/TR/xhtml1/#h-4.4

    pretty sure you have to use quatations in 4.01 strict, (could be wrong, long time since i've used it )

    anyway its a good habit to learn
  12. #7
  13. No Profile Picture
    I hate nerds
    Devshed Novice (500 - 999 posts)

    Join Date
    Jul 2003
    Posts
    540
    Rep Power
    0
    you dont have to use quotations.
    i guess i should.
    the reason i dont is because i use php edit,
    and it freakin automatically creates two sets of quotes, parenthesis, brackets etc.
    i hate that!
    does anyone know how to turn it off?

IMN logo majestic logo threadwatch logo seochat tools logo