SitePoint Sponsor

User Tag List

Results 1 to 11 of 11

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    May 2010
    Posts
    100
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Displaying 3 divs 'inline' ?

    Hi guys, I have this code:

    Code:
    while ($row = mysqli_fetch_assoc($wishlist)) {
    				echo '<div id="wishlist">';
    
    					echo '<div id="wishlistmovie">';
    						echo $row["moviename"];
    					echo '</div>';
    
    					echo '<div id="wishlistdate">';
    						echo $row["wishlistdate"];
    					echo '</div>';
    
    					echo '<div id="wishlistgenre">';
    						echo $row["genre_abbreviation"];
    					echo '</div>';
    
    				echo '</div>';
    				}
    I need the 3 items to display like this:

    moviename movie_release_date movie_genre

    but I also need to style each one separately so that I can space them left/middle/right.

    Any tips on how I can achieve this?

    sorry if this shouldn't be in CSS, but I was thinking there might be style options to make this work?

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Generally speaking you will want to float those three divs to get them beside each other.

    float:left;

    Should get you started

    but I also need to style each one separately so that I can space them left/middle/right.
    Right, you'll want to set a class or ID on them so you can adjust widths, margins etc. to fine tune them after they are floated.

  3. #3
    SitePoint Zealot
    Join Date
    May 2010
    Posts
    100
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah I've had the wishlistmovie (movie name) div on float: left; but whenever I try to float anything else, crazy stuff happens.

    Should I have mentioned that all of this code is inside a wrapper div too? will that affect my ability to float these three.

  4. #4
    SitePoint Zealot
    Join Date
    May 2010
    Posts
    100
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    if I do this, everything appears in the correct order (movie name, movie release date, movie genre):

    Code:
    #wishlistmovie {float: left;}
    #wishlistgenre {float: right;}
    but the #wishlistgenre div appears too low for some reason, like this (ignore the ...):

    MOVIE NAME RELEASE DATE
    ..................................................................GENRE

  5. #5
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Should I have mentioned that all of this code is inside a wrapper div too? will that affect my ability to float these three.
    Hi,
    We would really need to see your complete code to suggest the best way to approach it. Floats are removed from the normal page flow so there will be an effect on other elements around them. The first block element that follows the floats may need to be cleared.

    If you have a link to your page go ahead and post it.

    if I do this, everything appears in the correct order (movie name, movie release date, movie genre):

    but the #wishlistgenre div appears too low for some reason, like this
    You either need to float all three of the divs or bring the floats first in the source order. Floats cannot rise above a block element that comes before it in the source.
    Also depends on whether or not your page is a fixed or fluid width as to how you need to set up the floats.

    Something like this would work for fluid widths but the floats are coming first. There are some other ways to do it though they can get complicated.
    I have not catered to IE6 in this example, it would need some help with "haslayout" and the 3px jog.

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Test Page</title>
     
    <style type="text/css">
    body {
        margin:0;
        padding:0;
        font: 100%/1.2 arial,helvetica,sans-serif;
    }
    #wrap {
        width:70%;
        min-width:700px;
        max-width:1000px;
        margin:0 auto;
        background:#EEF;
        overflow:hidden;/*contain child floats*/
    }
    #left, #right {
        width:200px;
        float:left;
        min-height:300px;
        background:#CCC;
    }
    #right {
        float:right;
    }
    #main {
        min-height:300px;
        overflow:hidden;/*stop content from sliding under floats*/
    }
    </style>
     
    </head>
    <body>
     
    <div id="wrap">
        <div id="left">Left Float</div>
        <div id="right">Right Float</div>
        <div id="main">Main Content</div>
    </div>
     
    </body>
    </html>

  6. #6
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Here's another version of a fluid width layout that floats all three columns.
    The main content comes before the right column in the markup in this version but it gets a little trickier with negative margins making it all snap into place.

    You can bypass the IE6 3px jog I mentioned by floating them all.

    If your page is a fixed width then you can just set the column widths and float them all left.
    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Test Page</title>
     
    <style type="text/css">
    body {
        margin:0;
        padding:0;
        font: 100%/1.2 arial,helvetica,sans-serif;
    }
    #wrap {
        width:80%;
        min-width:700px;
        max-width:1000px;
        margin:0 auto;
        background:#DDF;/*main BG color*/
        overflow:hidden;/*contain child floats*/
    }
    * html #wrap {width:900px;}
     
    #header,#footer {
        zoom:1;
        clear:both;
        padding:20px 0;
        background:#77F;
        text-align:center;
    }
    #main {
        float:left;
        width:100%;
        margin:0 -200px 0 0;
    }
    #inner {
        zoom:1;
        overflow:hidden;
        margin:0 200px;
    }
    #left, #right {
        width:200px;
        float:left;
        min-height:300px;
        background:#7CF;
    }
    #left {
        margin-right:-200px;
        position:relative;/*layer it on top after #main slides in*/
    }
    </style>
     
    </head>
    <body>
     
    <div id="wrap">
        <div id="header">Header</div>
        <div id="left">Left Float</div>
        <div id="main">
            <div id="inner">Main Content</div>
        </div>
        <div id="right">Right Float</div>
        <div id="footer">Footer</div>
    </div>
     
    </body>
    </html>

  7. #7
    SitePoint Zealot
    Join Date
    May 2010
    Posts
    100
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry, been out all day - my site is local only but I will post some more detailed code, edited a bit to save space:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<title>movies</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    	<link href="style1.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
    	<div id="wrapper">
    *****user navigation goes here*****
    	  <div id="main">
    <div id="moviecollection">
    <?php
    include 'moviecollection.php';
    if ($wishlist == '1')
    {
    *****some code here to gather movies*****
    				while ($row = mysqli_fetch_assoc($wishlist)) {
    
    				echo '<div id="wishlistwrap">';
    
    					echo '<div id="wishlistmovie">';
    						echo $row["moviename"];
    					echo '</div>';
    
    					echo '<div id="wishlistreleasedate">';
    						echo $row["wishlistreleasedate"];
    					echo '</div>';
    
    					echo '<div id="wishlistgenre">';
    						echo $row["genre_abbreviation"];
    				        echo '</div>';
    
    				echo '</div>'; // end of wishlistwrap div
    				}
    	                echo '<br/>';
                                }
    
    ****output of complete list of movies here (those not in wishlist above)****
    
    </div> <!-- end of main div -->
    </div> <!-- end of wrapper div -->
    </body>
    </html>
    this is my entire page.

    oh and here is the style for my wrapper:
    Code:
    #wrapper {
    border: solid 1px #000000;
    width: 740px;
    height: 100%;
    margin-right: auto;
    margin-left: auto;
    padding: 5px;
    background: #DDDDDD;
    }


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
  •