container div not scaling in height

Forum Moderators: not2easy

Message Too Old, No Replies

container div not scaling in height

container next div position absolute

vincentv75

12:52 pm on Feb 26, 2010 (gmt 0)

Hello,

Maybe this has been discussed for a dozen times, but I could not find the answer on my question:

I want to have 2 layers next to each other in a div called "container". With my solution, I see that container is not scaling in height.


<div id="container" style="border: 1px black solid">
<div id="left" style="position: absolute;">
left
</div>
<div id="right" style="position: absolute;left:100px;">
right
</div>
</div>

Who has any ideas to solve this?

Thanks in advance!

birdbrain

1:14 pm on Feb 26, 2010 (gmt 0)

Hi there vincentv75,

and a warm welcome to these forums. ;)

This is how I would approach your problem...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
body {
background-color:#fee;
}

#container {
width:760px;
padding:4px;
border:1px solid #000;
margin:auto;
background-color:#fff;
overflow:hidden;
}

#left,#right {
float:left;
width:336px;
padding:20px;
border:1px solid #000;
margin-right:4px;
text-align:center;
background-color:#efe;
}

#right {
margin-right:0;
background-color:#eef;
 }
</style>

</head>
<body>

<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>

</body>
</html>

birdbrain

vincentv75

2:48 pm on Feb 26, 2010 (gmt 0)

Thanks, I think this is better than my idea... I will process this next week and then I am sure I can do the things I want with it :D

birdbrain

4:10 pm on Feb 26, 2010 (gmt 0)

No problem, you're very welcome. ;)

webkoala

9:38 pm on Feb 26, 2010 (gmt 0)

Hello, i have similar problem but not exactly. I`d also have width-scaled divs:
Let me explain abit:

menu_top is a header for left side with bg image;
content_top is a header for right side with bg image;

In menu_content i`d put some list with links,
in main_content would be page content

If i fill my page, i want that left size to have same width as right one. And thats the first question.
Second is that, how i can make text in both headers to be in same line if i`ll use different font sizes.


<!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>Untitled Document</title>
<style type="text/css">
#wrapper {
text-align: left;
margin: 0px auto;
padding: 0px;
border:1;
width: 960px;
}
#side-a {
float: left;
width: 200px;
}

#side-b { 
margin: 0;
float: left;
width: 760px;
height: 1%;
}

#menu_top { 
background: url(_gfx/menu_top.gif);
width:200px;
height:40px;
border:0;

}
#content_top { 
background: url(_gfx/content_top.gif);
width:760px;
height:40px;
border:0;
}
#menu_content
{

}
#main_content
{

}
</style>
</head>
<body>

<div id="wrapper">
<div id="container">
<div id="side-a">
<div id="menu_top">Tekst</div>
<div id="menu_content">o0 </div>
</div>
<div id="side-b">
<div id="content_top">Tekst</div>
<div id="main_content">o0 </div>
</div>
</div>
</div>

</body>
</html>

Thanks for reply