Displaying 3 divs 'inline' ?

**portem** · Mar 28, 2011 20:07

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?

**Rayzur** · Mar 28, 2011 20:47

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** · Mar 28, 2011 21:08

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** · Mar 28, 2011 21:11

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

**Rayzur** · Mar 28, 2011 22:46

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>

**Rayzur** · Mar 28, 2011 23:54

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>

**portem** · Mar 29, 2011 18:50

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;
}

**portem** · Mar 30, 2011 12:55

Nailed it, did this in my stylesheet:

Code:

#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** · Mar 30, 2011 13:37

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

**Rayzur** · Mar 30, 2011 22:34

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.

Code HTML4Strict:

<!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** · Mar 31, 2011 12:03

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

Appreciate it.

User Tag List

Thread: Displaying 3 divs 'inline' ?

Thread Tools

Display

Displaying 3 divs 'inline' ?

Bookmarks

Bookmarks

Posting Permissions