Text causing divs to move

Discussion in 'CSS' started by Alexander Quinn, Jun 14, 2008.

0
  1. #1
    When i went to enter text for the page it caused the divs to go out of whack.

    This is what it looks like without the text:http://www.uploadpad.com/files/withouttext.JPG

    And when i enter text:
    http://www.uploadpad.com/files/textprolem.JPG

    The 3rd box is missing because the subpage for it isnt ready yet so that has nothing to do with this problem.

    Also when text is entered in the main white table it is centered halfway down the page and causes the inner boxes to overhang the edge.

    anyone have any advice?
    my code is

    html:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>M and J Web Services</title>
<link rel="stylesheet" media="screen" type="text/css" href="stylesheet.css" >
<style type="text/css">
</style>
</head>
<body>
<div class="site-wrapper">
    <div class="header-wrapper">
        <div class="Logo"><a href=""><img alt="logo" src="images/MJLogo.gif" style="border-style: none"></a>
            <div class="navbar">
            <div alight="center">
  <ul>
    <li><a href="#"><b>Home</b></a></li>
    <li><a href="#"><b>Shared Web Hosting</b></a></li>
    <li><a href="#"><b>Dedicated Server Hosting</b></a></li>
    <li><a href="#"<b>E-Business Solutions</b></a></li>
    <li><a href="#"><b>Support</a></b></li>
  </ul>
        </div>
        </div>
    </div>
    <div class="body-wrapper">
        <div class="content-wrapper">
            <div class="main_table">
                <div class="shared_table"><a class="shdbutton_order" href="#"><span>Order</span></a><a class="shdbutton_more" href="#"><span>Learn More</a></span></div>
                <div class="dedicated_table"><a class="dedbutton_order" href="#"><span>Order</span></a><a class="dedbutton_more" href="#"><span>Learn More</a></span></div>
                <div class="ebusiness_table"><a class="busbutton_order" href="#"><span>Order</span></a><a class="busbutton_more" href="#"><span>Learn More</a></span></div>
            </div>
            <div style="clear:both"></div>
        </div>
    </div>
    <div class="footer">
        <ul>
            <li><a href=""><b>About Us</b></a> |</li>
            <li><a href=""><b>Privacy Policy</b></a> | </li>
            <li><a href=""><b>Terms of Service</b></a> |</li>
            <li><a href=""><b>Contact Us</b></a> |</li>
            <li><b>&copy;2008 M and J Web Services</b> </li>
        </ul>
    </div>
</div>
</body>
</html>
    Code (markup):
    and my style sheet is:
    /*==============================
SITE WRAPPER
===============================*/
html,body{
    margin:0;
    padding:0;
}
p,h1,h2,h3,h4,h5,h5,ul,ol{
    margin:0 0 1em 0;
    padding:0;
}
ul,ol{margin:0 0 1em 16px;}
body{
    font-family:Arial;
    font-size:12px;
    background:url(images/mjbg.gif);
}
.site-wrapper{
    width:801px;
    margin-top:54px;
    margin-left:auto;
    margin-right:auto;
}

/*==============================
HEADER WRAPPER
===============================*/
.header-wrapper
{
    width:775px;
    height:90;
    margin-left:auto;
    margin-right:auto;
}
.logo{float:left}
.header-menu
{
    z-index: 0;
    margin-top: -40px;
    float:right;
    width:370px;
    height:10x;
}
.navbar ul
{
    z-index: 1;
    flight:left;
    margin: 0;
    margin-top:10px;
    height:35px;
    width: 745;
    list-style-type: none;
    text-align: center;
    background:url(images/navbar.gif);
    background-repeat: no-repeat;
}

.navbar ul li
{
    margin-top: 20px;
    padding: 0px 20px 0px 10px;
    display: inline;
    height: 33px;
}

.navbar ul li a
{

    text-decoration: none;
    height: 33px;
    line-height:35px;
    color: #FFFFFF;
}

.navbar ul li a:hover
{
    color: #FBBD47;
    height: 33px;
}

/*==============================
BODY WRAPPER
===============================*/
.body-wrapper    {
    margin-top:-10px;
    width:801px;
}
/*==============================
Tables
===============================*/

.content-wrapper
{
    margin-top:20px;
    height:483px;
    width:801px;
}

.main_table
{
    height:483px;
    width:743px;
    margin:20 15px;
    padding:150px 14px 14px 14px;
    background:url(images/maintbl.gif);
    background-repeat:no-repeat;
}
/*==============================
Shared Table
===============================*/

.shared_table
{
    height:347px;
    width:243px;
    margin:-25px 0;
    float:left;
    background:url(images/innertbl.gif);
    background-repeat:no-repeat;
    float:left;
}

.shdbutton_order
{
  display: block;
  margin-top: 295px;
  margin-left: 7px;
  float:left;
  width: 103px;
  height: 33px;
  background:url(images/orderbutton.gif);
  background-repeat:no-repeat;
}

.shdbutton_order:hover
{

  background-position: 0 -33px;

}

.shdbutton_order span
{
  display: none;
}

.shdbutton_more
{
  display: block;
  margin-top: 295px;
  margin-left: 115px;
  width: 103px;
  height: 33px;
  background:url(images/learnbutton.gif);
  background-repeat:no-repeat;

}

.shdbutton_more:hover
{

  background-position: 0 -33px;

}

.shdbutton_more span
{
  display: none;
}
/*==============================
Dedicated Table
===============================*/

.dedicated_table
{
    position:relative;
    float:left;
    margin:-25px 0;
    height:347px;
    width:243px;
    background:url(images/innertbl.gif);
    background-repeat:no-repeat;
}

.dedbutton_order
{
  display: block;
  margin-top: 295px;
  margin-left: 7px;
  float:left;
  width: 103px;
  height: 33px;
  background:url(images/orderbutton.gif);
  background-repeat:no-repeat;
}

.dedbutton_order:hover
{

  background-position: 0 -33px;

}

.dedbutton_order span
{
  display: none;
}

.dedbutton_more
{
  display: block;
  margin-top: 295px;
  margin-left: 115px;
  width: 103px;
  height: 33px;
  background:url(images/learnbutton.gif);
  background-repeat:no-repeat;

}

.dedbutton_more:hover
{

  background-position: 0 -33px;

}

.dedbutton_more span
{
  display: none;
}
/*==============================
E-Business Table
===============================*/


.ebusiness_table
{
    position:relative;
    height:347px;
    margin:-25px 0;
    float:left;
    width:243px;
    background:url(images/innertbl.gif);
    background-repeat:no-repeat;
}
.busbutton_order
{
  display: block;
  margin-top: 295px;
  margin-left: 7px;
  float:left;
  width: 103px;
  height: 33px;
  background:url(images/orderbutton.gif);
  background-repeat:no-repeat;
}

.busbutton_order:hover
{

  background-position: 0 -33px;

}

.busbutton_order span
{
  display: none;
}


.busbutton_more
{
  display: block;
  margin-top: 295px;
  margin-left: 115px;
  width: 103px;
  height: 33px;
  background:url(images/learnbutton.gif);
  background-repeat:no-repeat;
}

.busbutton_more:hover
{

  background-position: 0 -33px;

}

.busbutton_more span
{
  display: none;
}

/*==============================
FOOTER
===============================*/
a
{
      text-decoration: none
}
.footer
{
     clear:both;
     text-align:center;
}
.footer ul
{
    margin:10px;
    padding:0;
    list-style:none;
}
.footer ul li
{
        display:inline
}
.footer ul li a
{
        color:#000
}
    Code (markup):

     
    Alexander Quinn, Jun 14, 2008 IP
  2. CodyRo

    CodyRo Peon

    Messages:
    365
    Likes Received:
    15
    Best Answers:
    0
    Trophy Points:
    0
    #2
    It's because the learnmore class/button has a fixed margin (295px) on the top. It's pushing the button down 295px from the bottom of the text you entered.

    Either make a fluid layout or just adjust the margin accordingly to the text if it's not going to be changed often (50%-60% margin should put it where you want on the shared section).
     
    CodyRo, Jun 15, 2008 IP