View Full Version : Move DIV up - What code is correct?

Feb 1st, 2010, 10:56 PM

This is my page:


The content on the right is sitting within a div called the main-image-container. I want it so that the top two images on the right line up with the top of the logo on the left. To do this it needs to be moved up.

Here is the CSS:

#main-image-container {
width: 690px;
margin: 0 auto;
position: relative;
/*margin:0 auto 0 10%;*/
text-align: center;
/*top: -70px;*/


You can see that I tested the negative margin at the bottom with negative 70px. This didnt actually do anything, I was hoping it would move it up 70px. What code should I be using?

Feb 2nd, 2010, 01:18 AM
The main problem you are having is that you are working on the wrong div. In your file main.php you have

<div id="main-image-container" style="display: none;">
This is not the div with your images. The div you need to work on is:

<div id="subalbums-container">
Try making the following changes to your theme.css:

html, body {
margin: 0;
padding: 0;
height: 89%;
color: #333;
font: 0.7em Verdana, "Lucida Grande", Arial, Helvetica, sans-serif;
text-align: center;
#gallery {
min-height: 100%;
width: 90%;
margin: 5% auto;
background: white;
#white-rap {
/* width: 760px; */
/*width: 980px;*/
/* width:90%;
margin: 5% auto; */
padding: 0;
background-color: #fff;

text-align: left;
/* -moz-border-radius: 0 0 11px 11px;
-webkit-border-radius: 0 0 11px 11px;*/

#subalbums-container {
background: white;
margin-top: -80px;

It's not perfect (there are problems when the height or width of the browser window is insufficient), but its closer to what you are looking for.

Feb 2nd, 2010, 10:46 AM

Thank you so much for your reply. Your code made this page perfect:

However on the next page the main gallery image is still pushed down. I believe this uses the main-image-container div as shown below, but when I put a negative top margin on this div like you did with yours, it didnt move.

This is the HTML:

<div id="content">
<div id="main-image-container" {if $theme.imageCount == 0}style="display:none"{/if}>
{if $theme.imageCount > 0}
<div id="slideshow-controlsx">
<ul id="control-buttonsx">
<li><button id="controls-left"><img src="{g->theme url="images/controls-left.png"}" alt="{g->text text="Left"}" /></button></li>
<li><button id="controls-play"><img src="{g->theme url="images/controls-right.png"}" alt="{g->text text="Play"}" /></button></li>
<li><button id="controls-right"><img src="{g->theme url="images/controls-right.png"}" alt="{g->text text="Right"}" /></button></li>

Why didnt my negative top margin work like yours did? If I wanted to move the content on both pages up, would I be better off applying a negative top margin to the div id "content" and then removing the one on div id subalbums-container?

Sorry for the extra question