Displaying 3 divs 'inline'?

portem · March 29, 2011, 2:07am

Hi guys, I have this 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?

Rayzur · March 29, 2011, 2:47am

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.

portem · March 29, 2011, 3:08am

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.

portem · March 29, 2011, 3:11am

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

#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

Rayzur · March 29, 2011, 4:46am

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.

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

Rayzur · March 29, 2011, 5:54am

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.


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

portem · March 30, 2011, 12:50am

sorry, been out all day - my site is local only but I will post some more detailed code, edited a bit to save space:

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

#wrapper {
border: solid 1px #000000;
width: 740px;
height: 100%;
margin-right: auto;
margin-left: auto;
padding: 5px;
background: #DDDDDD;
}

portem · March 30, 2011, 6:55pm

Nailed it, did this in my stylesheet:

#wishlist {
width: 90%;
margin-left: auto;
margin-right: auto;
background-color: #DDDDDD;
}
#wishlistmovie {float: left; width: 55%;}
#wishlistreleasedate {float:left; width: 20%;}
#wishlistgenre {float: right; width: 15%;}

Thanks so much for your examples and help!

Just figuring out how to style it now, can’t seem to set background: #color for some reason for the #wishlist_wrapper div.

portem · March 30, 2011, 7:37pm

yeah any styling I do works very incorrectly… maybe the way I figured this out wasn’t the best.

Rayzur · March 31, 2011, 4:34am

Hi,
There’s really no reason to use % widths on your floats when the main page wrapper is 740px wide.

Make things easy on yourself and just replace that 90% width on your movie-wrapping div with a px value that is close to the 90% width.

Then do the math and make the float widths work out accordingly.

<!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"/>

<style type="text/css">
#wrapper {
    width: 740px;
    margin:0 auto;
    padding: 10px;
    background:#CCC;
    border: solid 1px #000;
}
#wish-wrap {
    width: 700px;
    margin:0 auto;
    overflow:hidden;/*contain floats*/
}
#movie {
    float:left;
    width:300px;
    min-height:300px;
    background:#CDF;
}
#release, #genre {
    float:left;
    width:190px;/*200 with 10px left margin*/
    margin-left:10px;
    display:inline;/*fix IE6*/
    min-height:300px;
    background:#CDF;
}
#release {background:#EEF;}
</style>

</head>
<body>

<div id="wrapper">
<div id="main">

<div id="wish-wrap">
    <div id="movie">wishlist movie</div>
    <div id="release">wishlist release date</div>
    <div id="genre">wishlist genre</div>
</div>

</div> <!-- end main -->
</div> <!-- end wrapper -->

</body>
</html>

portem · March 31, 2011, 6:03pm

Thank you so much, it is working beautifully. Yay more knowledge!

Appreciate it.