Advanced Web Development
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
 
User Name:
Password:
Remember me
 



Go Back   Dev Articles Community ForumsWeb DesignAdvanced Web Development

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
Thread Tools Search this Thread Display Modes
 
Unread Dev Articles Community Forums Sponsor:
  #1  
Old June 28th, 2007, 12:33 PM
CHornJr's Avatar
CHornJr CHornJr is offline
Contributing User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Nov 2002
Location: New York City
Posts: 236 CHornJr User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 1 Day 1 h 50 m 36 sec
Reputation Power: 12
Send a message via AIM to CHornJr Send a message via MSN to CHornJr Send a message via Yahoo to CHornJr
Angry Lining up two boxes next to each other with CSS

I am trying to get two div boxs next to each other except I can't seem to get them to do that with out brining the text from above up. The two boxes are not the same size (and normally won't be)

Quote:
Originally Posted by CSS Code
#programHeader1{
text-align:center;
}
#programDescription{
margin-left:5%;
margin-right:5%;
}
#programWho{
float:left;
left:0px;
width:49%;
top:0px;
border:1px solid #000000;
}
#programPrerequisites{
float:right;
top:0px;
right:0px;
width:49%;
border:1px solid #000000;
}


PHP Code:
Page Code
/**************************************************  *************************************/
    /* The following object will query the database for the selected program                */
    /**************************************************  *************************************/
        
$getProgramInformation=new DatabaseQuery;
        
$getProgramInformation->database_con=0;
        
$getProgramInformation->table='program';
        
$getProgramInformation->columns='*';
        
$getProgramInformation->whereColumn='programID';
        
$getProgramInformation->whereData=$_GET['programid'];
        
$getProgramInformation->whereLogic='=';
        
$getProgramInformation->limit=1;
        
$programInformation=mysql_fetch_assoc($getProgramI  nformation->querySelect());
    
/**************************************************  *************************************/
    /* Display the Program's Details                                                       */
    /**************************************************  *************************************/
        
?>
        <h1 id="programHeader1"><?php echo $programInformation['programName']." - (".$programInformation['programAbbreviation'].")"?></h1>
        <div id="programDescription"><?php echo stripslashes(str_replace('\n','<br />',$programInformation['programDescription'])); ?></div>
        <div id="programWho">
            <h2 id="programWhoHeader">Who Should Take <?php echo $programInformation['programAbbreviation']; ?> Courses</h2>
            <?php
            $programInformationWho
=preg_split('/\n/',$programInformation['programWho']);
            foreach(
$programInformationWho as $programWho){
                
?>
                <ul id="programWhoUnordered">
                    <li class="programWhoItem"><?php echo stripslashes($programWho); ?></li>
                </ul><!-- Closes line 97 -ul id="programWhoUnordered" -->
                <?php
            
}/* Closes line 95 - foreach($programInformationWho as $programWho) */
            
?>
        </div><!-- Closes line 91 - div id="programWho" -->
        <div id="programPrerequisites">
            <h2 id="programPrerequisitesHeader">Prerequisites for the <?php echo $programInformation['programAbbreviation']; ?> Program</h2>
            <?php
            $programInformationPrerequisites
=preg_split('/\n/',$programInformation['programPrerequesites']);
            foreach(
$programInformationPrerequisites as $programPrerequesites){
                
?>
                <ul id="programPrerequisitesUnordered">
                    <li class="programPrerequisitesItem"><?php echo stripslashes($programPrerequesites); ?></li>
                </ul><!-- Closes line 110 - ul id="programPrerequisitesUnordered" -->
                <?php
            
}/* Closes line 108 - foreach($programInformationPrerequisites as $programPrerequisites) */
            
?>
        </div><!-- Closes line 104 - div id="programPrerequisites" -->
        <div id="programCost"><span id="programCostHeader">Cost for Full Program: </span>$<?php echo $programInformation['programCost']; ?></div>
        <div id="programCoursesList">
            <h2 id="programCoursesHeader">Courses in the <?php echo $programInformation['programAbbreviation']; ?></h2>
            <?php
            
/**************************************************  *************************************/
            /* Get the Courses in this Program*/
            /**************************************************  *************************************/
                
$getProgramCoursesList=new DatabaseQuery;
                
$getProgramCoursesList->database_con=0;
                
$getProgramCoursesList->table='course';
                
$getProgramCoursesList->columns=array('programID','courseID','courseNumber  ','courseName','courseCost');
                
$getProgramCoursesList->whereColumn='programID';
                
$getProgramCoursesList->whereData=$_GET['programid'];
                
$getProgramCoursesList->whereLogic='=';
                
$queryProgramCoursesList=$getProgramCoursesList->querySelect();
                while(
$programCoursesList=mysql_fetch_assoc($query  ProgramCoursesList)){
                    
?>
                    <div class="programCourse">
                        <a href="../courses/?course=<?php echo $programCoursesList['courseID']; ?>" title="<?php echo $programCoursesList['courseName']; ?> Information" onmouseover="window.status='<?php echo $programCourseList['courseName']; ?> Information';return true;" onmouseout="window.status='';" class="programCourseLink">
                            <?php echo $programCoursesList['courseNumber']." - ".$programCoursesList['courseName']." - $".$programCoursesList['courseCost']; ?>
                        </a><!-- Closes line 137 - a href="../courses/?course=<?php echo $programCoursesList['courseID']; ?>" title="<?php echo $programCoursesList['courseName']; ?> Information" onmouseover="window.status='<?php echo $programCourseList['courseName']; ?> Information';return true;" onmouseout="window.status='';" class="programCourseLink" -->
                    </div><!-- Closes line 134 - div class="programCourse" -->
                    <?php
                
}/* Closes line 132 - while($programCoursesList=mysql_fetch_assoc($query  ProgramCoursesList)) */
            
?>
        </div><!-- Closes line 118 - div id="programCourses" -->
        <?php 


I have tried putting thm inside of another box as well, but that didn't work either
__________________
CHornJr
"One day I'll know what I am doing"
My Blog
Suanhacky Lodge #49
Rebel Squadrons

Reply With Quote
  #2  
Old June 28th, 2007, 01:33 PM
Humanetainit's Avatar
Humanetainit Humanetainit is offline
Beyond help
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Jan 2007
Location: The Netherlands
Posts: 222 Humanetainit User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 2 Days 1 h 32 m 30 sec
Reputation Power: 8
Have you tried adding display:inline; to the div on the left?
__________________
One World... Humanetainit | Program secure

Reply With Quote
  #3  
Old June 28th, 2007, 02:42 PM
CHornJr's Avatar
CHornJr CHornJr is offline
Contributing User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Nov 2002
Location: New York City
Posts: 236 CHornJr User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 1 Day 1 h 50 m 36 sec
Reputation Power: 12
Send a message via AIM to CHornJr Send a message via MSN to CHornJr Send a message via Yahoo to CHornJr
Quote:
Originally Posted by Humanetainit
Have you tried adding display:inline; to the div on the left?
Didn't work unless I did something wrong

Reply With Quote
  #4  
Old July 2nd, 2007, 09:22 AM
CHornJr's Avatar
CHornJr CHornJr is offline
Contributing User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Nov 2002
Location: New York City
Posts: 236 CHornJr User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 1 Day 1 h 50 m 36 sec
Reputation Power: 12
Send a message via AIM to CHornJr Send a message via MSN to CHornJr Send a message via Yahoo to CHornJr
Ok, I modified it so the two float boxes are inside another box. So I now have it working In IE7 and Opera 9.21. It is NOT working in Firefox 2.0.0.4.

Most of my audience will most likly be using IE 7 (Maybe 6 on some). However there will be enough using Firefox that I need it to look correct in there as well.

I have attached a picture of how it looks in IE and Firefox. The Green Box is the box that the two floats should be in. THe two floats are in a black box, the red box is the cost which should come right below the two floats and the Blue is the Courses box

Quote:
Originally Posted by CSS Code
#programWhoPrereq{
display:inline-block;
border:1px solid green;
width:100%;
}
#programWho{
float:left;
width:49.8%;
border:1px solid #000000;
}
#programWhoHeader{
text-decoration:underline;
text-align:center;
}
#programPrerequisites{
float:right;
width:49.8%;
border:1px solid #000000;
}
#programPrerequisitesHeader{
text-decoration:underline;
text-align:center;
}
#programCost{
font-weight:bold;
font-size:18px;
border:1px solid red;
}
#programCoursesList{
border:1px solid blue;
}
#programCoursesListHeader{
text-decoration:underline;
text-align:center;
}
.programCourseLink{
text-decoration:none;
color:#000000;
}

PHP Code:
Page
<div id="programWhoPrereq">TEST
            
<div id="programWho">
                <
h2 id="programWhoHeader">Who Should Take <?php echo $programInformation['programAbbreviation']; ?> Courses</h2>
                <?php
                $programInformationWho
=preg_split('/\n/',$programInformation['programWho']);
                foreach(
$programInformationWho as $programWho){
                    
?>
                    <ul id="programWhoUnordered">
                        <li class="programWhoItem"><?php echo stripslashes($programWho); ?></li>
                    </ul><!-- Closes line 101 -ul id="programWhoUnordered" -->
                    <?php
                
}/* Closes line 99 - foreach($programInformationWho as $programWho) */
                
?>
            </div><!-- Closes line 95 - div id="programWho" -->
            <div id="programPrerequisites">
                <h2 id="programPrerequisitesHeader">Prerequisites for the <?php echo $programInformation['programAbbreviation']; ?> Program</h2>
                <?php
                $programInformationPrerequisites
=preg_split('/\n/',$programInformation['programPrerequesites']);
                foreach(
$programInformationPrerequisites as $programPrerequesites){
                    
?>
                    <ul id="programPrerequisitesUnordered">
                        <li class="programPrerequisitesItem"><?php echo stripslashes($programPrerequesites); ?></li>
                    </ul><!-- Closes line 114 - ul id="programPrerequisitesUnordered" -->
                    <?php
                
}/* Closes line 112 - foreach($programInformationPrerequisites as $programPrerequisites) */
                
?>
            </div><!-- Closes line 108 - div id="programPrerequisites" -->TEST2
        </div><!-- Closes line 94 - div id="programWhoPrereq" -->
        <div id="programCost"><span id="programCostHeader">Cost for Full Program: </span>$<?php echo $programInformation['programCost']; ?></div>
        <div id="programCoursesList">
            <h2 id="programCoursesListHeader">Courses in the <?php echo $programInformation['programAbbreviation']; ?></h2>
            <?php
            
/**************************************************  *************************************/
            /* Get the Courses in this Program*/
            /**************************************************  *************************************/
                
$getProgramCoursesList=new DatabaseQuery;
                
$getProgramCoursesList->database_con=0;
                
$getProgramCoursesList->table='course';
                
$getProgramCoursesList->columns=array('programID','courseID','courseNumber  ','courseName','courseCost');
                
$getProgramCoursesList->whereColumn='programID';
                
$getProgramCoursesList->whereData=$_GET['programid'];
                
$getProgramCoursesList->whereLogic='=';
                
$queryProgramCoursesList=$getProgramCoursesList->querySelect();
                while(
$programCoursesList=mysql_fetch_assoc($query  ProgramCoursesList)){
                    
?>
                    <div class="programCourse">
                        <a href="../courses/?course=<?php echo $programCoursesList['courseID']; ?>" title="<?php echo $programCoursesList['courseName']; ?> Information" onmouseover="window.status='<?php echo $programCoursesList['courseName']; ?> Information';return true;" onmouseout="window.status='';" class="programCourseLink">
                            <?php echo $programCoursesList['courseNumber']." - ".$programCoursesList['courseName']." - $".$programCoursesList['courseCost']; ?>
                        </a><!-- Closes line 137 - a href="../courses/?course=<?php echo $programCoursesList['courseID']; ?>" title="<?php echo $programCoursesList['courseName']; ?> Information" onmouseover="window.status='<?php echo $programCourseList['courseName']; ?> Information';return true;" onmouseout="window.status='';" class="programCourseLink" -->
                    </div><!-- Closes line 134 - div class="programCourse" -->
                    <?php
                
}/* Closes line 132 - while($programCoursesList=mysql_fetch_assoc($query  ProgramCoursesList)) */
            
?>
        </div><!-- Closes line 118 - div id="programCourses" --> 
Attached Files
File Type: zip Screen Shots.zip (71.6 KB, 543 views)

Reply With Quote
  #5  
Old July 2nd, 2007, 12:27 PM
Humanetainit's Avatar
Humanetainit Humanetainit is offline
Beyond help
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Jan 2007
Location: The Netherlands
Posts: 222 Humanetainit User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 2 Days 1 h 32 m 30 sec
Reputation Power: 8
display:inline-block; is not supported by FF; but the hack found here might get you going. I haven't tested it.

Reply With Quote
Reply

Viewing: Dev Articles Community ForumsWeb DesignAdvanced Web Development > Lining up two boxes next to each other with CSS


Developer Shed Advertisers and Affiliates


Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump

Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 


Powered by: vBulletin Version 3.0.5
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.

© 2003-2014 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap