#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    13
    Rep Power
    0

    Help. Div alignment [moved from PHP]


    Hi

    I got a really weird situation.

    When I user this code to show news:
    PHP Code:
    while ( $anon mysql_fetch_assoc($anoun) ) {
                
                echo 
    "<div style='background-color:#".$anon['Collor']."'>";
            
                echo 
    "<div style='float:left;'>Kategorija: ".$anon['Name']."</div><br />";// This line problem then removing <br />
            
                
    echo "";
                
                echo 
    "<div class='wrap'><h3>".$row['title']."</h3>";
            
                echo 
    "";
            
                echo 
    "<div><div style='float:center;'>".wordwrap($row['news'], 125'<br />'true)."</div>";
            
                echo 
    "<br />";
            
                echo 
    "<div style='float:left;'>Data: ".$row['date']."</div>";
            
                echo 
    "<div style='float:right;'>Autorius: ".$row['author']."</div><br />";
            
                echo 
    "</div><hr></div></div>";
                    
            } 
    I got this nice alignment:


    But when i remove <br /> (I commented in php code) I got this awful news alignment:


    Question is how to make $row['title']; align in one vertical line?
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    194
    Rep Power
    77
    This is a css question, not php

    The reason your problem is happening is because the letters take up space on the horizontal line they are on and when you float to the center or right in that line that has those letters, it will add the amount of space the letters take and float it correspondingly

    what this means is that it gets the length of the line and divides it in half, then gets the length of the floated item and divides that by half and it puts the right side of the first floated items half right next to where the end of the first half of line the line, and repeats this for the other sided but flipped
    but when there is some form of text on the line that is being divided, it gets a quarter of the length of the text and adds that onto the first half of the line
    In a very dumbed down explanation

    The reason it was working at first was because all of the $row['title']`s were on a new line which was completely empty except for the $row['title']`s so it never had to take into account the categories/news,announcement text that it had to do for when you took out the br that forced them onto a new line
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    13
    Rep Power
    0
    Is there any way to fix this?
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,131
    Rep Power
    4304
    Welcome to DevShed Forums, Revix.

    Yes, of course it's possible to fix it. Please provide a link to an example page.

    By the way, "center" is not a valid value for the "float" property. There are other ways to center content: Four ways to Center Elements with CSS
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    13
    Rep Power
    0
    Originally Posted by Kravvitz
    Welcome to DevShed Forums, Revix.

    Yes, of course it's possible to fix it. Please provide a link to an example page.

    By the way, "center" is not a valid value for the "float" property. There are other ways to center content: Four ways to Center Elements with CSS
    Hey thanks

    But i don't get it there is no
    PHP Code:
    margin-centerauto
    or maybe i must margin all may left and right text?
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    194
    Rep Power
    77
    its
    Code:
    margin:0 auto;
    not
    Code:
    margin-center: auto;

IMN logo majestic logo threadwatch logo seochat tools logo