So I'm setting the Div height in the CSS file but then I thought of something, not every page is going to require the same height since some pages will have more content and some will have less content. I'm new to designing with divs (just started today), and I have mostly everything figured out except this..How do you make the div stretch automatically depending on the amount of content? The problem I'm having is the content box is overlapping the footer. Here's a screenshot of what's happening, the white should push the black down, but instead the contents are just overlapping the black. http://www.myspacegamelayouts.com/images/example.jpg Thanks, Thomas
No, if I try that it doesn't show the div at all :S, I'm sure I could just hardcode the height into the document but I'm sure there is a simpler way to do it? Thanks for replying BILZ
I've looked through the pages Google brought up and still fail to see how those problems are like mine? Sorry
First, you seldom, if ever, need to specify a height on normal content containers. Second, are you using absolute positioning? If so, it doesn't exist as far as other elements are concerned. Third, we can stand around guessing all day, but what would help is your document. Give us a link, or post the code. cheers, gary
Thanks, like I said I just started to learn the whole div thing today so I have no positioning attribute since I'm not 100% sure of what they do yet, here's my code. HTML > <!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=iso-8859-1" /> <link rel="stylesheet" href="style.css" /> <title>Untitled Document</title> </head> <body> <div id="container"> <div id="header"><img src="images/header.jpg" width="770" height="160" /></div> <div id="navfluid"> <div id="nav"> <div id="navbarleft">nav</div> <div id="navbarright">Date and Time</div> </div> </div> <div id="middle"> <div id="leftcolumn"> <h1>Heading 1</h1> <p> this is some text this is some text this is some text this is some text</p> <p> </p> <p><img src="images/order1.jpg" width="63" height="63" class="alt1" />this is some text this is some text this is some text this is some textthis is some text this is some text this is some text this is some text</p> <p> </p> <p> </p> <p><img src="images/order2.jpg" width="63" height="63" class="alt1" />this is some text this is some text this is some text this is some textthis is some text this is some text this is some text this is some text</p> <p> </p> <p> </p> <p><img src="images/order3.jpg" width="63" height="63" class="alt1" />this is some text this is some text this is some text this is some textthis is some text this is some text this is some text this is some text</p> <p> </p> <p> </p> <p> </p> <p align="center"><img src="images/guarantee.jpg" width="311" height="100" /></p> <p> </p> </div> <div id="rightcolumn"> <h1>Heading 2 </h1> <p>this is some text this is some text this is some text this<br /> <br /> <em><strong>Headers</strong></em></p> <p><img src="examples/totallybirdspreview.jpg" width="311" height="90" /></p> <p> </p> <p><img src="examples/woodlandspreview.jpg" width="311" height="79" /></p> <p> </p> <p><em><strong>Landing Pages</strong></em></p> <p><em><strong><img src="examples/cell1preview.jpg" width="311" height="79" /></strong></em></p> <p> </p> <p><em><strong><img src="examples/cell2preview.jpg" width="311" height="79" /></strong></em></p> <p> </p> <p><em><strong>Latest Website</strong></em></p> <p>Myspace Game Layouts</p> </div> </div> <div id="footer">footer</div> </div> </body> </html> Code (markup): CSS > body { background: #222222; font: 13px "Trebuchet MS", Arial, Helvetica, sans-serif; color: #a5a5a5; margin-top: 0px; margin-bottom: 0px; margin-right: 0px; margin-left: 0px; } a:visited { color : #ffffff; font-weight : bold; } a:hover, a:active { color : #d2ad6c; text-decoration : none; font-weight : bold; } #div {text-align:left;} #container { background:#ffffff; width: 100%; height: 700px; margin:0 auto; } #header { background: url(images/nav.jpg); width: 100%; height: 160px; text-align:center; border-bottom: 1px solid #eeeeee; } #middle { background:#ffffff; width: 770px; height: 450px; margin:0 auto; text-align:left; } #footer { background: #222222; width: 100%; height: 150px; } #navfluid { width: 100%; height: 25px; border-bottom: 1px solid #e2e2e2; padding-top: 10px; } #nav { background:#FFFFFF; width: 770px; height: 25px; margin:0 auto; border-bottom: 1px solid #e2e2e2; } #navbarleft { float:left; width: 380px; height: 25px; } #navbarright { float:right; width: 385px; height: 25px; text-align:right; } div, p, ul, h2, h3, img { padding:0px; margin:0px; } #date { float:right; } #leftcolumn { float:left; width:380px; padding-top: 10px; } #rightcolumn { float:right; width:385px; padding-top: 10px; text-align:right; } h1 { color:#3a73b7; font-size: 20px; font-weight: bold; font: "Trebuchet MS", Arial, Helvetica, sans-serif; padding-top: 0px; padding-bottom: 0px; margin-bottom: 2px; margin-top:5px; } img.alt1 { float:left; padding-left: 3px; } Code (markup): Probably quite bad code, so any tips would be greatly appreciated, I've been putting off learning this for too long
Mostly, you didn't enclose your float elements Study the page linked above and compare with this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content= "text/html; charset=utf-8" /> <style type="text/css"> /*<![CDATA[*/ body { background-color: silver; font: 81.25%/1.5385 "Trebuchet MS", Arial, Helvetica, sans-serif; color: black; margin: 0; } p { font-size: 1em; margin: 1.5385em 0 0; } a {} a:visited {} a:hover {} h1 { font-size: 1.5em; line-height: 1.667; margin: .6667em 0 0; } h2 { color:#3a73b7; font-size: 1.25em; line-height: 1em; margin: 1em 0 0; } h3 { color: black; font-size: 1em; line-height: 1.5385; margin: 1.5385em 0 0; } img { border: 1px solid black; display: block; /*just to make up for no images*/ } #container { background:#ffffff; width: 770px; margin:0 auto; } #header { background: white url(images/nav.jpg); text-align:center; border-bottom: 1px solid black; } #middle { background:pink; overflow: hidden; text-align: left; width: 100%; } #footer { background: yellow; } #navfluid { border-bottom: 1px solid #e2e2e2; padding-top: 10px; } #nav { background-color: white; border-bottom: 1px solid black; overflow: hidden; width: 100%; } #navbarleft { float:left; width: 380px; } #navbarright { float:right; width: 385px; text-align:right; } #date { float:right; } #leftcolumn { float:left; width:380px; padding-top: 10px; } #rightcolumn { float:right; width:385px; padding-top: 10px; text-align:right; } img.alt1 { float:left; padding-left: 3px; } /*]]>*/ </style> <title> Untitled Document </title> </head> <body> <div id="container"> <div id="header"> <h1> <img src="images/header.jpg" width="770" height="160" alt= "generic header" /> </h1> </div> <div id="navfluid"> <div id="nav"> <div id="navbarleft"> nav </div> <div id="navbarright"> Date and Time </div> </div> </div> <div id="middle"> <div id="leftcolumn"> <h2> Heading 1 </h2> <p> this is some text this is some text this is some text this is some text </p> <p> <img src="images/order1.jpg" width="63" height="63" class= "alt1" />this is some text this is some text this is some text this is some textthis is some text this is some text this is some text this is some text </p> <p> <img src="images/order2.jpg" width="63" height="63" class= "alt1" />this is some text this is some text this is some text this is some textthis is some text this is some text this is some text this is some text </p> <p> <img src="images/order3.jpg" width="63" height="63" class= "alt1" />this is some text this is some text this is some text this is some textthis is some text this is some text this is some text this is some text </p> <p> <img src="images/guarantee.jpg" width="311" height="100" alt="a pic" /> </p> </div> <div id="rightcolumn"> <h2> Heading 2 </h2> <p> this is some text this is some text this is some text this </p> <h3> Headers </h3> <p> <img src="examples/totallybirdspreview.jpg" width="311" height="90" alt="a pic" /> </p> <p> <img src="examples/woodlandspreview.jpg" width="311" height="79" alt="a pic" /> </p> <h3> Landing Pages </h3> <p> <img src="examples/cell1preview.jpg" width="311" height= "79" alt="pic" /> </p> <p> <img src="examples/cell2preview.jpg" width= "311" height="79" alt="a pic" /> </p> <h3> Latest Website </h3> <p> Myspace Game Layouts </p> </div> </div> <div id="footer"> footer </div> </div> </body> </html> Code (markup): Don't worry with the little stuff until you have your major areas set up. And, don't do that until you have well structured, semantic html markup. It will sometimes make things easier to debug if you put a pastel background color on troublesome areas. cheers, gary
Thanks for your reply, for some reason your website isn't working for me though? Says server cannot be found. Also after looking at the code you gave above I have a question. What I was trying to do is make the header fluid, while the content body is fixed and centered, and the footer to be fluid again. Thanks so much for your help, Gary
Wow scratch that, after looking at the CSS you altered I noticed you took out the widths and added overflow: hidden; I applied these changes to my CSS file and it completely fixed my problem. I'm amazed! You sir are an expert, thanks so much for everything!
With any luck, the site will be back up soon. The log dailies show the usual traffic through Monday, so this should be temporary. That page will explain the {overflow: hidden;} bits. cheers, gary