PDA

View Full Version : Shifted Div boxes


jrs2012
06-29-2011, 03:24 PM
Hey everybody,

I am a brand new member for this forum so my apologies if this has already been asked. I am student worker who has been put to the task of creating a site from scratch for a laboratory here on campus. This is my first site to ever create. I have made a template for the site but I seem to be having some consistency problems.
In the template I have 3 div boxes (2 sidebars flanking a main content area) that sit just below a banner. On the template the div boxes maintain the same distance below the banner but when I make a page from the template the right most sidebar seems to drop by about 60 pixels while the other two divs stay where they should. I searched high and low through my code and it is consistent through all three divs. Would anyone be able to give me a little help as to why it is doing this?

Thanks!
Joey

Corrosive
06-29-2011, 03:25 PM
Any chance of seeing this live somewhere Joey?

jrs2012
06-29-2011, 03:29 PM
Unfortunately no. This site hasnt gone live just yet. I can post the css and html for it though.

html:
<!-- Edit section for left_column-->
<div id="left_column">
<p>&nbsp;</p>
<div id="q_a"><img src="../images/Q&amp;A.png" width="125" height="85" /></div>
<div id="events"><img src="../images/events.png" width="125" height="85" /></div>
<div id="useful_info"><img src="../images/useful_info.png" width="125" height="85" /></div>
</div>

<!-- End left_column Edit area-->

<!-- Edit section for center_column-->
<!-- TemplateBeginEditable name="main_content" -->
<div id="center_column">Content for id "center_column" Goes Here</div>
<!-- TemplateEndEditable -->
<!-- End center_column Edit area-->

<!-- Edit section for right_column-->
<div id="right_column">
<div id="rc_links">
<p><a href="http://www.tamu.edu/" title="Texas A&M" target="_blank">Texas A&amp;M</a></p>
<p><a href="http://engineering.tamu.edu/" title="Texas A&M Engineering" target="_blank">Texas A&M &nbsp;&nbsp;&nbsp;Engineering</a></p>
<p><a href="http://nuclear.tamu.edu/" title="Texas A&M Department of Nuclear Engineering" target="_blank">Nuclear Engineering</a></p>
<p><a href="http://tees.tamu.edu/v2/" title="Texas Engineering Experiment Station" target="_blank">TEES</a></p>
</div>
<div id="rc_list">
<ul id="MenuBar1" class="MenuBarVertical">
<li><a href="#">Home</a></li>
<li><a href="#" class="MenuBarItemSubmenu">About Us</a>
<ul>
<li><a href="#">General Info</a></li>
<li><a href="#">Facts &amp; Figures</a></li>
<li><a href="#">Theses</a></li>
<li><a href="#">Our Lab</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">Media</a>
<ul>
<li><a href="#">Photos</a></li>
<li><a href="#">Videos</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">People</a>
<ul>
<li><a href="#">Program&nbsp;Director</a></li>
<li><a href="#">Lab Manager</a></li>
<li><a href="#">Program&nbsp;Manager</a></li>
<li><a href="#">Students</a></li>
<li><a href="#">Web Designer</a></li>
</ul>
</li>
</ul>
</div>
</div>
<!-- End right_column Edit area-->


CSS:
#left_column {
float: left;
width: 15%;
margin-top: 15px;
margin-right: 0px;
margin-bottom: 15px;
margin-left: 5px;
height: 545px;
background-repeat: no-repeat;
background-image: url(../images/side_bkgrd.png);
position: relative;
}

#center_column {
float: left;
width: 65%;
margin-top: 15px;
margin-right: auto;
margin-bottom: 15px;
margin-left: 16px;
}

#right_column {
float: left;
width: 15%;
margin-top: 15px;
margin-right: 0px;
margin-bottom: 15px;
margin-left: 5px;
overflow: visible;
background-repeat: no-repeat;
height: 545px;
background-image: url(../images/side_bkgrd.png);
color: #FFF;
text-decoration: none;
position: relative;
}

Hopefully this helps a little

Corrosive
06-29-2011, 03:33 PM
I have a hunch. Try pasting the Meyer reset into the top of your CSS file;

/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

I think it might be a browser pre-set that is causing it.

Corrosive
06-29-2011, 03:34 PM
BTW, don't mind you posting code but please use code tags (the # symbol top right of the text editor). Thanks :)

jrs2012
06-29-2011, 03:41 PM
When I put the reset in, the gap decreased but there was still a noticeable difference in spacing. Also, the text in my main content area seemed to change as well. I'm using google chrome as my browser to check all of this.

Corrosive
06-29-2011, 03:48 PM
Yes, it is probably best to start with the rest and then develop from there. It shouldn't take long to style the p and h tags. I still think your issue is some kind of browser default though.

jrs2012
06-29-2011, 03:56 PM
I'll work from here and see where I can get.
Thanks for your help!

Corrosive
06-29-2011, 03:59 PM
I'll work from here and see where I can get.
Thanks for your help!

No problem dude. Web design is just about practice & trial and error I'm afraid. Worth sticking round here and asking questions/picking up tips though. You are on the right track... At least you didn't start with tables or frames!