SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Container div not expanding in height

    Hi,

    I'm very new to css, and I am having a problem getting a container div to extend in height with the content. It works on a Mac in both firefox and safari, but it is not displaying in firefox or IE on a PC correctly.

    To view this go to beckysterndesign dot com

    The problem is that the white container will not expand with the content.. The content just flows out of the container.

    Any help would be super appreciated!
    Becky Sue

  2. #2
    Zero Point Zero Siebird's Avatar
    Join Date
    Feb 2007
    Location
    York, PA
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looks like you have a specified height set in your #content div. Set your height to auto and it should expand with the content properly.

    Code CSS:
    div#content {
    background-color:#FFFFFF;
    height:auto;
    position:absolute;
    top:211px;
    width:800px;
    }

    I suggest going through your CSS and using position:relative for most of your div's, rather than using absolute, as it removes the content from the regular flow of the page. Give me a moment..check below, edited the HTML and commented on the CSS
    Last edited by Siebird; Jul 8, 2008 at 18:54.

  3. #3
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help... I tried the auto height though, and now it's not working on my mac?

  4. #4
    Zero Point Zero Siebird's Avatar
    Join Date
    Feb 2007
    Location
    York, PA
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here ya go...

    Updated CSS:
    Code CSS:
    /* BASIC STYLES BEGIN */
     
    html {
    	margin: 0;
    	padding: 0;
    	}
    body {
    	text-align: center;
    	font: 75% verdana, sans-serif;
    	line-height: 1.88889;
    	color: #363636;
    	padding: 0px;
    	}
    #page {
    	margin: 0 auto;
    	position: relative;
    	width: 800px;
    	text-align: left;
    	}
     
    p { 
    	margin-top: 0; 
    	text-align: justify;
    	}
     
    h1 { 
    	font: normal 12px verdana, sans-serif;
    	letter-spacing: 1px; 
    	margin-top: 0;
    	padding-top: 0;
    	color: #363636;
    	}
    h2 { 
    	font: normal 15px verdana, sans-serif;
    	letter-spacing: 1px; 
    	margin-bottom: 0; 
    	color: #CC9900;
    	}
     
    h3 { 
    	font: normal 12px verdana, sans-serif;
    	letter-spacing: 1px; 
    	margin-bottom: 0; 
    	color: #CC9900;
    	}
     
    a:link {
    	text-decoration: none;
    	color: #CC9900;
    	}
     
    a:visited {
    	text-decoration: none;
    	color: #CC9900;
    	}
     
    a:active {
    	text-decoration: none;
    	color: #000000;
    	}
     
    a:hover {
    	text-decoration: none;
    	color: #000000;
    	}
    /* BASIC STYLES END */
     
    /* HEADER BEGINS */
    div#header {
    	position: relative;
    	margin:0; padding: 0;
    	width: 800px;
    	height: 211px;
    	}
     
    #msg {
    	position: absolute;
    	width: 600px;
    	left: 210px;
    	top: 60px;
    	}
     
    div#nav {
    	height: 30px;
    	width: 400px;
    	border-top: 1px;
    	border-bottom: solid #000000 1px;
    	position: absolute; /* removed from flow of the page b/c this will allow the content to flow w/o adding negative margins */
    	left: 400px;
    	top:160px;
    	}
     
    div#nav ul {
    	margin: 0px;
    	padding: 0px;
    	font-family: Verdana, sans-serif;
    	font-size: 12px;
    	line-height: 30px;
    	white-space: nowrap;
    	}
     
    div#nav li {
    	list-style-type: none;
    	display: inline;
    	}
     
    div#nav li a {
    	text-decoration: none;
    	padding: 7px 20px;
    	color: #000000;
    	}
     
    div#nav li a:link {
    	color: #000000:
    	}
     
    div#nav li a:visited {
    	color: #000000;
    	}
     
    div#nav li a:hover {
    	color: #CC9900;
    	}
    /* HEADER ENDS */
     
    /* HOME CONTENT BEGINS */
    div#content {
    	position: relative;
    	width: 800px;
    	height: auto;
    	margin: 0;
    	/*top: 211px; Removed as position is relative */
    	background-color: #FFFFFF;
    	}
     
    #leftmenu { 
    	width: 200px;
    	list-style-type: none;
    	}
     
    #leftmenu li { /* removed ul as #leftmenu is ul element, I believe you meant li */
    	margin-left: 0;
    	padding-left: 0;
    	list-style-type: none;
    	font-family: Verdana, sans-serif;
    	}
     
    #leftmenu a {
    	display: block;
    	padding: 3px;
    	width: 160px;
    	background-color: #363636;
    	border-bottom: 1px solid #EEEEEE;
    	}
     
    div#sidebar {
    	position: relative;
    	float:left;
    	margin-top:-25px; /* overlap header and content */
    	}
     
    #sample {
    	/* position: relative; */
    	margin-top: 20px;  /*changed from top: */
    	margin-left: 40px; /* changed from right: */
    	}
     
    /* #mandm { now being used as the background image for div#copy
    	position: relative;
    	top: 280px;
    	right: 440px;
    	} */
     
    div#copy {
    	position: relative;
    	width: 400px;
    	height: auto; /* added to expand */
    	float:right;
    	margin-right:20px;
    	display:inline; /* fixes IE6 double margin issues when floating*/
    	/*left: 360px;
    	top: 80px;*/
    	padding-left:116px; /* spacing for the background image */
    	background: url(images/mmlogo.jpg) no-repeat 0px 300px #FFF; /* removed the image from the HTML as it wasn't serving a purpose other than design, and used as a background image */
    	}
     
    .clear {clear:both;} /* clears both floated div's, allows the #content to auto expand */
     
    /* CONTENT ENDS */
     
    /* FOOTER BEGINS */
     
    div#footer {
    	position: relative;
    	width:800px;
    	/* top: 890px; Moved to the p element below 
    	left: 310px; 
    	color: #363636; */
    	}
     
    div#footer p {
    	text-align:center !important; /* !important forces to center text */
    	color: #363636;
    	}
     
    /* FOOTER ENDS */
     
    ...the rest...
    Removed image and added a clearing div for the new format:
    Code HTML4Strict:
    <!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" />
    <meta name="description" content="Artist and Graphic Designer." />
    <meta name="keywords" content="graphic designer, designs, graphics, artist, illustrator, designer, designer in york pa, print designer, becky stern, rebecca stern" />
    <title>Becky Stern Design</title>
    <link rel="stylesheet" href="master.css" type="text/css" />
    </head>
     
    <body bgcolor="#000000">
     
    <div id="page">
    	<div id="container">
     
    	<div id="header">
    		<img id="hdr" src="http://www.beckysterndesign.com/images/header.jpg" width="800" height="211" />
     
    	  <h1 id="msg">"It's not what you look at that matters, it's what you see."</h1>
    	</div>
     
    	<div id="nav">
    		<ul>
            <li><a href="index.html"><span>Home</span></a></li>
            <li><a href="bio.html"><span>Biography</span></a></li>
    		<li><a href="port.html"><span>Portfolio</span></a></li>
    		<li><a href="con.html"><span>Contact</span></a></li>
            </ul>
    	</div>
     
    	<div id="content">
     
    		<div id="sidebar">
    			<ul id="leftmenu">
    			<li class="left nav"><a href="kinsley.html"><span>Kinsley Construction</span></a></li>
    			<li class="left nav"><a href="block.html"><span>Blockbuster</span></a></li>
    			<li class="left nav"><a href="room.html"><span>RoomMates</span></a></li>
    			<li class="left nav"><a href="spencers.html"><span>Spencers</span></a></li>
    			<li class="left nav"><a href="dhs.html"><span>Dutch Heritage Stables</span></a></li>
    			<li class="left nav"><a href="mm.html"><span>M&M Staffing</span></a></li>
    			<li class="left nav"><a href="witf.html"><span>WITF</span></a></li>
    			</ul>
    		</div>
     
    		<div id="copy">
    		<img id="sample" src="http://www.beckysterndesign.com/images/sample.jpg" width="300" height="260" />
     
    		<h2 id="case">Case Study</h2>
     
    		<p class="intro">When M&M Staffing out of South Carolina approached me to design their identity, I was immediately excited to take on the opportunity. Upon the specific request to not only include elements from the state flag but also several images of people in the mark, I found myself in a position where I needed to creatively combine a large number of elements into one mark, while still trying to maintain legibility and follow the company's request to produce a 1 color logo.</p>
     
    		<p class="intro">I immediately began my research on the state of South Carolina and the functions of a staffing company in general. In order to provide them with a logo that would be a true representation of their business, I needed to better understand the logistics of staffing, and the overall company goals. <a href="case.html">Continued ...</a></p>
    		</div>
    		<div class="clear">&nbsp;</div>
    	</div>
     
    	<div id="footer">
    	<p>&copy 2008 Becky Stern | 717.424.7244</p>
    	</div>
     
    </div>
     
    </body>
     
    </html>

  5. #5
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks! it's all starting to make sense now


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •