Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts

    Kinda position problem

    Hi again!

    I have following problem:



    I just can't seem to make the second row to display as the first one. Here's the code:

    Code:
    <div id="centerdiv-movie">
    
    <div class="movie-container">
    <div class="movie-thumb"><img src="Movies.gif" alt="Test Movie" border="0" /></div><div class="movie-text"><h4>Test Movie</h4>This is just a test movie. Maybe iut will work maybe now who knpwsk kpadskpo akpa kpad kpad kpasd kps adkpasdkpsdakpsda kps adk sdks dk dkd kfd kdf kdf kpdf kpd fkpfd pkf kpfd kpfd pkpkdfpkdf  k fdpkf dkpf dpd</div><div class="movie-button"><img src="Movies_37.gif" alt="Download" border="0" /><br/><br/><img src="Movies_37.gif" alt="View" border="0" /> On YouTube.com</div></div>
    
    <div class="movie-container">
    <div class="movie-thumb"><img src="Movies.gif" alt="Test Movie" border="0" /></div><div class="movie-text"><h4>Test Movie</h4>This is just a test movie. Maybe iut will work maybe now who knpwsk kpadskpo akpa kpad kpad kpasd kps adkpasdkpsdakpsda kps adk sdks dk dkd kfd kdf kdf kpdf kpd fkpfd pkf kpfd kpfd pkpkdfpkdf  k fdpkf dkpf dpd</div><div class="movie-button"><img src="Movies_37.gif" alt="Download" border="0" /><br/><br/><img src="Movies_37.gif" alt="View" border="0" /> On YouTube.com</div></div>
    </div>
    and the CSS:

    Code:
    #centerdiv-movie {	width:653px; 
    					margin-right:auto;
    					margin-left:auto;
    					}
    					
    .movie-container {	width:653px;
    					margin-bottom:10px;
    					}
    
    .movie-thumb {		width:130px;
    					float:left;
    					text-align:left;
    					margin-right:5px;
    					}
    					
    					
    .movie-text {		background-color:#333333;
    					width:316px;
    					padding-top:6px;
    					padding-bottom:8px;
    					padding-left:5px;
    					padding-right:5px;
    					float:left;
    					text-align:center;
    					margin-left:5px;
    					font-family:Arial;
    					font-weight:normal;
    					font-size:12px;
    					color:#ffffff;
    					}
    					
    .movie-button {		background-color:#333333;
    					width:170px;
    					padding-top:6px;
    					padding-bottom:8px;
    					padding-left:5px;
    					padding-right:5px;
    					float:left;
    					text-align:left;
    					margin-left:5px;
    					font-family:Arial;
    					font-weight:normal;
    					font-size:12px;
    					color:#ffffff;
    					}
    I have tried for hours to solve the problem, but I just can't get the hang of it. It's validated with W3C.

  • #2
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Set a height on 'movie container'. Because your buttons section is smaller than the text the next image is being floated under it and next to the previous movie-text, rather than on a separate new line. You could clear your floats after the movie button as well, which should work... add clear: both; to movie-button.

    You could also make your code so much more condensed by changing all of the padding into one line and the same with your fonts:

    padding: 6px 5px 8px 5px;
    font: normal 12px Arial, sans-serif;
    Last edited by ahallicks; 07-26-2007 at 02:27 PM.
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #3
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    Yeah, I just wondered if it could be done without to set a specific height - couldn't. Also, it dosn't work out, at least not in IE6, if you use the clear floats command.

    However now it works, thanks


  •  

    Posting Permissions

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