CSS Position

Hi Experts,

I have the following HTML and PHP code, which is part of a large application I am building on, and I would like to know how can I get my divNavLeft and divNavRight to align horizontally with the top of divPageTitles.

However, the trick is, since this is a part of a larger application, divPageTitles is actually part of a general include, so I cannot structure my code as divNavLeft, divPageTitles, divNavRight, navLeft and Right need to be coded after divPageTitles. I think that CSS have something that you can change the position even though the code structure is not in order.

Any help will be appreciated.

#divPageTitles{
    border: 2px solid black;
    width: 250px;
    margin: 0px auto;
}

#divNavLeft{
    border: 2px solid blue;
    width: 605px;
    float: left;
    position: absolute;
    margin-top: 0px;
}

#divNavRight{
    border: 2px solid green;
    width: 605px;
    float: right;
}

Open in new window


<html lang="en">

 <head>
	<meta charset="utf-8">
        <title>$app_title</title>
	<link rel="stylesheet" href="../styles/main.css">
	<link rel="stylesheet" href="../styles/dispatch.css">
</head>

    <body>

    <div id="divPageTitles">
        <h1>$app_title</h1><br>
        <h2>$page_title</h2>
    </div>        
        <!--Content Start-->

        <div id="divNavLeft">
            Left
        </div>
        
        <div id="divNavRight">
            Right
        </div>
        
        <!--Content Finish-->

    </body>
 
 </html>

Open in new window

APD TorontoSoftware DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Tom BeckCommented:
As long as all elements are in the same parent container and that container has its position set to something other than static, you can position the nav elements absolutely anywhere you like relative to the page titles. Using static widths for the containers presents a problem because it does not allow for narrow screens. In this fiddle I am using percentages for widths.

http://jsfiddle.net/mf4kfy51/
APD TorontoSoftware DeveloperAuthor Commented:
Again, because this an include and not all pages will have Left and Right Navigation, I cannot use a wrapper.

I am thinking something like position static or fixed?
Tom BeckCommented:
Position static is the default condition, it changes nothing. Position fixed has the same affect on elements as position absolute in that it removes the element from the normal flow and defaults to top:0, left:0.

I don't understand why the wrapper is not an option. If the Left and Right navigation is on page A but not page B, nothing is affected by having the wrapper in place on page B.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
APD TorontoSoftware DeveloperAuthor Commented:
Here is my file structure:

page_setup.php
<?php 

function show_header(){
    global $env;
    global $page_title;
    global $css_files;
    global $body_load;
?>

 <!DOCTYPE html>
<html lang="en">

 <head>
	<meta charset="utf-8">
        <title><?php echo $env['app_title']; ?></title>
	<link rel="stylesheet" href="<?php echo $env['url'] . '/styles/main.css'; ?>">
        
    <?php foreach ($css_files as $css): ?>    
        <link rel="stylesheet" href="<?php echo $env['url'] . '/styles/' . $css; ?>">
    <?php endforeach; ?>
        
</head>

<?php
    
    if (isset($body_load)){
        $body_load = 'onLoad=' . $body_load;
    } else {
        $body_load = '';
    }

?>

    <body <?php echo $body_load; ?>>

    <div id="divPageTitles">
        <h1><?php echo $env['app_title']; ?></h1><br>
        <h2><?php echo $page_title; ?></h2>
    </div>
        <!--Content Start-->
<?php
}
function show_footer(){
?>
        <!--Content Finish-->

    </body>
 
 </html>
<?php
}

Open in new window


any_other_page.php
<?php 
$css_files = array();
$css_files[] = '';

show_header();
?>

    <!--content-->
    
    <!--Place where appropriate-->
    <?php require_once '../utilities/messages.php'; ?> 

<?php    
show_footer();
?>

Open in new window


So, how would I accommodate the wrapper
Tom BeckCommented:
You include the beginning of the wrapper div right after the body tag in whatever page generates that tag...
<body <?php echo $body_load; ?>>

      <div id="wrapper"><!-- start content wrapper -->

Open in new window

Add the wrapper closing tag in whatever file prints out the closing body tag...
 <!--Content Finish-->
        
      </div><!-- end content wrapper -->
      
    </body>
 
 </html>

Open in new window

Wordpress does it exactly like that. There are header.php, page.php, and a footer.php files. The three are combined to make a complete page. The <body> start tag is in the header.php file.

Using a wrapper div is also just so you can style it separately if desired. It's not required. The <body> itself is a parent already so it just needs position:relative to make this work. The difference is, the body is always styled to cover the whole window. You may not want that for your header so you use a child of the body (like a wrapper div) so you can style it differently.

Thanks for the points.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.