Centre 2 Floating Elements

Question

I have a relativly simple HTML layout where I have a heading div, then below that is a Main div that contains a NavBar on the left side & a ContentDiv on the right side.

My problem is that I cannot get my NavBar & ContentDiv to be displayed in the centre (horizontally) they always sit to the left (so NavBars x position is zero).

Do you know why they(the NavBar & ContentDiv) sit to the left & not centred?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/homepage.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Kamalei - Home Page</title>
    <style type="text/css">
    <!--
        html, body, div, form, fieldset, legend, label, img {  margin: 0;  padding: 0;  }  table {  border-collapse: collapse;  border-spacing: 0; }  th, td {  text-align: left;  }  h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; }  img { border: 0; } 

        body { text-align: center; }

        #backgroundImg  { z-index: -1; position: absolute; left: 0px; top: 0px; }

        #heading        { height: 300px; }
        #main           { display: inline; }
        #navBar         { height: 700px; }
        #content        { height: 700px; }

        /* The above code displays the navbar above the content div but both
           elements are centred
        */

        /* The below code gets the navbar to be displayed to the left of the 
           content div which is what I want but now the 2 elements are not centred 
           they are on the left of the screen

           How do I get them centred?
        */

        #navBar         { float: left; height: 700px; }
        #content        { float: left; height: 700px; }
    -->
    </style>

</head>

<body>

    <div id="heading"> 
        abc
    </div>

    <div id="main">
        <div id="navBar">
            <!-- This is the background image for this element, I know, I know I shd use CSS but it doesn't resize the images that way -->
            <img src="images/navBackground.png" alt="" width="200px" height="700px"/>
        </div>

        <div id="content">
            <!-- This is the background image for this element -->
            <img src="images/contentBackground.png" alt="" width="800px" height="700px"/>
        </div>
    </div>


    <!-- Must keep the background image at the bottom of body -->
    <img id="backgroundImg" src="images/background.png" alt="" width="javascript:getScreenSize()['width']+px" height="1000px"/>

</body>

</html>

grc · Accepted Answer · 2011-06-04T07:01:55.570

3

Try this:

#navBar         { display: inline; height: 700px; }
#content        { display: inline; height: 700px; }
#main           { margin: 0 auto; }

EDIT:

Updated code. I'm not sure if it's what you're looking for or not.

edited Jun 04 '11 at 07:01

answered Jun 04 '11 at 06:56

grc

22,885
5
42
63

Thanks but it didn't move them from the left - EDIT: scratch that after I put in inline it does now work. Thanks :) – user593747 Jun 04 '11 at 07:03
Could you please answer http://stackoverflow.com/questions/9943560/html-alignment-issue-in-one-machine-only-both-ie8 ? – LCJ Mar 30 '12 at 13:19

score 0 · Answer 2 · answered Jun 04 '11 at 07:00

0

the last two css statements say float: left. thats why they're on the left =)

edit:

ah okay.... do i see that right: you want the nav left of the content, but both together should be centered?

answered Jun 04 '11 at 07:00

mightyplow

519
2
6
11

1

but i don't see where it should be centered because nothing has an explicite width or something like that. or do u just want to have the text centered? by the way: floated elements should always have a width because you never know what the browsers do otherwise. – mightyplow Jun 04 '11 at 07:06

Centre 2 Floating Elements

2 Answers2