CSS Height

[magnusga]

Hello,

I having been trying to figure out this issue all day without luck. Trying to figuring out why the containers don't adapt to the content inside it, and stick to what is above it, to say it in lea man's terms.

The content_container (red border) is just way too high, and it doesn't connect with the stuff above it.
(The height of it was addressed by Zipper)

It looked okay before, but then the height and bottom etc was fixed to certain numbers, so it wasn't dynamic. I want it to match the content height, and thus the browser will have a scroller for the pages with a lot of content.

Thanks in advance for looking at my code!

Magnus

CSS:

@charset "UTF-8";
/* CSS Document */

body {
background-color:#000000;
}
.wrapper {
margin:auto auto;
width:900px;
overflow:hidden;
height: 100%;
border-style:solid;
border-color:yellow;
}
.header {
position:relative;
width: 900px;
height: 130px;
top: -10px;
z-index: -3;

border-style:solid;
border-color:orange;
}
.logo {
position:absolute;
width: auto;
top: 11px;
left: 20px;
}
.navi_container {
height: auto;
margin-top: 30px;
z-index: 1;
margin-right: 660px;
border-style:solid;
border-color:orange;
}
.navi_home {
display: block;
width: 240px;
height: 27px;
background-image:url(buttons/home.png);
background-repeat:no-repeat;
}
.navi_home:hover {
background-position: -240px 0;
}
.navi_aboutus {
display: block;
width: 240px;
height: 27px;
background-image:url(buttons/aboutus.png);
background-repeat:no-repeat;
}
.navi_aboutus:hover {
background-position: -240px 0;
}
.navi_dancestyle {
display: block;
width: 240px;
height: 27px;
background-image:url(buttons/dance_styles.png);
background-repeat:no-repeat;
}
.navi_dancestyle:hover {
background-position: -240px 0;
}

.navi_price {
display: block;
width: 240px;
height: 27px;
background-image:url(buttons/price.png);
background-repeat:no-repeat;
}
.navi_price:hover {
background-position: -240px 0;
}
.navi_course {
display: block;
width: 240px;
height: 27px;
background-image:url(buttons/course.png);
background-repeat:no-repeat;
}
.navi_course:hover {
background-position: -240px 0;
}
.navi_instructor {
display: block;
width: 240px;
height: 27px;
background-image:url(buttons/instructor.png);
background-repeat:no-repeat;
}
.navi_instructor:hover {
background-position: -240px 0;
}
.navi_contactus {
display: block;
width: 240px;
height: 27px;
background-image:url(buttons/contact_us.png);
background-repeat:no-repeat;
}
.navi_contactus:hover {
background-position: -240px 0;
}
.banner {
position:relative;
top: -250px;
z-index: -10;
left: 100px;
width: 800px;
border-style:solid;
border-color:orange;
}
.left_img {
background-image:url(left_image.jpg);
background-repeat:no-repeat;
width:260px;
height:515px;
padding-top: 0px;

border-style:solid;
border-color:blue;
}
.content_container {
height:auto;
width: 900px;
position: relative;

border-style:solid;
border-color:red;
}

.calendar_container {
z-index:2;
height: 300px;
width: 900px;
bottom: 250px;
position: relative;
left: 50px;
}
.table_right {
top: -510px;
position: absolute;
width: 600px;
right: -300px;
z-index: 4;

border-style:solid;
border-color:white;
}
h1 {
font-family:Arial, Helvetica, sans-serif;
color:#999999;
font-size:16px;
color: #FF9900;
text-decoration: none;
}
h2 {
font-family:Arial, Helvetica, sans-serif;
color:#999999;
font-size:14px;
color: #FF9900;
text-decoration: none;
}
a {
font-family:Geneva, Arial, Helvetica, sans-serif;
color:#CCCCCC;
font-size:12px;
font-weight: lighter;
}
.dance_style_text {
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:16px;
font-weight: lighter;
text-decoration: none;
color: #999999;
}
.welcome_text {
font-family:Arial, Helvetica, sans-serif;
text-align:center;
color:#999999;
font-size:30px;
color: #FF9900;
text-decoration: none;
}
.contact_us_text {
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:14px;
font-weight: lighter;
text-decoration: none;
color: #999999;
}
.text {
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:13px;
font-weight: lighter;
text-decoration: none;
color: #999999;
}
.calendar_frame {
width:625px;
height:515px;
z-index: -1;
position: relative;
left: 173px;
top: 60px;
}
.calendar_day {
position: relative;
width: 750px;
right: -70px;
top: -500px;
height: 300px;
}
.calendar_content {
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:12px;
color: #CCCCCC;
}
.menu_list {
width: 500px;
}
.menu_head {
padding: 5px 10px;
cursor: pointer;
position: relative;
margin:1px;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:14px;
background-image: url(left.png);
background-repeat: no-repeat;
color: #FFCC00;
}
.menu_body {
display:none;
}
.menu_body_text{
display:block;
padding-left:12px;
text-decoration:none;
background-color: #000000;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight: lighter;
text-decoration: none;
color: #999999;
}

HTML:

<div class="table_right">
<table border="0" cellspacing="10" cellpadding="0" class=
"text">
<tr>
<td>
<p class="welcome_text">Welcome to widgets!</p>

<p>specifics removed.</p>

<p>specifics removed.</p>
</td>
</tr>

<tr>
<td align="center">
<table border="0" cellspacing="10" cellpadding="0">
<tr>
<td><a href="widgets"><img src=
"widgets" alt="" width="157" height="116"
border="0" /></a> </td>

<td><a href="widgets"><img src=
"widgets.jpg" alt="" width="157"
height="116" border="0" /></a> </td>
</tr>

<tr>
<td><a href="widgets"><img src=
"widgets.jpg" alt="" width="157"
height="116" border="0" /></a> </td>

<td><a href="widgets"><img src=
"widgets.jpg" alt="" width="157"
height="116" border="0" /></a> </td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>

[edited by: swa66 at 12:53 am (utc) on Oct. 27, 2009]
[edit reason] No specifics, please ToS and Forum Charter [/edit]

[Zipper]

The problem is with your .table_right class. Even though it's positioned where you want, the actual div container is set to position relatively which means anything inside it will increase it's height from where the element 'actually' is. either change it's positioning to absolute and get it where you want or try incorporating floats to align the div's. Like, .left_img {float: left;}

[magnusga]

Thanks Zipper (mod: sorry about the link).

I did the absolute positioning on the table like you said, and surely enough the content_container is now fitting to what is inside it.

Is there any downsides to using this absolute positioning? What if people have different resolutions / browsers etc? Will it display correctly?

The float idea strikes me to be a better approach even though i don't know much about it.

I am pretty much a beginner with css, is the float: left you suggested all that i need, or will i have to rewrite the whole css then?

Thanks in advance. I really appreciate it.

[magnusga]

Perfect, i managed to use the float successfully the way Zipper suggested:

.left_img {
background-image:url(left_image.jpg);
background-repeat:no-repeat;
width:260px;
height:400px;
padding-top: 0px;
float: left;
border-style:solid;
border-color:blue;
}
.content_container {
height:auto;
width: 900px;
position: relative;

border-style:solid;
border-color:red;
}

Now my only problem is that there is a space between the content container and the things above it. In other words the .wrapper doesnt adapt to what is inside it.

Thanks a million for any help.