i have a simple layout with a centered content that kind of worked in this example:
<!-- m --><a class="postlink" href="http://www.thehopeandanchor.net/nypd/index.php">http://www.thehopeandanchor.net/nypd/index.php</a><!-- m -->
what goes wrong here is one the browser is resized smaller that the content the content will disappear off both the right and left edges
so i changed the attributes on my main content div tag and it is doing what i want it to do when the browser is resized smaller than the content it does not go off the right of the screen and horizontal scroll bar appears but now all my elements don't stay in the DIV why is this. i am new css am i going about the wrong way?
<!-- m --><a class="postlink" href="http://www.thehopeandanchor.net/nypd/index2.php">http://www.thehopeandanchor.net/nypd/index2.php</a><!-- m -->
--- >>> from my html page the php includes contain elements with div tags in them for the menu and address
<div id="main_con">
<?php require_once('inc/head_inc.php'); ?>
<?php require_once('inc/menu_inc.php'); ?>
<div id="page_one_test" class="body_text1" style="position:absolute; left:20px; top:373px; width:400px; height:130px; z-index:21">
NYPD SPECIALISE IN HIGH QUALITY LOCATIONS LOCATED IN YORKSHIRE, ENGLAND. LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPSCING ELIT, SED DIAM NONNUMY EIUSMOD TEMPOR INCIDUNT UT LABORE ET DOLORE MAGNA ALIQUAM ERAT VOLUPAT. UT ENIM AD MINIMIM VENIAMI QUIS NOSTRUD EXERCITATION ULLAMCORPOR SUSCIPIT LABORIS NISI UT ALIQUIP
</div>
</div>
--- >>> layer style sheet:
div#bg_menu_strip {
position:absolute;
top: 60px;
left: 0px;
width:100%;
height:18px;
margin-left: 0;
margin-top: 0;
background-color: #A59687;
overflow: hidden;
z-index: 0;
}
div#main_con {
postion:absolute;
width:912px;
height:440px;
margin:0px auto;
top: -1px;
overflow: hidden;
z-index: 20;
border:1px solid #000000;
}
/* this is used in the frist exsample:
div#main_con {
position:absolute;
top: -1px;
left: 50%;
width:912px;
height:440px;
margin-left: -456px;
overflow: hidden;
z-index: 20;
border:1px solid #000000;
}
*/
div#menu_strip {
position:absolute;
top: 60px;
left: 0px;
width:912px;
height:18px;
overflow: hidden;
}position:absolute is causing the problem.
Either use it for all elements or only where strictly necessary.
By the look of your site you do not need it at all.
<!-- m --><a class="postlink" href="http://www.thehopeandanchor.net/nypd/index.php">http://www.thehopeandanchor.net/nypd/index.php</a><!-- m -->
what goes wrong here is one the browser is resized smaller that the content the content will disappear off both the right and left edges
so i changed the attributes on my main content div tag and it is doing what i want it to do when the browser is resized smaller than the content it does not go off the right of the screen and horizontal scroll bar appears but now all my elements don't stay in the DIV why is this. i am new css am i going about the wrong way?
<!-- m --><a class="postlink" href="http://www.thehopeandanchor.net/nypd/index2.php">http://www.thehopeandanchor.net/nypd/index2.php</a><!-- m -->
--- >>> from my html page the php includes contain elements with div tags in them for the menu and address
<div id="main_con">
<?php require_once('inc/head_inc.php'); ?>
<?php require_once('inc/menu_inc.php'); ?>
<div id="page_one_test" class="body_text1" style="position:absolute; left:20px; top:373px; width:400px; height:130px; z-index:21">
NYPD SPECIALISE IN HIGH QUALITY LOCATIONS LOCATED IN YORKSHIRE, ENGLAND. LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPSCING ELIT, SED DIAM NONNUMY EIUSMOD TEMPOR INCIDUNT UT LABORE ET DOLORE MAGNA ALIQUAM ERAT VOLUPAT. UT ENIM AD MINIMIM VENIAMI QUIS NOSTRUD EXERCITATION ULLAMCORPOR SUSCIPIT LABORIS NISI UT ALIQUIP
</div>
</div>
--- >>> layer style sheet:
div#bg_menu_strip {
position:absolute;
top: 60px;
left: 0px;
width:100%;
height:18px;
margin-left: 0;
margin-top: 0;
background-color: #A59687;
overflow: hidden;
z-index: 0;
}
div#main_con {
postion:absolute;
width:912px;
height:440px;
margin:0px auto;
top: -1px;
overflow: hidden;
z-index: 20;
border:1px solid #000000;
}
/* this is used in the frist exsample:
div#main_con {
position:absolute;
top: -1px;
left: 50%;
width:912px;
height:440px;
margin-left: -456px;
overflow: hidden;
z-index: 20;
border:1px solid #000000;
}
*/
div#menu_strip {
position:absolute;
top: 60px;
left: 0px;
width:912px;
height:18px;
overflow: hidden;
}position:absolute is causing the problem.
Either use it for all elements or only where strictly necessary.
By the look of your site you do not need it at all.