...

View Full Version : div not keeping data inside the set area?



student101
06-30-2010, 10:01 PM
My div below wont keep the data inside it, keeps going over the top of div or overlapping above?


.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?

BoldUlysses
06-30-2010, 10:07 PM
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?

student101
06-30-2010, 10:15 PM
Nothing?



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;
}




<!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 {
width: 150px;
float: left;
padding: 2px;
margin: 0px;
}
#Content .rightcolumn {
width: 580px;
float: right;
padding: 0px;
margin: 0px;
}
#Content .rightcolumn .divfloat {
height: 130px;
width: 140px;
float: left;
margin: 2px;
padding: 0px;
}
#Content .rightcolumn .divfloat img {
width: 140px;
height: 106px;
}
</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 />
a: Lorem Ipsum, Lorem
<br />
t: +000 000 0000
<br />
e: email@example.com </p>
</div>
<div class="divfloat">
<p>Decks, Pergolas, Attic Rooms</p>
<p>Jetties, Staircases, Mezzanines</p>
<p>Balustrades, Boardwalks, You name it...we’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>
Tel: 000 000 0000
<br />
Fax: 000 000 0000 <br />
Alt Fax: 000 000 0000 </p>
<p>After Hours messaging service - Tel: 000 000 0000<br />
e: email@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


/* 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;
}



Could I not just do this instead?


background: #DECFAD url(../images/bar2.png) no-repeat 0px 0px;
clear: both;
border: 1px solid #000;
margin: 0 10px;
padding: 10px 20px;



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum