1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Trying to make a div wrapper inherit the height of my nested content div

Discussion in 'CSS' started by sparticus13, Jul 24, 2007.

0
  1. #1
    OK basically I'm trying to get my wrapper div to grow with the height of my content div. My goal is to get something like this http://www.ilovejackdaniels.com/

    My site is centered horizontally. I'm using a wrapper div to center the site.

    #wrapper {
    position:relative;
    width:1116px;
    height:auto;
    margin-top:0px;
    margin-left:auto;
    margin-right:auto;
    }

    I then have a content div that is the main portion of the page.

    I want my site to have a small border image that surounds it like in the example link. I Know have to make a header and footer with the background image of my border. But I need help with the sides. I can make left and right border divs to contain the image using background-repeat or I can make a image that is as wide as my site and transparent with both ends have my 20px wide border and set as the background of my wrapper.

    In either Idea I need to get the border div(s) to grow with the height of the content div. I can do this perfectly if I have a fixed height like I do width. But this site needs to change its content dynamically and therefore the height changes.

    This seems to be a popular design but I just needs a some help or samples of how its being done.

    Thanks
    Chris
     
    sparticus13, Jul 24, 2007 IP
  2. sparticus13

    sparticus13 Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Well I solved it myself. :D
     
    sparticus13, Jul 25, 2007 IP
  3. optical01

    optical01 Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    What did you do to resolve this?
     
    optical01, Jul 27, 2007 IP
  4. sparticus13

    sparticus13 Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Heres my code for a mock up layout. I used an image that is the width of my site and has the two side bars on the left and right sides. It is transparent in the middle and is about 20px in height. This image is repeated vertically as the back ground for the wrapper div. All my other divs are nested inside the wrapper and have a relative positions.


    Now the only thing is to get my two content divs to be lined up correctly. I have a left an and right div for content. It works ok but the right div start verticaly under the left div. It is to the right of it spaced correctly but it needs to start back at the top like the first left div. Works perfectly if you have just one content section. I'm sure I'll fix it soon.

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

    <style type="text/css">

    body {
    margin-top:40px;
    margin-bottom:40px;
    background: #00FF00;
    }

    #wrapper {
    position:relative;
    width:1116px;
    margin-left:auto;
    margin-right:auto;

    }

    #header {
    position:relative;
    width:1116px;
    height:20px;
    background-color:#FF00FF
    }

    #logo {
    position:relative;
    width:1076px;
    height:169px;
    left:20px;
    }


    #footer {
    position:relative;
    width:1116px;
    height:20px;
    background-color:#FF00FF
    }


    #inerpage {
    position:relative;
    margin-left:20px;
    margin-right:20px;
    margin-top:0px;
    background: #FFFF66;
    text-align:center;
    }

    #contentleft {
    position:relative;
    left:0px;
    width:400px;
    height:auto;
    margin-top:0px;
    background: #FFFF66;
    text-align:center;
    }

    #contentright {
    position:relative;
    left:405px;
    width:100px;
    height:auto;
    margin-top:0px;
    background: #FFFF66;
    text-align:center;
    }

    p {
    margin:0px;
    }

    </style>

    </head>
    <body>
    <div id="wrapper" style="background-image:url(images/sides.gif); background-repeat:repeat-y">
    <div id="header"></div>
    <div id="logo">
    <img src="images/Top Bar.gif" width="1076" height="169" alt="" />
    </div>
    <div id="inerpage">
    <div id="contentleft">
    <p>CONTENT</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    </div>
    <div id="contentright">
    <p>CONTENT</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    </div>
    </div>
    <div id="footer"></div>
    </div>
    </body>
    </html>
     
    sparticus13, Jul 30, 2007 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #5
    Ok, here's a hint: Using position relative for that type of moving of objects - BAD idea. There's a reason we have floats and margins. The only reason to use position is when you want to move it without altering flow order.

    Some other 'hints':

    height: auto does NOTHING - it's the default state, you usually don't have to declare it.

    The default behavior of a non-floating block level tag like DIV is to expand to the width of whatever it's parent container is - instead of declaring width:1076 on all your elements, you might be better off removing the width declaration and just setting 20px margins on each side, since #wrapper is set to 1116 width.

    margin declarations can be simplified to shorthand of a single line - it goes clockwise, numbers missing at the end are mirrored from the opposite side.
    So:

    margin:10px; sets all four sides to 10px.

    margin:10px 5px; sets top/bottom to 10px, left/right to 5px.

    margin:10px 5px 8px; sets top to 10, left/right to 5, bottom to 8.

    margin:10px 5px 8px 20px; top to 10, right to 5, bottom to 8, left to 20.

    Same applies for padding and border-width.

    There is no need to be setting position:relative so much - in fact unless you are doing a sneaky trick like drop shadows or absolute positioning elements inside a pos:relative one, there's rarely a good reason to use position:relative in the first place.

    This is how I'd probably write that:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Test Layout</title>

<style type="text/css">
* {
	margin:0;
	padding:0;
}

body {
	background: #0F0;
}

#wrapper {
	width:1116px;
	margin:40px auto;
	background:url(images/sides.gif) repeat-y
}

#header {
	height:20px;
	background-color:#F0F
}

#logo {
	height:169px;
	margin:0 20px;
}

#innerpage {
	overflow:auto; /* make pay attention to height of floats inside it */
	margin:0 20px;
	background:#FF6;
}

#contentleft {
	float:left;
	width:400px;
	background:#FC0;
	text-align:center;
}

#contentright {
	float:left;
	width:100px;
	margin-left:5px;
	background:#FC0;
	text-align:center;
}

#footer {
	clear:both;
	height:20px;
	background-color:#F0F
}

</style>

</head><body>

<div id="wrapper" >
	<div id="header"></div>
	<div id="logo">
		<img src="images/Top Bar.gif" width="1076" height="169" alt="" />
	</div>
	<div id="innerpage">
		<div id="contentleft">
			<p>Content Left</p>
			<p>Content Left</p>
			<p>Content Left</p>
			<p>Content Left</p>
			<p>Content Left</p>
			<p>Content Left</p>
			<p>Content Left</p>
			<p>Content Left</p>
			<p>Content Left</p>
			<p>Content Left</p>
			<p>Content Left</p>
			<p>Content Left</p>
			<p>Content Left</p>
		</div>
		<div id="contentright">
			<p>Content Right</p>
			<p>Content Right</p>
			<p>Content Right</p>
			<p>Content Right</p>
			<p>Content Right</p>
			<p>Content Right</p>
			<p>Content Right</p>
			<p>Content Right</p>
		</div>
	</div>

	<div id="footer"></div>
</div>

</body></html>
    Code (markup):
    I changed the background color of #contentleft and #contentright to see their borders and to make sure #innerpage actually wraps them properly.

    This layout makes use of floats - floats are a very simple thing that is hard to explain. Basically, think of a float as stacking boxes, just sideways.

    Notice I only declare one actual width, in the outermost container - everything else 'cascades down' using margins, which has the side effect of not needing any positioning code... again, if you need to use top, left, right or bottom, you are probably doing something wrong.
     
    deathshadow, Jul 30, 2007 IP