[SOLVED] Annoying.. alignment.

PicoDeath · #1 (**permalink**) Dec 9th, 2007, 00:28

Once again, I got a small issue with aligning my navs.

I never really do sites this way(rows for content, if you get me).

So, I'm unclear on how to fix it.

http://www.360sigs.com/360sigslayoutnew/
http://www.360sigs.com/360sigslayoutnew/style.css

How come the navigation on the right hand side starts when the main content ends?

alexgeek · #2 (**permalink**) Dec 9th, 2007, 00:47

Change the bold in the following from right to left. Should fix your problem.

#navigation{
width: 705px;
height: 11px;
padding: 8px;
margin: auto;
text-align: right;
background-image: url(images/navigationbg.gif);
background-repeat: no-repeat;
}

PicoDeath · #3 (**permalink**) Dec 9th, 2007, 10:19

Think you're looking at the wrong thing, just right of all the text there's a different coloured box, why is aligned with 'Wheres My Gamercard' I want it moved up.

Lchad · #4 (**permalink**) Dec 9th, 2007, 11:40

There isn't enough room for the div's to align side by side. Either reduce the right column div by a few pixels, or reduce the size of the subheading graphics "what now.gif" by a few pixels.

The easier solution is just to reduce the "rightside div" by a pixel or two or three until it rises up.

masonbarge · #5 (**permalink**) Dec 9th, 2007, 12:26

Yar, Lchad probably has it. I haven't counted up pixels, but suspect #1 is that you simply have too many of the little buggers in the #rightside div.

If you want to avoid this problem, try using percentage widths for all internal divs.

Another possible problem (now or in the future) is the Google ad pushing the column width; these can cause multiple width instructions. I suggest you take out any horizontal margins/padding from div's holding exterior formatting (such as an ad) until the page works correctly.

Also, if you mix float directions, you can run into unanticipated problems. If I can make a suggestion, float the columns in the same direction until the page renders correctly in all browsers. Then if you want to float the right column to the right for fine-tuning, you can do it from a position of full control.

dab42pat · #6 (**permalink**) Dec 9th, 2007, 21:44

if you remove float:right from #rightside that will allow it to ride to the top you could then add margin-top:2px; or whatever you want to position it.

PicoDeath · #7 (**permalink**) Dec 11th, 2007, 11:26

Are you sure? I've reduced it by around 10 pixels and it's still messing up.

Lchad · #8 (**permalink**) Dec 11th, 2007, 21:39

Hey Picodeath.. looks like the order of the html was giving you problems.
Instead of having the #rightside div after all the left column divs, I moved it up and now it seems to be working.
See code in red below:

Code: Select all

<body>
<div id="bannercontainer">
    <div id="banner"></div>
    <div id="navigation">Homepage - Categories - Submit - About - Contact Us</div>

</div>



<div id="greybar">
    <div id="blackbar"></div>
</div>
<div id="contentcontainer">
<div id="rightside">535</div>
    <div id="welcomeheader"></div>
    <div class="headercontent">
        Welcome to 360sigs, We’re a recentlly launched Xbox360 Gamercard website 
        supplying high quality Xbox360 Gamercards. A Gamercard is a graphic image 
        which will extract information from your Xbox Live account and then display 
        it onto the image. The information it will display will relate to your account, 
        such as your Gamertag, Gamerscore and some of the last games you played! 
        This resource is completely free however you can donate to help keep the site running.
    </div>

    <div id="headerad">
        <script type="text/javascript"><!--
        google_ad_client = "pub-3964916248109659";
        //468x60
        google_ad_slot = "8858277586";
        google_ad_width = 468;
        google_ad_height = 60;
        //--></script>
        <script type="text/javascript"
        src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
        </script>
    </div>
    
    <div id="random"></div>
    <div class="headercontent">
        Random Random Random Random Random Random Random Random Random Random
        Random Random Random Random Random Random Random Random Random Random
        Random Random Random Random Random Random Random Random Random Random
        Random Random Random Random Random Random Random Random Random Random
        Random Random Random Random Random Random Random Random Random Random
        Random Random Random Random Random Random Random Random Random Random
        </br></br>

    </div>
    
    <div id="wheresthecard"></div>
    <div class="headercontent">
        So you’re wondering about where the Gamercards are? Well, you can 
        either click one of the Random Categories above or click the ‘Categories’ 
        tab located in the top right. Here you will find an Alphabet browser which 
        you can browse the Gamercards very easyily. Simply click the letter and find 
        a Game which you are interested in, enter your Xbox Live Gamertag and click 
        Generate! You’ll find some easy links below it, simply find the one which 
        suits your need and copy and then paste it where you want it
        (Blog, forum signature or your website).
    </div>
    
</div>
<div id="footer"></div>
</body>

PicoDeath · #9 (**permalink**) Dec 11th, 2007, 23:07

Wow, I would've never guessed it was that.

Thanks.

Lchad · #10 (**permalink**) Dec 12th, 2007, 11:15

No problem!

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
[SOLVED] CSS Alignment Issue	AaronSmith	Web Page Design	5	Jan 23rd, 2008 14:21
[SOLVED] a span alignment	pesho318i	Web Page Design	7	Dec 12th, 2007 08:36
[SOLVED] Cross browser alignment	Mulith	Starting Out	12	Nov 14th, 2007 04:07
This ImageMap is annoying me!	Dapandyman	JavaScript Forum	2	Nov 14th, 2006 20:02
very annoying DATES	benbacardi	Classic ASP	15	May 26th, 2005 12:51

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
[SOLVED] Annoying.. alignment.