How can I center a div section on web page

[dragon52]

I am trying to build a banner at the top of a web page. This banner is just 3 div sections running across the top of the page, a large middle one and 2 little ones on either side. See code here

<div id="banner">
  <table style="background-image: url('images/banner.jpg'); background-repeat: no-repeat; width:100%; float:right; height:129px;">
    <div class="left"></div>
    <div class="middle" style="background-image: url('banner.jpg'); width:1200px; height:129px;"><label>People and Friends</label></div>
    <div class="right" style="background-image: url('strip.jpg'); background-repeat: repeat; height:129px;"></div>
  </table>
</div>

Because of the back-ground image the middle div size is fixed (1200x129 px). The reason for the 2 little div sections is to center the large middle div. I want it to work for different monitor sizes and so I can’t specify the width of the 2 little div sections, not even in %.

The above code does not work, Does anyone know how I can center this large div in the middle of the page?

Thanks in advance

[sanjib65]

Try this: keep left and right div width to 100px and middle to 800px, hopefully every sceen (now small size is outdated) will fit it.

Best of luck.

[Frinavale]

Well, first of all what are you doing with the table???

An HTML <table> tag cannot have a <div> tag within it.
The HTML<table> tag can only have things like <tr>, <tbody>, and other table-related tags within it.

You should change your HTML to be something valid... something like:

<div id="banner" style="background-image: url('images/banner.jpg'); background-repeat: no-repeat; width:100%; height:129px;">
    <div class="left">
    </div>
    <div class="middle" style="background-image: url('banner.jpg'); width:1200px; height:129px;">
        <label>People and Friends</label>
     </div>
    <div class="right" style="background-image: url('strip.jpg'); background-repeat: repeat; height:129px;">
    </div>
</div>

Now the you have said that the reason you have 2 of the <div>s is to center the main <div>. You don't need to do this. You can center a <div> (any block element) easily using the margin style property.

Setting the left and right margins to auto (and setting the width of the style) will center the <div> in the middle of the page. This same technique does not work for centering the <div> vertically.


So, to center a <div> in the middle of the page you could have a style="margin: 0px auto; width:1000px;". ..this will set the top and the bottom margins to 0px and the left and right margins to auto.

Or you could have style="margin-left:auto;margi n-right:auto; width:1000px;". .. or any other variation of the margin style.

Just make sure you've set the width of the <div> or this won't work.

So you could just have something like:

<div id="banner" style="style="background-image: url('strip.jpg'); background-repeat: repeat; width:100%; height:129px;">
     <div class="middle" style="background-image: url('banner.jpg'); width:1200px; height:129px; margin-left:auto; margin-right:auto;">
        <label>People and Friends</label>
     </div>
</div>

It's a lot simpler than your original solution.

-Frinny

PS I moved your question to the HTML/CSS forum...it didn't really belong in ASP.NET

[dragon52]

Frinavale, sanjib65,

Thanks for your replies.

Frinavale, your suggestion is very good but solved only part of my problem. It gives me a banner with a blank/white section at the 2 ends.

My back-ground image is white on the left and yellow on the right. I want the banner to look like one smooth/continuous picture across the page. That was my other reason for having the 2 little div blocks. I was hoping to have the left block blank (white) and fill the right block with yellow (my original code uses a 1px wide strip in yellow, repeated).

Sorry I didn’t tell you this before. I was trying to keep the problem description simple.

Here is my revised code

<div style="background-image: url('images/banner.jpg'); width:1200px; height:129px; margin-left:auto; margin-right:auto;">
    <table style=" width:100%; height:100%">
        <tr><td class="heading"><label>People and Friends</label></td></tr>
    </table>
</div>

I have used a <table> to center the <label> text. This code works except for the problem of the white bit on the right hand side.

Do you know what I need to do?

Thanks

[Frinavale]

Add the right hand <div> back and and set it to float to the right.

<div style="background-image: url('images/banner.jpg'); width:1200px; height:129px; margin-left:auto; margin-right:auto;">
    <table style=" width:100%; height:100%">
        <tr><td class="heading"><label>People and Friends</label></td></tr>
    </table>
</div>
<div style="float: right;background......"></div>

Or if that doesn't work:

<div style="float: right;background......"></div>
<div style="background-image: url('images/banner.jpg'); width:1200px; height:129px; margin-left:auto; margin-right:auto;">
    <table style=" width:100%; height:100%">
        <tr><td class="heading"><label>People and Friends</label></td></tr>
    </table>
</div>

[dragon52]

Frinavale, I have done what you suggested but the right div (with strip.jpg) does not fill in the blank space properly (it has no width??). Is there a way to do that without using a width attribute ? I don't know what the width should be as it depends on the monitor size.

<div style="float:right; background-image: url('images/strip.jpg'); background-repeat:repeat; height:129px; "></div> 
<div style="background-image: url('images/banner.jpg'); width:900px; height:129px; margin-left:auto; margin-right:auto;">
     <table style=" width:100%; height:100%">
          <tr><td class="heading"><label>People and Friends</label></td></tr>
     </table>
</div>

[drhowarddrfine]

Is this close to what you're trying to do?

<style>
div{margin:0 0 0 auto; background:#990 url(images/banner.jpg) no-repeat; width:1200px; height:129px }
</style>

<div></div>

[dragon52]

drhowarddrfine,

Sorry for the late reply.

I am not sure what your code is meant to do. I really can’t just use a yellow background colour because the yellow on the right of the image is not uniform. That is why I use a 1px vertical strip image repeated horizontally to blend in on the right.

Have we exhausted all options??

I am now thinking of lengthening the image 'banner.jpg' at either end with the correct colours for the widest monitor. I just hope that the image will be centered when displayed on the smaller monitors. I have some banner text "People and Friends" over the background image. This way I don’t need the left and right div at all.

What do you think??

[drhowarddrfine]

Didn't notice your background was a gradient or somesuch. Some of the modern browsers now implement multiple background images from CSS3 but otherwise I can only think to do what you're already doing.

[dragon52]

Thanks everyone for helping. I will see if my idea works.