[solved] Help : Brilliance Skin

[fsxsimulation]

Hi

My sidebar on brilliance skin is being showed under the mainarea. Please kindly help.

Thanks

[stuartpb]

Hi

My sidebar on brilliance skin is being showed under the mainarea. Please kindly help.

Thanks

Have you tried changing the width of the main area? Also check that the floats are correct. Without seeing the code, or the site, it's hard to say exactly what the problem is.

[fsxsimulation]

OK posting screenshots 1 minute

[Strider]

The cause is simple, the sidebar, or the main area is too large, reduce the size of one and the other should fit side by side.

[stuartpb]

The cause is simple, the sidebar, or the main area is too large, reduce the size of one and the other should fit side by side.

Cor, there's an echo in here

[fsxsimulation]

CODE DELETED

Edited July 26, 2011 by fsxsimulation

[fsxsimulation]

EDIT: Deleted for double post.

Edited July 26, 2011 by fsxsimulation

[Strider]

Try reducing the padding, as that can cause the box to become wider without you wanting it to.

[fsxsimulation]

Try reducing the padding, as that can cause the box to become wider without you wanting it to.

ok let me try.

[fsxsimulation]

still the same.

[stuartpb]

still the same.

What is the overall width of the page? You're asking for help but not providing much to go on here. A link to the page would be helpful at this point.

[fsxsimulation]

ok here is the screenshot

[stuartpb]

ok here is the screenshot

The screenshot is useless. It doesn't tell us what's causing the problem. It's the HTML and CSS that is used to render the page where the problem lies. Without seeing exactly how you have laid the page out how can you expect anyone to be able to point out what's wrong??

[fsxsimulation]

code delted

Edited July 26, 2011 by fsxsimulation

[stuartpb]

And the HTML?

EDIT: Have you listed all the available CSS above? There is no page styling shown so I still don't know what the overall width of the page is. If you're not prepared to give the info, then no-one is going to be able to help you.

[fsxsimulation]

CODE DELETED

Edited July 26, 2011 by fsxsimulation

[stuartpb]

Ok now we have something to work with. Try increasing the wrapper width until the sidebar is positioned correctly. I would try 960px first. You can work out the required widths by calculating the sum total widths of all the containers, plus the left and right margins on each, this would allow you to work out a layout that would fit into the overall page width:

http://www.w3schools.com/html/html_layout.asp

http://www.htmldog.com/guides/cssadvanced/layout/

http://www.maxdesign.com.au/articles/css-layouts/

[fsxsimulation]

Ok now we have something to work with. Try increasing the wrapper width until the sidebar is positioned correctly. I would try 960px first. You can work out the required widths by calculating the sum total widths of all the containers, plus the left and right margins on each, this would allow you to work out a layout that would fit into the overall page width:

http://www.w3schools.com/html/html_layout.asp

http://www.htmldog.com/guides/cssadvanced/layout/

http://www.maxdesign.com.au/articles/css-layouts/

tried 960px and 1000px no use.

[stuartpb]

Show us the html then, so we can rule out any layout problems there. Better yet just give a damned link to the site!

[fsxsimulation]

ok 1 minute

attaching the layout.tpl

[fsxsimulation]

edit: removed.

Edited July 26, 2011 by fsxsimulation

[stuartpb]

Those tables in the screenshot, what widths have you set on them?

[fsxsimulation]

CODE REMOVED

Edited July 26, 2011 by fsxsimulation

[stuartpb]

You've not closed two divs in the HTML and that's why the sidebar is in the incorrect position. For future reference, if you are having styling/layout issues, having the CSS and HTML displayed will get you help much quicker than it has this time.

       </p>
<br />

</div> <!-- ADD THESE TWO DIV CLOSE TAGS HERE -->
</div>

<!-- Sidearea Ends -->

       <!-- Container Ends -->
       <!-- Footer Starts -->
               <div id="footer">
                       <p class="floatleft">copyright © 2011 - <?php echo date('Y') ?> - <?php echo SITE_NAME; ?> | <a href="http://www.phpvms.net" target="_blank">powered by phpVMS</a> | Template redesigned/reedited by Airblue Virtual</a></p>
                       <p class="floatright"><a href="#">Utility</a>  |  <a href="#">Links</a>  |  <a href="#top">Back to Top</a></p>
               </div>
       <!-- Footer Ends -->
       </div>
<!-- Wrapper Ends -->
</body>
</html>

[fsxsimulation]

ok trying that

[stuartpb]

If that doesn't work, you need to go through your html as there are multiple issues with the formatting.

[fsxsimulation]

THANKS ALOT STAURT :)

+1 To all ur posts

[sOLVED]

[stuartpb]

Glad we got there in the end!

You also need to clear the floats on the sidebar and mainarea, or else the footer will place itself incorrectly if there is little content. You can do so by placing the following code just before the footer div beginning:

<div style="clear:both;"></div>

I set a CSS rule for this purpose:

CSS:

.clearfloats {clear:both}

The I can reuse this in the html like so:

<div class="clearfloats"></div>

[Strider]

Disregard.

Edited July 26, 2011 by Mr.Bean

[stuartpb]

The tables are the cause. They are set too wide. Reduce their size and it should fit nicely.

No they are not the problem, they are set to 100%, and will use 100% of the width of the container they are held in, that being the mainarea div, which is set to 600px.