Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

CSS Forum


You are currently viewing our CSS Forum as a guest. Please register to participate.
Login


Tycoon Talk > Web Development and Programming Support > CSS Forum > css layout help - container div

Reply
css layout help - container div
Old 09-09-2007, 12:55 PM css layout help - container div
Novice Talker

Posts: 8
Name: debra grant
Trades: 0
Talkupation: debrag is on a distinguished road
My site is here. The problem I'm having is that when the content div goes over the height of the container div a scroll bar appears. How do I get it so the container div changed height with the content div?

style:

#content {
position:absolute;
width:634px;
heightx;
z-index:2;
left: 228px;
top: 365px;
background-color: #FFFFFF;
float:right;
}
#container {
position:relative;
width:881px;
height:1100px;
left: 11px;
top: 21px;
background-color: #FFFFFF;
overflow: auto
}
debrag is offline
Reply With Quote
View Public Profile
 
 
Register now for full access!
Old 09-09-2007, 03:09 PM Re: css layout help - container div
maxxximus's Avatar
Extreme Talker

Posts: 219
Name: Rob
Location: UK
Trades: 0
Talkupation: maxxximus is a jewel in the roughmaxxximus is a jewel in the roughmaxxximus is a jewel in the rough
You need to get rid of your Absolute divs and leave them to float and remove the overflow from the content div.

Good sticky on giving 100% height at top of page.

Done a quick edit which removes the scroll problem.

I've left you the sidebar to play with



HTML Code:
<!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>Home</title>
<style type="text/css">
<!--
body, td, th {
    font-family: tahoma;
    font-size: 10px;
    text-align:justify;
    color: #999999;
}
body {
    margin:0px;
    background-repeat:repeat-y;
    background: #000000;
}

#sidebar {
    width:204px;
    height:px;
    z-index:1;
    left: 13px;
    top: 365px;
    background-color: #FFFFFF;
    float:left
}
#content {

    width:634px;
    min-height:100%;
    z-index:2;
    left: 228px;
    top: 365px;
    background-color: #FFFFFF;
    float:right;
}
#welcome {
    position:absolute;
    width:372px;
    height:119px;
    z-index:3;
    left: 377px;
    top: 125px;
    background-color: #FFFFFF;
}
#header {

    width:881px;
    height:347px;
    z-index:4;
    left: 27px;
    background-color: #000000;
    top: 25px;
}
#container {

    width:881px;
    height:1100px;
    left: 11px;
    top: 21px;
    background-color: #FFFFFF;
    
    }
    
.headline {font-size:8px; text-transform:uppercase; font-weight:bolder; color:#C30720; padding:2px; margin-bottom:2px; margin-top:2px; border-bottom:1px solid #C1C1C1; padding-left:10px;}
.headline2 {font-size:7px; text-transform:uppercase; font-weight:bolder; color:#D8A58A; padding:2px; margin-bottom:2px; margin-top:2px; border-bottom:1px solid #C1C1C1; padding-left:10px;}


a:link {color: #333333; text-decoration: none; font-size: 8px; font-weight: bold; text-transform:uppercase;    overflow: auto;
    overflow: scroll;    
    background-image: url(pattern_138.gif);
    background-image: url(pattern_138.gif);
}
a:visited {color: #333333; text-decoration: none; font-size: 8px; font-weight: bold; text-transform:uppercase;}
a:hover {color: #DEB19C; text-decoration: none; font-size: 8px; font-weight: bold; text-transform:uppercase;}
a:active {color: #333333; text-decoration: none; font-size: 8px; font-weight: bold; text-transform:uppercase;}
#title {
    position:absolute;
    width:372px;
    height:88px;
    z-index:3;
    left: 377px;
    top: 23px;
    background-color: #FFFFFF;
}
#header2 {
    
    width:881px;
    height:1004px;
    z-index:3;
    left: 11px;
    top: 19px;
    background-color: #FFFFFF;
}
#welcome2 {
    position:absolute;
    left:379px;
    top:132px;
    width:357px;
    height:111px;
    z-index:5;
    background-color: #FFFFFF;
}
.style1 {font-size: larger}
.style2 {
    font-size: x-large
}
-->
</style>
<style type="text/css"  media="all">
/* begin styles for RSS Feed */



.rss_box {

     margin: 5px 5%;

     padding: 4px 8px;

     width: 219px;

     background-color: #ffffff;

    

}



.rss_title, rss_title a {

    font-family: "verdana, arial, sans-serif";

    font-size: 11;

    font-weight:normal;

    margin: 0px 0;

    padding: 0;

    letter-spacing: 1px;

}



.rss_items {

  

}



.rss_item  {

  font-family: verdana, arial, sans-serif;

  font-size: 11px;

  font-weight : normal; 

  margin: 0px 0;

}



.rss_item a:link, .rss_item a:visited, .rss_item a:active {

    text-decoration : none;

    border-bottom: 1px solid #336699;

    color: #336699;

    }



.rss_item a:hover { 

    text-decoration : none;

    color: #336699;

    border-bottom: 1px dotted #336699;

    }

    

.rss_date {

    font-size: 11px;

    font-weight : normal;

    color: #336699;

    }
    #apDiv1 {    position:absolute;
    left:120px;
    top:21px;
    width:185px;
    height:350px;
    z-index:6;
}
#apDiv2 {
    position:absolute;
    left:120px;
    top:21px;
    width:3px;
    height:350px;
    z-index:6;
    background-color: #333333;
}
#apDiv3 {
    position:absolute;
    left:24px;
    top:132px;
    width:145px;
    height:109px;
    z-index:6;
}
#apDiv4 {
    position:absolute;
    left:25px;
    top:252px;
    width:145px;
    height:109px;
    z-index:6;
}
#apDiv5 {    position:absolute;
    left:27px;
    top:33px;
    width:145px;
    height:109px;
    z-index:6;
}
#apDiv6 {    position:absolute;
    left:27px;
    top:33px;
    width:145px;
    height:109px;
    z-index:6;
}
.style4 {
    font-size: xx-large;
    color: #CC0000;
}
#welcome3 {    position:absolute;
    width:372px;
    height:119px;
    z-index:3;
    left: 377px;
    top: 125px;
    background-color: #FFFFFF;
}
#welcome4 {
    position:absolute;
    width:372px;
    height:94px;
    z-index:3;
    left: 377px;
    top: 22px;
    background-color: #FFFFFF;
}
#welcome5 {
    position:absolute;
    width:372px;
    height:119px;
    z-index:3;
    left: 377px;
    top: 254px;
    background-color: #FFFFFF;
}
</style>

</head>

<body>

<div id="header"><img src="insomniacbg23a.jpg" alt="image" width="881" height="350" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect" coords="17,190,68,207" href="index.php" />

<area shape="rect" coords="80,189,130,207" href="libby.php" />
<area shape="rect" coords="140,186,217,210" href="interactive.php" />
<area shape="rect" coords="229,207,281,234" href="media.php" />
<area shape="rect" coords="292,214,333,229" href="web.php" />
</map>
</div>
<div id="container">
<div id="sidebar">
  <div class="headline">LATEST Projects </div>
  <div align="left">
    <div align="left">
      <div align="center">

        <div align="left">
          <p align="center"><img 
            src="6i.jpg" alt="1" 
            width="55" height="77" align="left" /> <b>BlackJack: At the Gates<br />
            </b>As: Stephanie Turner<br />
            Release: 24 September 2006 (Australia)<br />
            Format: TV<br />
            <a href="blackjack.php">Info</a> / <a href="http://www.australiantelevision.net/blackjack/secondtrilogy.html" target="_blank">Site</a><br />

          </p>
          <p align="right">[Past projects]<br />
          </p>
        </div>
      </div>
    </div>
  </div>
  <div class="headline">SCHEDULE</div>

  <div align="center"><br />
      <div align="center"><img 
            src="flayguk.jpg" alt="1" 
            width="60" height="43" align="left" /> <b><U>All Saints</U><br />
        </b>As: Bronwyn Craig <br />
        Channel: BBC1 (mon-fri)<br />
        Times: 2:35pm - 3:20pm <br />
        <br />

        &nbsp; </div>
  </div>
  <div class="headline">LATEST  IMAGES</div>
  <p align="center"><center><marquee direction="left" loop="infinite" scrollamount="2" width="150" height="105" id="headlines" onmouseover="document.all.headlines.stop()" onmouseout="document.all.headlines.start()">
  <table  >

<tr>

<td><a href="http://libbytanner.diva-host.com/gallery/displayimage.php?pos=-88"  ><img  src="http://libbytanner.diva-host.com/gallery/albums/body/thumb_59603.jpg" alt="59603.jpg" title="59603.jpg"  /></a><br /></td>
<td><a href="http://libbytanner.diva-host.com/gallery/displayimage.php?pos=-85"  ><img  src="http://libbytanner.diva-host.com/gallery/albums/body/thumb_59440.jpg" alt="59440.jpg" title="59440.jpg"  /></a><br /></td>

<td><a href="http://libbytanner.diva-host.com/gallery/displayimage.php?pos=-86"  ><img  src="http://libbytanner.diva-host.com/gallery/albums/body/thumb_59470.jpg" alt="59470.jpg" title="59470.jpg"  /></a><br /></td>
<td><a href="http://libbytanner.diva-host.com/gallery/displayimage.php?pos=-87"  ><img  src="http://libbytanner.diva-host.com/gallery/albums/body/thumb_59504.jpg" alt="59504.jpg" title="59504.jpg"  /></a><br /></td>
<td><a href="http://libbytanner.diva-host.com/gallery/displayimage.php?pos=-82"  ><img  src="http://libbytanner.diva-host.com/gallery/albums/body/thumb_59288.jpg" alt="59288.jpg" title="59288.jpg"  /></a><br /></td>

</tr>


</table>

</marquee>
    <br />
    &nbsp;
    <!-- BEGIN CBOX - http://www.cbox.ws -->
    <br />

    <!-- END CBOX --></p>
  <div class="headline">SITE DETAILS</div>
  <div align="center">Owned by:Debra<br />
    Host: diva-host.com<br />
    Opened Since: 2007<br />
    <!--WEBBOT bot="Script" startspan PREVIEW="Site Meter" -->
    <br />

    </p>
  </div>
  <div class="headline">SISTER SITES</div>
  <p align="center">Helen Dallimore<a target="_blank" href="http://sarah-fan.com"><br />
    </a>Emily Symons<br />
    Maura Tierney<br />
    Julianna margulies<br />

    daphne zuniga</p>
  <div class="headline">SHOP FOR libby</div>
  <div align="center"><a href="http://www.qksrv.net/click-479223-5463217?loc=http%3A//search-desc.ebay.com/search/search.dll?MfcISAPICommand=GetResult&amp;SortProperty=Metahttp://search-desc.ebay.com/search/search.dll?sofocus=bs&amp;sbrftog=1&amp;from=R10&amp;_trksid=m37&amp;satitle=libby+tanner&amp;sacat=-1%26catref%3DC6&amp;fts=2&amp;sargn=-1%26saslc%3D2&amp;sadis=200&amp;fpos=ZIP%2FPostal&amp;sabfmts=1&amp;saobfmts=insif&amp;ftrt=1&amp;ftrv=1&amp;saprclo=&amp;saprchi=&amp;fsop=1&amp;fsoo=1" target="_blank">EBAY</a><br />
    &nbsp;<a/></a></a></a> </div>
  <div align="center"></div>
</div>
<div id="content">
  <div class="headline">

    <div align="center">NEWS</div>
  </div>
  <div align="center">
    <p align="center">
      <div style="width:600px; margin-bottom:30px;">
<div><strong>01 Sep 2007 - test</strong></div>

<div style="text-align:justify; padding:3px; margin-top:3px; margin-bottom:5px; border-top:1px solid #D3D3D3;">ehnfdhergrg<br />fvc<br />vcvvvvv<br />xv<br />vxcvc<br />vxvv<br />v<br />v<br />xcv<br />xcvv<br /><br />vv<br />vc<br />vc<br />v<br />v<br />vv<br />#vv#<br />cv#v#<br />#v<br />v#v#<br />x#<br />xv#<br />x#v#v</div>

<div style="float: right;"><!-- no full story-->  <a href="/index.php?subaction=showcomments&amp;id=1188645073&amp;archive=&amp;start_from=&amp;ucat=&amp;">0 Comments</a></div>


</div><div style="width:600px; margin-bottom:30px;">
<div><strong>29 Aug 2007 - All Saints - season 1</strong></div>

<div style="text-align:justify; padding:3px; margin-top:3px; margin-bottom:5px; border-top:1px solid #D3D3D3;">I am starting to add All Saints season 1 caps to the gallery. The following have been added so far:<br /><br /><a href="http://libbytanner.diva-host.com/gallery/thumbnails.php?album=3">1.01 - Body & Soul</a><br /><br /><center><img src="http://libbytanner.diva-host.com/gallery/albums/body/thumb_59603.jpg">  <img src="http://libbytanner.diva-host.com/gallery/albums/body/thumb_48044.jpg">  <img src="http://libbytanner.diva-host.com/gallery/albums/body/thumb_59504.jpg"></center></div>

<div style="float: right;"><!-- no full story-->  <a href="/index.php?subaction=showcomments&amp;id=1188427611&amp;archive=&amp;start_from=&amp;ucat=&amp;">0 Comments</a></div>


</div><div style="width:600px; margin-bottom:30px;">
<div><strong>28 Aug 2007 - Gallery updates</strong></div>

<div style="text-align:justify; padding:3px; margin-top:3px; margin-bottom:5px; border-top:1px solid #D3D3D3;">I have added 3 photos to the gallery. 2 from Fireflies and 1 from Headland<br /><br /><P align=center> <IMG src="http://libbytanner.diva-host.com/gallery/albums/userpics/10001/thumb_headland1.jpg"> <IMG src="http://libbytanner.diva-host.com/gallery/albums/userpics/10001/thumb_fireflies1.jpg"> <IMG src="http://libbytanner.diva-host.com/gallery/albums/userpics/10001/thumb_fireflies2.jpg"></P></div>

<div style="float: right;"><!-- no full story-->  <a href="/index.php?subaction=showcomments&amp;id=1188340460&amp;archive=&amp;start_from=&amp;ucat=&amp;">0 Comments</a></div>


</div><div style="width:600px; margin-bottom:30px;">
<div><strong>28 Aug 2007 - Welcome</strong></div>

<div style="text-align:justify; padding:3px; margin-top:3px; margin-bottom:5px; border-top:1px solid #D3D3D3;">I hope you like this new Libby Tanner site, please be patient with me as some areas of the site are not up yet but will be soon.</div>

<div style="float: right;"><!-- no full story-->  <a href="/index.php?subaction=showcomments&amp;id=1188334704&amp;archive=&amp;start_from=&amp;ucat=&amp;">0 Comments</a></div>


</div><div style="margin-top:15px;width:100%;text-align:center;font:9px Verdana;">Content Management Powered by <a href="http://cutephp.com/" title="CuteNews - PHP News Management System">CuteNews</a></div><!-- News Powered by CuteNews: http://cutephp.com/ -->      &nbsp;</p>

    <p>&nbsp;</p>
  </div>
</div>  
</div>
</div>

</body>
</html>
Last edited by maxxximus; 09-09-2007 at 03:16 PM..
maxxximus is offline
Reply With Quote
View Public Profile
 
Old 09-10-2007, 04:20 AM Re: css layout help - container div
Novice Talker

Posts: 8
Name: debra grant
Trades: 0
Talkupation: debrag is on a distinguished road
thank you so much I knew it would be something simple but I couldn't figure it out and no-one on any other forum mentioned Absolute divs.
debrag is offline
Reply With Quote
View Public Profile
 
Reply     « Reply to css layout help - container div
 
Previous Thread | Next Thread Tycoon Talk > Web Development and Programming Support > CSS Forum > css layout help - container div

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off




   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 0.30609 seconds with 12 queries