Div Positioning Issues

twilitegxa · November 8, 2010

I have a div box on a page that looks good on my screen resolution, but apparently on a smaller resolution or browser size, the div overlaps and doesn't fit the way I want it to. Here is a sreccnshot of how i want it to look and one of how it looks on the smaller screens. I will iclude my code as well:


<!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>DecaturDocs</title>
<link rel="stylesheet" href="DecaturDocs_version2.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="background">
<div id="leftcolumn">
<img src="images/photo1.jpg" id="image" />
<div id="version">
Winter2011<span class="series">Series1.1</span>
<><!--end version-->
<div id="titleback">
<div id="title">
DecaturDocs
<><!--end title-->
<><!--end titleback-->
<div id="columncontainer">
<div id="column1">
<span class="header">When?</span>
<p>Saturday Nights:</p>
<p>January 8<br />
January 22<br />
Februday 19<br />
March 5</p>
<p><span class="times">7:00 PM</span><br /> Lobby doors open: Coffee and dessert reception.</p>
<p><span class="times">7:30 PM</span><br /> Theatre doors open: <br />Get a good seat.</p>
<p><span class="times">8:00 PM</span><br />Introductions, announcements, and shout outs…<br />and Roll Film!</p>
<p><span class="times">...AFTER THE FILM:</span><br /> Q & A with special guest: Interaction, comments, engagement.</p>
<p><a href="http://decaturdocsseries1-autohome.eventbrite.com/" target="_blank"><img src="images/subscribenow.png"  width="144" alt="Subscribe Now!" /></a></p>
<><!--end column1-->
<div id="column2">
<span class="header">Where?</span>
<p>Decatur High School<br /> 310 N. McDonough St.<br /> Decatur, GA 30030</p>
<img src="images/map.png" width="144px" /><br />
<div id="center"><a href="http://maps.google.com/maps?q=310+N.+McDonough+St.,+Decatur,+GA+30030&oe=utf-8&client=firefox-a&ie=UTF8&hq=&hnear=310+N+McDonough+St,+Decatur,+DeKalb,+Georgia+30030&gl=us&ei=0qPNTISuFYPGlQf04NiWBg&ved=0CBUQ8gEwAA&z=16" target="_blank">View Larger Map</a><>
<p>DecaturDocs takes full advantage of this amazing host venue, showcasing the spacious lobby for pre-screening reception and the state-of-the-art performing arts center for the screenings and interactive question and answer post screening discussions.</p>
<><!--end column2-->
<div id="column3">
<span class="header">How?</span>
<p>Subscribe to the entire four-film series at the affordable rate of $10 per show and save 1/3 off the walk-up price.</p>
<p><a href="http://decaturdocsseries1-autohome.eventbrite.com/" target="_blank"><img src="images/subscribenow.png" alt="Subscribe Now!" width="144" /></a></p>
<p>Walk-ups welcome.  Arrive early as seating is limited.</p>
<p>Tickets are available for $15 at the door.  Cash or credit accepted.</p>
<div id="center">
<a href="http://www.facebook.com/?ref=home#!/pages/Decatur-Docs/154136581269616?v=wall" target="_blank"><img src="images/Facebook_icon.png" height="25px" width="25px" /></a>
<a href="https://twitter.com/DecaturDocs" target="_blank"><img src="images/Twitter_icon.png" height="25px" width="25px" /></a><>
<!--<p><a href="#">Sign-up for Email Updates!</a></p>-->
<p>
<!-- BEGIN: Constant Contact Stylish Email Newsletter Form -->
<div align="center">
<div style="width:144px; background-color: #000000;">
<form name="ccoptin" action="http://visitor.r20.constantcontact.com/d.jsp" target="_blank" method="post" style="margin-bottom:3;"><span style="background-color: #006699; float:right;margin-right:5;margin-top:3"><img src="https://imgssl.constantcontact.com/ui/images1/visitor/email1_trans.gif" alt="Email Newsletter icon, E-mail Newsletter icon, Email List icon, E-mail List icon" border="0"></span>
<font style="font-weight: bold; font-family:Arial; font-size:16px; color:#006699;">Sign up for our Email Newsletter</font>
<input type="text" name="ea" size="20" value="" style="font-family:Verdana,Geneva,Arial,Helvetica,sans-serif; font-size:10px; border:1px solid #999999;">
<input type="submit" name="go" value="GO" class="submit"  style="font-family:Verdana,Arial,Helvetica,sans-serif; font-size:10px;">
<input type="hidden" name="llr" value="fxl4l7dab">
<input type="hidden" name="m" value="1103684939493">
<input type="hidden" name="p" value="oi">
</form>
<>
<>
<!-- END: Constant Contact Stylish Email Newsletter Form --> <div align="center" style="padding-top:5px;">
<a href="http://www.constantcontact.com/safesubscribe.jsp" target="_blank"><img src="https://imgssl.constantcontact.com/ui/images1/safe_subscribe_logo.gif" border="0" width="144" height="14" alt=""/></a>
<>
<!-- END: SafeSubscribe --> <div align="center" style="font-family:Arial,Helvetica,sans-serif;font-size:10px;color:#999999;">
For <a href="http://www.constantcontact.com/jmml/email-marketing.jsp" style="text-decoration:none;font-family:Arial,Helvetica,sans-serif;font-size:10px;color:#999999;" target="_blank">Email Marketing</a> you can trust
<>
<!-- END: Email Marketing you can trust -->
</p>
<><!--end column3-->
<div id="column4">
<span class="header">What’s Next?</span>
<p>DecaturDocs Kick-Off Special event</p>
<p>Saturday, November 20, 8:00 PM</p>
<p><a href="http://www.bouncingcats.com" target="_blank"><img src="images/bouncingcats.jpg" height="100px" width="144px" /></a></p>
<p class="times"><a href="http://www.bouncingcats.com" target="_blank">BOUNCING CATS</a></p>
<p>By invitation only!</p>
<><!--end column4-->
<div id="breakdivs">
 
<><!--end breakdivs-->
<><!--end columncontainer-->
<><!--end leftcolumn-->
<div id="rightcolumn">
<span class="header">What is DecaturDocs?</span>
<p>DecaturDocs is a screening and discussion series, housed in the new state-of-the-art performing arts center at Decatur High School, centered on the engaging world of non-fiction and documentary films.  </p>
<p>Each film, fresh from the film festival circuit, is specially selected for DecaturDocs, and each show is followed by an informative, educational, topical discussion with a filmmaker, featured subject, or thought leader, to create a fulfilling interactive audience experience.</p>
<p>The <a href="http://decaturdocsseries1-autohome.eventbrite.com/" target="_blank">subscription-based</a> screening series is designed to engage, educate and entertain Decatur’s diverse community, while attracting audiences from throughout the region to experience the hospitality and vivacity of downtown Decatur. </p>
<hr />
<span class="header">Why “DecaturDocs”?</span>
<p>Decatur has long yearned for a film-screening venue.  What better way to showcase the possibilities than with an interactive showcase of non-fiction film—the most dynamic arena for film festivals and independent production?  As a platform for audiences to engage in provocative dialog about meaningful ideas in a creative film festival atmosphere, DecaturDocs is a social happening, a quintessential gathering of the minds, and a “don’t miss” cultural experience.</p>
<p align="center"><a href="http://decaturdocsseries1-autohome.eventbrite.com/" target="_blank"><img src="images/subscribenow.png" width="144" alt"Subscribe Now!" /></a></p>
<><!--end rightcolumn-->
<div id="breakdivs">
 
<><!--end breakdivs-->
<><!--endbackground-->
<div id="footer2">
<div id="inner">
<p><b>SPONSORS:</b> DecaturDocs is made possible with generous support from <a href="http://decaturartsalliance.org/" target="_blank">Decatur Arts Alliance</a> and <a href="http://verb.org/" target="_blank">Verb.org</a>.</p>
<p>If you are interested in sponsoring DecaturDocs, contact us <a href="mailto:[email protected]?subject=Sponsorship">here</a>.</p>
<p><b>COMING SOON:</b><br /> DecaturDocs Series 1.2 (4 screenings) will run April 30 – July 23.</p>
<p>Questions, concerns or comments should be directed <a href="mailto:[email protected]?subject=Questions/Comments">here</a>.</p>
<><!--end footer-->
<><!--end container-->
</body>
</html>

CSS:


body {
color: #FFFFFF;
font-family: "Franklin Gothic Book", Helvetica, Verdana, Tahoma, Arial;
font-size: 14px;
background-color: #a9a9a9;
}


a {
color: lightblue;
}


a:hover {
color: #f9aa23;
}


#container {
margin: 0;
margin-left: auto;
margin-right: auto;
padding: 10px 8px 1em 8px;
max-width: 71em;
line-height: 1.35;
}


#background {
background-color: #000000;
}


#leftcolumn {
padding: 25px;
float: left;
}


#version {
color: #277634;
position: relative;
top: -430px;
left: 65px;
font-size: 50px;
z-index: 2;
text-transform: uppercase;
font-weight: bold;
letter-spacing: -4px;
}


.series {
font-size: 25px;
letter-spacing: -2px;
padding-left: 5px;


}


#title {
position: relative;
font-size: 110px;
top: -25px;
left: 10px;
z-index: 2;
}


#image {
position: relative;
z-index: 1;
width: 664px;
}


#titleback {
background-color: #277634;
width: 664px;
position: relative;
top: -100px;
height: 100px;
}


#columncontainer {
width: 664px;
position: relative;
top: -50px;
}


#column1 {
width: 144px;
padding-right: 10px;
border-right: silver 2px solid;
float: left;
height: 600px;
}


#column2 {
width: 144px;
padding-left: 10px;
padding-right: 10px;
border-right: silver 2px solid;
float: left;
height: 600px;
}


#column3 {
width: 144px;
padding-left: 10px;
padding-right: 10px;
border-right: silver 2px solid;
text-align: left;
float: left;
height: 600px;
}


#column4 {
width: 144px;
padding-left: 10px;
padding-right: 10px;
float: left;
height: 600px;
}


#breakdivs {
clear: both;
}


#rightcolumn {
width: 225px;
float: left;
padding-top: 25px;
}


#footer {
position: relative;
top: 25px;
padding: 25px;
border: black solid 2px;
background-color: #c5161d;
width: 67em;
}


#inner {
padding: 15px;
border: solid black 2px;
}


body, #background, #container, #leftcolumn, #rightcolumn {
max-height: 1200px;
}


img {
border: 0;
}


.times {
color: #1c8fd9;
font-weight: bold;
font-size: 16px;
}


.header {
color: #f9aa23;
font-weight: bold;
font-size: 22px;
font-variant: small-caps;
}


#footer2 {
background-color: #c5161d;
color: #ffffff;
position: relative;
left: 524px;
top: -320px;
width: 420px;
text-align: justify;
padding: 10px;
margin-top: 50px;
margin-bottom: -200px;
}


#center {
text-align: center;
}


#fade { /*--Transparent background layer--*/
display: none; /*--hidden by default--*/
background: #000;
position: fixed; left: 0; top: 0;
width: 100%; height: 100%;
opacity: .80;
z-index: 9999;
}
.popup_block{
display: none; /*--hidden by default--*/
background: #fff;
padding: 20px;
border: 20px solid #ddd;
float: left;
font-size: 1.2em;
position: fixed;
top: 50%; left: 50%;
z-index: 99999;
/*--CSS3 Box Shadows--*/
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
/*--CSS3 Rounded Corners--*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
img.btn_close {
float: right;
margin: -55px -55px 0 0;
}
/*--Making IE6 Understand Fixed Positioning--*/
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}

Can anyone please help me with how to fix this problem? I don't know what method is best for positioning so that it's consitant on all browsers.

[attachment deleted by admin]

twilitegxa · November 8, 2010

Or also when I try to resize my browser, it doesn't adjust the way I want it to. Please can anyone help me get this right???

haku · November 8, 2010

Remember what I said about positioning with floats? Positioning absolutely and relatively causes these problems. Learn to use floats and you won't have these problems.

twilitegxa · November 9, 2010

I have come up with these two solutions:

http://webdesignsbyliz.com/DecaturDocs/index.php

htpp://webdesignsbyliz.com/DecaturDocs/index2.php

Do you think these will be any better?

On my next projects, I will try to use floats more effectively and see if I can start getting it right. Thanks for the advice :-)

Sign In

Div Positioning Issues

Recommended Posts

twilitegxa

Link to comment

Share on other sites

twilitegxa

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

twilitegxa

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information