 |
 |
|
||||||||
|
||||||||
10-04-2011, 11:04 PM
|
#1 |
|
New Member
 Join Date: Feb 2011
Posts: 4
|
Div Height Problem!
Hello,
I have a containing div with 2 divs nested within making a 2 column layout. The containing div has a background repeating on the y axis. The issue I'm having is that the right column will not inherit the entire background the whole way down. An example of this is at http://barbarostudios.com/clientprev...ey/classes.php Here is what I have for the layout HTML: Code:
<div id="content_inner"> <div id="content_inner_left"> </div> <div id="content_inner_right"> </div> </div> Code:
#content_inner {
margin: 0 auto;
text-align:left;
width:1044px;
padding:3px;
font-family:Verdana, Geneva, sans-serif;
color:#000;
font-size:12px;
background-image:url(images/bg_content_inner.png);
background-repeat:repeat-y;
background-attachment:fixed;
background-position:center;
}
#content_inner h1 {
font-family: "gnuolane", Verdana, Tahoma;
font-size:32px;
color:#000;
}
#content_inner_left {
float:left;
padding-left:20px;
padding-right:20px;
width:700px;
background:inherit;
height:auto;
}
#content_inner_right {
text-align:left;
float:right;
width:284px;
height:auto;
padding-right:20px;
font-family:Verdana, Geneva, sans-serif;
color:#000;
font-size:12px;
background:inherit;
}
|
|
|
|
10-05-2011, 03:40 PM
|
#2 |
|
Super Moderator
 Join Date: Oct 2008
Location: Arizona, USA
Posts: 1,053
|
Looking at the site, it seems that the issue is resolved? The background (shadow edge image) repeats all the way down on both sides.
However, the markup could be cleaned up bit. Like so: HTML Code:
<div id="content_inner"> <div> <!--Left column--> </div> <div class="sidebar"> <!--Right column--> </div> </div> Code:
div#content_inner {
margin: 0 auto;
width:1044px;
padding:3px;
font:normal 12px/16px Verdana, Geneva, sans-serif;
color:#000;
background:transparent url(images/bg_content_inner.png) center fixed repeat-y;
}
div#content_inner h1 {
font:bold 32px/45px "gnuolane", Verdana, Tahoma;
color:#000;
}
div#content_inner > div {
float:left;
margin-right:20px;
padding-left:20px;
width:700px;
}
div#content_inner div.sidebar {
margin:0;
padding:0 20px 0 0;
width:284px;
}
__________________
John Darling Graphic / Web Designer SmarterTools Inc. (877) 357-6278 www.smartertools.com |
|
|
|
 |
| Tags |
| css, div, html, layout |
| Thread Tools | |
| Display Modes | |
|
|
Linear Mode
