div align center problem

Question

kevindougans 2 Junior Poster

15 Years Ago

Hi guys,

I'm at my wits end.

What am I doing wrong with the "position: xxx" stuff thats making this page have the center containter aligned to the left?

If I remove left: 0 and right: 0 it makes the main container disappear (which i assume is away miles away to the left or right).

Thanks guys,

Kev

<!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"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>the shop ibiza</title> 
 
 
 
<style type="text/css"> 
<!--
 
 
/* the bit that does the work */
 
body {
  margin:0;
  border:0;
  padding:0;
  height:100%;
  max-height:100%;
  background:#fff;
  font-family:arial, verdana, sans-serif;
  font-size:76%;
  overflow: hidden;
  }
 
/* for internet explorer */
* html body {
  padding:120px 0 50px 0;
  }
 
 
 
#container {
  font-family:"times new roman", serif;
  font-size: 1.2em;
  position:fixed;
  left:0;
  top:60px;
  bottom:60px;
  right:0;
  overflow:auto;
  background:#fff;
  padding:10px;
  text-align:center;
  margin: 0 auto;
  }
 
* html #container {
  height:100%;
  width:100%;
  }
 
#header_container {
  position:absolute;
  top:0;
  width:100%;
  height:60px;
  overflow:visible;
  background:#fff;
  border-bottom:0px solid #fff;
    z-index:100;
  }
* html #header {height:120px;}
 
 
#footer {
  position:absolute;
  bottom:0;
  width:1000px;
  height:35px;
  overflow:auto;
  text-align:right;
  background:#ec1919;
  border-top:1px solid #000;
  }
* html #footer {height:50px;}
 
/* end of bit that does the work */
 
 
 
 
#content_container {
	position:absolute;
	left:0px;
	top:30px;
	width:1000px;
	height:330px;
    padding-bottom:17px;
	z-index:2;
}
 
#logo {
	position:absolute;
	left:0px;
	top:12px;
	width:254px;
	height:58px;
	z-index:4;
}
#navigation {
	position:absolute;
	left:255px;
	top:40px;
	width:547px;
	height:26px;
	z-index:5;
}
#language_bar {
	position:absolute;
	left:0px;
	top:10px;
	width:1000px;
	height:12px;
	z-index:6;
}
#content {
	position:absolute;
	left:-1px;
	top:3px;
	width:1000px;
	height:330px;
    padding-bottom:17px;
	z-index:7;
}
#blurb {
	position:absolute;
	left: 40px;
	top: 340px;
	width:600px;
	height:170px;
	z-index:8;
	font: normal small "Lucida Grande", Lucida, Verdana, sans-serif;
	word-spacing: 1px;
	text-align: justify;
}
#caption {
	position:absolute;
	left:675px;
	top:350px;
	width:400px;
	height:98px;
	z-index:9;
}
 
 
#nav{
	position:absolute;
	left:338px;
	top:48px;
	width:473px;
	height:16px;
	z-index:200;
	background:white;
}
#nav ul,
#nav ul li {
margin:0;
padding:0;
list-style:none;
z-index: 200;
}
#nav ul li{
float:left;
display:block;
z-index: 200;
}
 
#nav ul li a:link,
#nav ul li a:visited{
color:#000000;
font-size:14px;
font-weight:bold;
text-decoration:none;
padding:0 10px 0 3px;
display:block;
z-index: 200;
}
#nav ul li a:hover{
color:#EBEFF7;
z-index: 200;
}
#nav ul li ul li{
float:none;
display:block;
z-index: 200;
}
#nav ul li ul li a:link,
#nav ul li ul li a:visited{
color:#444;
font-size:11px;
font-weight:bold;
text-decoration:none;
padding:0 10px;
clear:both;
border-bottom:solid 1px #DEDEDE;
z-index: 200;
}
#nav ul li ul li a:hover{
color:#3B5998;
background:#EBEFF7;
z-index: 200;
}
 
.submenu {
position: absolute;
width: 160px;
background: #FFF;
padding: 10px;
border: solid 1px #2E4B88;
border-top: none;
display: none;
line-height: 26px;
z-index: 200;
}
 
img {
   border:0px;
}
 
 
.news_container{
    width:200px;
    height: 100px;
    border-width: .1em;
    border-style: dotted;
    border-color: #900;
}
.news_title {
    position:relative;
    left: 50px;
    width: 50px;
    background: #ec1919;
}
 
.news_body {
    position:relative;
    left: 100px;
    top: 0px;
 
}
 
.news_image {
    position:relative;
    left: 0px;
    float:left;
    top:0px;
    width:50px;
}
 
 
body
{
	text-align: center;
}
 
div#everything
{
	margin: 0px auto;
	text-align: left;
    width: 1000px;
}
 
 
-->
</style> 
 
    <link rel="stylesheet" type="text/css" href="/css/style.css"/> 
    <link rel="stylesheet" type="text/css" href="/css/ticker-style.css"/> 
 
    <link rel="stylesheet" type="text/css" href="/galleryview/galleryview.css"/> 
 
 
<script type="text/javascript"
 src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
 
 
<script type="text/javascript"> 
function nav(){
$('div#nav ul li').mouseover(function() {
$(this).find('ul:first').show();
$(this).css('zIndex', 200);
});
 
$('div#nav ul li').mouseleave(function() {
$('div#nav ul li ul').hide();
});
 
$('div#nav ul li ul').mouseleave(function() {
$('div#nav ul li ul').hide();
});
};
 
$(document).ready(function() {
nav();
});
</script> 
 
<script type="text/javascript" src="/js/script.js"></script> 
<script type="text/javascript" src="/js/jquery.ticker.js"></script> 
 
<script type="text/javascript" src="/galleryview/jquery.galleryview-2.1.1-pack.js"></script> 
<script type="text/javascript" src="/galleryview/jquery.timers-1.2.js"></script> 
 
<script type="text/javascript" src="/galleryview/src/galleria.js"></script> 
 
 
</head> 
 
<body> 
<div id="everything"> 
<div id="header_container"> 
	<div id="logo"><img src="/assets/header.png" width="1000" height="57" alt="logo" /></div> 
  <div id="nav"> 
<ul> 
            <li><a href="/"><img src="/assets/btn_about.png" alt="about" /></a> 
            </li> 
            <li><a href="#"><img src="/assets/btn_services.png" /></a> 
                <ul class="submenu"> 
                <li><a href="/en/services/events">Event Management</a></li> 
                <li><a href="/en/services/incentives">Incentives & Conference</a></li> 
                <li><a href="/en/services/product_placement">Product Placement</a></li> 
                <li><a href="/en/services/marketing">Marketing & on island promotions</a></li> 
                <li><a href="/en/services/photo_shoots">Photo shoot & production</a></li> 
                <li><a href="/en/services/weddings">Bespoke wedding design</a></li> 
                <li><a href="/en/services/private_parties">Private parties</a></li> 
                <li><a href="/en/services/boat_charter">Boat & Air Charter</a></li> 
                <li><a href="/en/services/money_cant_buy">Money can't buy</a></li> 
 
                </ul> 
            </li> 
            <li><a href="/en/news"><img src="/assets/btn_news.png" alt="" /></a> 
            </li> 
            <li><a href="/en/clients"><img src="/assets/btn_clients.png" /></a> 
            </li> 
            <li><a href="#"><img src="/assets/btn_gallery.png" /></a> 
                <ul class="submenu"> 
                <li><a href="#">Coming Soon</a></li> 
                </ul> 
            </li> 
            <li><a href="#"><img src="/assets/btn_your_photos.png" /></a> 
                <ul class="submenu"> 
                <li><a href="#">Coming Soon</a></li> 
                </ul> 
            </li> 
            <li><a href="/en/contact"><img src="/assets/btn_contact.png" /></a> 
            </li> 
    </ul> 
    </div> 
</div> 
 
<div id="container"> 
 
 
<div id="language_bar"> 
  <div align="right"><img src="/assets/language_bar.png" width="92" height="10" alt="languages" /></div> 
</div> 
 
<div id="content_container"><div id="myGallery"> 
<img src="/images/about/image-1.jpg" class="active" height="325" width="1000" alt="TheShopIbiza.com Event Management" /> 
<img src="/images/about/image-2.jpg" height="325" width="1000"  alt="TheShopIbiza.com Event Management" /> 
<img src="/images/about/image-3.jpg" height="325" width="1000"  alt="TheShopIbiza.com Event Management" /> 
<img src="/images/about/image-4.jpg" height="325" width="1000"  alt="TheShopIbiza.com Event Management" /> 
<img src="/images/about/image-5.jpg" height="325" width="1000"  alt="TheShopIbiza.com Event Management" /> 
<img src="/images/about/image-6.jpg" height="325" width="1000"  alt="TheShopIbiza.com Event Management" /> 
<img src="/images/about/image-7.jpg" height="325" width="1000"  alt="TheShopIbiza.com Event Management" /> 
<img src="/images/about/image-8.jpg" height="325" width="1000"  alt="TheShopIbiza.com Event Management" /> 
<img src="/images/about/image-9.jpg" height="325" width="1000"  alt="TheShopIbiza.com Event Management" /> 
</div> 
 
 
<div id="blurb"> 
The Shop is Ibiza's most established and best loved award winning marketing and special events agency.
During our 10 years on the island our reputation has grown as one of professionalism and dedication.
Our expert, all year round team is at your disposal.
Our aim is simple, offer the best service possible to our corporate and private clients.
We may be Ibiza's biggest service agency but we remain compact and personally dedicated to treating
    every project as if it was our own.
 
 
</div> 
<div id="caption"> 
<div align="center"><img src="/assets/tagline.png" alt="tagline" width="213" height="75" /></div> 
</div> 
 
 
</div> 
 
<div class="clear"></div> 
 
</div> 
 
<div id="footer"> 
<div id="ticker-wrapper" class="no-js"> 
	<ul id="js-news" class="js-hidden"> 
		<li class="news-item"><a href="#">DJs (and set times) to be announced soon for 2011 Internation Music Summit.</a></li> 
		<li class="news-item"><a href="#">Guest list for our events must be sorted 72 hours before doors open.</a></li> 
		<li class="news-item"><a href="#">We would like to wish everyone a "Happy New Year".</a></li> 
		<li class="news-item"><a href="#">Lots of new clients coming soon, watch this space...</a></li> 
	</ul> 
</div> 
</div> 
 
<script type="text/javascript"> 
	$(function () {
		$('#js-news').ticker();
	});
</script> 
 
 
</div> 
 
</body> 
</html>

html-css user-interface web-design

3 Contributors
3 Replies
236 Views
11 Hours Discussion Span
Latest Post 15 Years Ago Latest Post by kevindougans

Dani AI

Generated 8 Months Ago

Starting over is the right call. was spot on — using position:fixed / position:absolute for the main site wrapper forces elements out of the normal flow (anchored to the viewport or a positioned ancestor), so centering via margin: 0 auto won't behave as expected. ’s +1 is fair — move layout into the normal flow, then use modern layout tools (flexbox / grid or simple centered wrapper) for predictable resizing.

A practical plan: make a full‑width header/footer (if they need background color/full bleed), and a centered content wrapper for the filmstrip. Keep the wrapper fluid with max-width + margin:0 auto so it grows on large monitors and shrinks on small ones. For the filmstrip choose one of two approaches: (a) full‑bleed hero (use background images or an edge‑to‑edge container) or (b) constrained, centered gallery (images scale to the wrapper). Use object-fit: cover or CSS aspect-ratio to preserve a widescreen crop without distortion, and srcset/sizes for faster, responsive image loading.

Minimal example (structure + responsive rules):

<div class="site">
  <header class="site-header">…</header>
  <main class="wrapper">
    <div class="filmstrip">
      <img src="…" alt="">
    </div>
  </main>
  <footer class="site-footer">…</footer>
</div>

.wrapper { max-width:1200px; margin:0 auto; padding:0 16px; position:relative; }
.filmstrip { width:100%; overflow:hidden; aspect-ratio:16/6; }
.filmstrip img { width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:640px){ .wrapper{padding:0 10px;} .filmstrip{aspect-ratio:4/3;} }

Troubleshooting notes: remove any overflow:hidden on body while testing, inspect computed styles with devtools for stray left/top offsets, and if absolute positioning is required for small pieces (overlays, captions) keep those elements inside a position:relative wrapper so they anchor to the centered container rather than the viewport.

All 3 Replies

drjohn 56 Posting Pro in Training

15 Years Ago

you're using position:fixed and position:absolute

That usually causes lots of problems.

Position:fixed says place it exactly here in the browser, no matter what the user does about scrolling, at these points relative to the corners of the viewport.

I'd suggest scrapping this design which is seriously doomed to failure and will be the source of lots of head banging against walls.

Make a new design.
Use a #wrapper div and give it a width, and style it margin:auto; - now it is centered.
Put your other divs inside it, give each of them a width and float them to the left or to the right. OR set margin:auto on them to center them. Use position:relative.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

shaya4207 8 Junior Poster · Answer 1 · 2011-01-19T00:42:10+00:00

shaya4207 8 Junior Poster

15 Years Ago

+1 for all that drjohn said...

kevindougans 2 Junior Poster · Answer 2 · 2011-01-19T01:20:46+00:00

alright. start again it is. anyone got any ideas on techniques to use for making a website thats basically a header, a widescreen styled filmstrip of images, and a footer... i.e. how to resize for bigger and smaller monitors?

div align center problem

Dani AI

Recommended Answers Collapse Answers

All 3 Replies

Recommended Answers