PDA

View Full Version : Probably simple, problem with height of a div box not adjusting to height of content.



Saurdo
Apr 6th, 2007, 02:39 AM
<style type="text/css">
.title {
font-family: 'Trebuchet MS', Verdana, Sans-Serif;
letter-spacing: -1px;
font-size: 17px;
font-weight: bold;
padding-left: 5px;
}
body{
background-color: #000;
margin-top: 0px;
margin-bottom: 0px;
}
.main {
position: relative;
margin-left: auto;
margin-right: auto;
width: 900px;
background-color: #333;
color: #fff;
border: 2px solid #999;
border-top-width: 0px;
border-bottom-width: 0px;
}
.navleft {
max-width: 210px;
float: left;
background-color: #666;
border: 1px solid #fff;
border-top-width: 0px;
border-left-width: 0px;
}
.currentfolder {
background-color: #888;
border-bottom: 1px solid #fff;
padding: 15px;
text-align: center;
font-size: 18px;
font-family: "Lucida Grande", Tahoma, Arial, sans-serif;
font-weight: bold;
}
.folders, .files {
position: relative;
background-color: #666;
border-bottom: 1px solid #fff;
padding: 5px;
font-size: 14px;
font-family: "Lucida Grande", Tahoma, Arial, sans-serif;
}

.files {
background-color: #444;
border-bottom: 0px;}


</style>
<div class="main">
<div class="navleft">
<div class="currentfolder">
sfsdfdsfsdfdsafsdfdsjfshdgshdgfsdfsdg this text needs to wrap around.
</div>
<div class="folders">
<div class="title">Folders:</div>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
</div>
<div class="files">
<div class="title">Files:</div>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
</div>
</div>
This div box's height isn't reflective upon the height of the div boxes to the left.

So, I'm having a problem with a div based name "content" that houses everything, not expanding it's height to inner DIV boxes height. I only know enough CSS to do some editing and so this is probably just a simple problem.

Another problem, one that I can fix outside of CSS if there is no CSS fix (thus making a CSS fix non-essential) is that the text overflows if it gets too long.

Here's an online example: http://saurdo.com/test/dirlist.html

twodayslate
Apr 6th, 2007, 03:48 AM
http://bonrouge.com/3c-hf-fluid-lc.php

Take a look at some of those.

_Aerospace_Eng_
Apr 6th, 2007, 05:32 AM
You need to clear your floats. This is a common problem beginners have when they first start coding using CSS. They don't know that floats are out of the document flow. IE resizes the containing element of the floats because well it doesn't know not to. Its an IE bug. Clearing the floats will probably fix both your problems.

http://www.positioniseverything.net/easyclearing.html

Saurdo
Apr 6th, 2007, 06:00 AM
Okay, all fixed. Thanks for the help. I knew about the clear function but never thought to use it. :o

Excavator
Apr 6th, 2007, 06:59 AM
Hello Saurdo,
You don't have a DocType, character encoding, html, head, or body tags. Amazing it works at all.

Check your site in the validator.

Saurdo
Apr 6th, 2007, 07:16 AM
You say that like those things actually have an affect.

_Aerospace_Eng_
Apr 6th, 2007, 07:21 AM
You say that like those things actually have an affect.

Oh boy, you have a lot to learn. They do affect the document especially in IE. Without a doctype IE will be in quirks mode rendering some margins, padding, and widths incorrectly.

Saurdo
Apr 6th, 2007, 07:28 AM
Hmm, I read about doctype before and all I read was it was so the validator could validate properly. I'm not a designer as you can tell, I mainly exclusively work with server side languages and let someone else take care of the design.