Forum Moderators: not2easy
I have a layout similar to this:
+-----------------+
¦¦¦¦¦¦¦header¦¦¦¦¦¦
+-----------------+
+-----------------+
¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦
¦¦¦¦¦¦¦body¦¦¦¦¦¦¦¦
¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦
+-----------------+
Each section is its own <div> tag. Inside of the body tag I want to place a nested <div> with text and images in it. When I do this however, the parent <div> tag does not stretch to fit the nested <div> tag. Below is the code that I have.
// this is the parent <div> tag's CSS styling
#maintext {
background:#FFFFFF url('../images/layout/textbackground.jpg') repeat-y;
padding-left:50px;
padding-right:50px;
border:0px;
}
// this is what is actually in the <body> of the page
// it is essentially a 2 column page using <div> tags
<div id="maintext">
<div style="width:440px; text-align:center; float:left;">
TEXT<br />GOES<br />HERE
</div>
<div style="width:440px; text-align:center; float:right;">
TEXT<br />GOES<br />HERE
</div>
Thanks in advance for any help! I have been searching all over the net and forums and I can't seem to find anything that works.
and a warm welcome to these forums. ;)
Try it like this...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">
#maintext {
background:#fff url('../images/layout/textbackground.jpg') repeat-y;
padding-left:50px;
padding-right:50px;
}
#maintext #left {
width:440px;
text-align:center;
float:left;
}
#maintext #right {
width:440px;
text-align:center;
float:right;
}
#clear {
clear:both;
}
</style></head>
<body><div id="maintext">
<div id="left">TEXT<br />GOES<br />HERE</div>
<div id="right">TEXT<br />GOES<br />HERE</div><div id="clear"></div>
</div>
</body>
</html>
birdbrain
No problem, you're welcome. ;)
