Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder student101's Avatar
    Join Date
    Nov 2007
    Posts
    634
    Thanks
    80
    Thanked 15 Times in 15 Posts

    Question div not keeping data inside the set area?

    My div below wont keep the data inside it, keeps going over the top of div or overlapping above?
    Code:
     
    .woodinfo {
     width: 590px;
     background: #DECFAD url(../images/bar2.png) no-repeat 0px 0px;
     clear: both;
     overflow: hidden;
     border: 1px solid #000;
     padding: 0;
     margin-left: 5px;
    }
    Any ideas?
    Thanks for your support!
    Update MySQL with checkboxes | Tell A Friend | Delete MySQL with checkboxes

    Give thanks & resolve when done :thumbsup:

  • #2
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    Need more code (all HTML and CSS, in CODE tags) or a link to your site.

    Without that the best I can do is to ask what happens when you remove overflow:hidden; from the CSS?
    matt | design | blog

  • #3
    Regular Coder student101's Avatar
    Join Date
    Nov 2007
    Posts
    634
    Thanks
    80
    Thanked 15 Times in 15 Posts
    Nothing?

    Code:
     
    body {
     margin:0 0 0px;
     padding:0;
     text-align:center;
    }
    img {
     border: 0 none;
    } 
    a {
      outline: none;
    }
    #Content {
     width:760px;
     margin:0px auto;
     text-align:left;
     padding:0px;
     /*overflow: hidden;*/
    }
    .topbanner {
     float: right; 
    }
    p {
     font: 10pt "Tahoma", sans-serif;
    }
    p.black{
     font: 11px "Tahoma", sans-serif;
     color: #313C29;
    }
    p.white{
     font: 11px "Tahoma", sans-serif;
     color: #fff;
     background: #313C29;
    }
    h1.heading {
     color: #006600;
     font: 24px "Bodoni MT Black", serif;
     margin: 0px;
     padding: 20px 0 0;
     float: left;
    }
    .slogan {
     font: 14px "Tahoma", sans-serif;
     color: #000;
     float: right;
     display: block;
     margin-right: 580px;
     margin-bottom: 10px;
     padding-left: 30px;
    }
    h1 {
     color: #006600;
     font: 24px "Bodoni MT Black", serif;
    }
    h2 {
     color: #006600;
     font: 20px "Bodoni MT Black", serif;
    }
    h3 {
     color: #006600;
     font: 18px "Bodoni MT Black", serif;
    }
    h4 {
     color: #006600;
     font: 18px "Bodoni MT Black", serif;
    }
    #Content hr {
     display: block;
     position: relative;
     padding: 8px 0 3px;
     margin: 8px auto 3px;
     width: 100%;
     clear: both;
     border-top: 1px solid #313C29;
     border-bottom: 1px solid #313C29;
     font-size: 1px;
     line-height: 0;
     overflow: visible;
     height: 10px;
     background: #313C29;
     color: #313C29;
     border-right: none;
     border-left: none;
    }
    #Content .leftcolumn {
     width: 151px;
     float: left;
     padding: 2px;
     margin: 0px;
    }
    #Content .rightcolumn {
     width: 605px;
     float: right;
     padding: 0px;
     margin: 0px;
    }
    #Content .rightcolumn .divfloat {
     height: 130px;
     width: 145px;
     float: left;
     margin: 2px;
     padding: 0px;
    }
    #Content .rightcolumn .divfloat span {
     height: 15px;
     width: 100%;
     float: left;
     padding: 5px 0px 0px;
     text-align: center;
     background: #313C29 url(../images/cat_2.gif) no-repeat right bottom;
     color: #FFF;
     margin-top: 5px;
     font: 10pt/10px "Tahoma", sans-serif;
    }
    #Content .rightcolumn .data {
     clear: both;
     padding: 5px;
     margin: 0px 0px 10px;
     float: left;
     width: 590px;
     height: auto;
     position: relative;
     top: 3px;
     left: 0px;
    }
    #Content .rightcolumn .woodinfo {
     width: 590px;
     background: #DECFAD url(../images/bar2.png) no-repeat 0px 0px;
     clear: both;
     /*position: relative;
     top: 5px;
     left: 0px;
     right: 0px;
     bottom: 0px;
     overflow: hidden;*/
     border: 1px solid #000;
     padding: 0;
     margin-left: 5px;
    }
    #Content .leftcolumn .divfloat {
     background: #313C29;
     margin: 0;
     padding: 0;
     color: #FFF;
    }
    #Content .leftcolumn .divfloat p, #Content .leftcolumn .divfloat2 p {
     margin: 5px;
     padding: 5px;
    }
    #Content .leftcolumn .divfloat2 {
     background: #DECFAD;
     margin: 0px;
     padding: 0px;
     border-right: 1px solid #000;
     border-bottom: 1px solid #000;
     border-left: 1px solid #000;
     color: #000;
    }
    #Content .rightcolumn .data p {
     font: 10pt "Tahoma", sans-serif;
     margin-right: 5px;
     margin-left: 25px;
    }
    #Content .rightcolumn .data p .green {
     color: #006600;
     font: 15px "Bodoni MT Black", serif;
     margin: 0px;
     padding: 0px;
    }
    #Content .rightcolumn .data p a {
     color: #DECFAD;
     text-decoration: underline;
    }
    #Content .rightcolumn .data p a:visited {
     color: #006600;
    }
    #Content .rightcolumn .data p a:active {
     color: #DECFAD;
    }
    #Content .rightcolumn .data p a:hover {
     color: #DECFAD;
     text-decoration: none;
    }
     
    #Content .rightcolumn .woodinfo .floatright {
     padding: 2px;
     margin-bottom: 5px;
    }
    #Content .rightcolumn .woodinfo .floatright p {
     font: 10pt "Calibri", sans-serif;
     padding: 10px 0px 0px;
     margin: 5px 5px 5px 0;
    }
    .clearboth { clear: both; }
    #Content .footer {
     background-color:#313C29;
     bottom: 0px;
     clear: both;
     color:#DECFAD;
     height:35px;
     text-align: center;
     font:10pt/30px "Tahoma", sans-serif;
    }
    #Content .footer a:link {
     color:#DECFAD;
     text-decoration: underline;
    }
    #Content .footer a:visited {
     color:#DECFAD;
    }
    #Content .footer a:active {
     text-decoration: none;
    }
    #Content .footer a:hover {
     text-decoration: none;
    }
    #Content .footer a.current {
     text-decoration: none;
    }
    PHP Code:
    <!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>Feel Free To Contact Us Anytime Below</title>
    <
    link href="css/menu.css" rel="stylesheet" type="text/css" />
    <
    link href="css/style.css" rel="stylesheet" type="text/css" />
    <!--[if 
    IE 6]>
    <
    style type="text/css">
    #Content .leftcolumn {
    width150px;
    floatleft;
    padding2px;
    margin0px;
    }
    #Content .rightcolumn {
    width580px;
    floatright;
    padding0px;
    margin0px;
    }
    #Content .rightcolumn .divfloat {
    height130px;
    width140px;
    floatleft;
    margin2px;
    padding0px;
    }
    #Content .rightcolumn .divfloat img {
    width140px;
    height106px;
    }
    </
    style>
    <![endif]-->
    <
    link href="css/form.css" rel="stylesheet" type="text/css" />
    </
    head>
    <
    body>
    <
    div id="Content">
    <
    div class="topbanner"><img src="images/autogen/Contact_Us_Nbanner.gif" alt="Contact Us" name="Contact Us" title="Contact Us" width="209" height="26" /></div>
    <
    h1 class="heading">HEADER1</h1>
    <
    div class="slogan">QUALITY TIMBER CRAFT</div>
    <!--<
    hr />-->
    <
    img src="images/bar.png" width="758" height="11" style="clear:both; margin: 0 0 3px 0;" />
    <
    div class="leftcolumn">
    <
    div id="menu">
    <
    a href="index.php"><span>Home</span></a>
    <
    a href="about.php"><span>About Us</span></a>
    <
    a href="service.php"><span>Service</span></a>
    <
    a href="location.php"><span>Location</span></a>
    <
    a href="contact.php" class="current"><span>Contact Us</span></a>
    </
    div>
    <
    div class="divfloat"><img src="images/top1.gif" width="151" height="17" hspace="0" vspace="0" />
    <
    p>Highest grade timber and fittings used</p>
    <
    p>Free quotes</p>
    <
    p>Top quality finishes throughout</p>
    </
    div>
    <
    div class="divfloat2">
    <
    img name="" src="images/Lake-Michelle-deck_jetty-1a.jpg" width="150" height="100" alt="" />
    <
    p>Contact:
    <
    br />
    aLorem IpsumLorem
    <br />
    t: +000 000 0000
    <br />
    eemail@example.com </p>
    </
    div>
    <
    div class="divfloat">
    <
    p>DecksPergolasAttic Rooms</p>
    <
    p>JettiesStaircasesMezzanines</p>
    <
    p>BalustradesBoardwalksYou name it...we&#8217;ll design it and build it!</p>
    <img src="images/top2.gif" width="151" height="17" hspace="0" vspace="0" align="absbottom" />
    </
    div>
    </
    div>
    <
    div class="rightcolumn">
     
    <
    div class="data">
    <
    p>Hours of Operation:
    <
    br />
    Mon Fri
    <br />
    8 am 5 pm </p>
    <
    p>
    Tel000 000 0000
    <br />
    Fax000 000 0000 <br />
    Alt Fax000 000 0000 </p>
    <
    p>After Hours messaging service Tel000 000 0000<br />
    eemail@example.com</p>
    </
    div>
    <
    div class="woodinfo">
    <
    div class="floatright">
    <
    form id="verticalForm" action="">
    <
    fieldset>
    <
    legend>
    Name
    </legend>
    <
    label class="first" for="title1">
    Title
    <select id="title1" name="title1">
    <
    option selected="selected">Mr.</option>
    <
    option>Mrs.</option>
    <
    option>Ms.</option>
    <
    option>Dr.</option>
    <
    option>Viscount</option>
    </
    select>
    </
    label>
    <
    label for="firstName1">
    First name
    <input id="firstName1" name="firstName1" type="text" value="First name" />
    </
    label>
    <
    label for="lastName1">
    Last name
    <input id="lastName1" name="lastName1" type="text" value="Last name" />
    </
    label>
    </
    fieldset>
    <
    fieldset>
    <
    legend>
    Address
    </legend>
    <
    label class="first" for="street1">
    Street
    <input id="street1" name="street1" type="text" value="Street" />
    </
    label>
    <
    label for="city1">
    City
    <input id="city1" name="city1" type="text" value="City" />
    </
    label>
    <
    label for="state1">
    State
    <input id="state1" name="state1" type="text" value="State" />
    </
    label>
    <
    label for="postcode1">
    Postcode
    <input id="postcode1" name="postcode1" type="text" value="Postcode" />
    </
    label>
    <
    label for="country1">
    Country
    <input id="country1" name="country1" type="text" value="Country" />
    </
    label>
    </
    fieldset>
    <
    fieldset>
    <
    legend>
    Payment details
    </legend>
    <
    fieldset class="radio">
    <
    legend>
    Credit card
    </legend>
    <
    label for="cardType1A">
    <
    input id="cardType1A" name="card1" type="radio" />
    American Express
    </label>
    <
    label for="cardType1B">
    <
    input id="cardType1B" name="card1" type="radio" />
    Mastercard
    </label>
    <
    label for="cardType1C">
    <
    input id="cardType1C" name="card1" type="radio" />
    Visa
    </label>
    <
    label for="cardType1D">
    <
    input id="cardType1D" name="card1" type="radio" />
    Blockbuster Card
    </label>
    </
    fieldset>
    <
    label for="cardNum1">
    Card number
    <input id="cardNum1" name="cardNum1" type="text" value="Card number" />
    </
    label>
    <
    label for="expiry1">
    Expiry date
    <input id="expiry1" name="city1" type="text" value="City" />
    </
    label>
    <
    input class="submit" type="submit" value="Submit my details" />
    </
    fieldset>
    </
    form>
    </
    div>
    <
    br />
    </
    div>
    </
    div>
    <
    div class="footer">: <a href="index.php">Home</a> : : <a href="about.php">About Us</a> : : <a href="service.php">Service</a> : : <a href="location.php">Location</a> : : <a href="contact.php" class="current">Contact Us</a> :</div>
    <
    div style="text-align:center; font: 11px Tahoma,Verdana,Arial,Helvetica,Sans-serif,sans-serif;">...All rights reserved...</div>
    </
    div>
    </
    body>
    </
    html
    FORM.CSS
    Code:
     
    /* HTML TAGS */
    #verticalForm fieldset{
     display: block;
     width: 17em;
     margin: 0 0 3em 0;
     padding: 0 1em 1em 1em;
    }
    #verticalForm fieldset.radio{
     width: 15em;
     margin: 1em 0 2em 0;
    }
    #verticalForm fieldset.radio input{
     clear: both;
     float: left;
     width: auto;
    }
    #verticalForm fieldset.radio label{
     font-weight: normal;
    }
    #verticalForm input{
     display: block;
     width: 15em;
    }
    #verticalForm label{
     display: block;
     margin-bottom: 1em;
     font-weight: bold;
    }
    #verticalForm label.first{
     padding-top: 1em;
    }
    #verticalForm select{
     display: block;
    }
    Edit:
    Could I not just do this instead?
    Code:
     
    background: #DECFAD url(../images/bar2.png) no-repeat 0px 0px;
    clear: both;
    border: 1px solid #000;
    margin: 0 10px; 
    padding: 10px 20px;
    Last edited by student101; 06-30-2010 at 11:43 PM.
    Thanks for your support!
    Update MySQL with checkboxes | Tell A Friend | Delete MySQL with checkboxes

    Give thanks & resolve when done :thumbsup:


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •