- This topic is empty.
-
AuthorPosts
-
November 19, 2009 at 10:46 pm #26834alexwParticipant
Hey guys,
I’m having a little issue with this [url="http://darkhollowfarm.com/Joomla/"%5Dsite.%5B/url%5D The center div will not expand to fit its content. Instead what happens is the content div, (which is a joomla! module, but joomla isn’t the issue) pops out of the container div. The container does not expand to fit the contents. I’m guessing it’s because the stuff is absolute positioned?
Anyway, is there a way I can switch this to a liquid format so that it expands per content needed? This is for a client, so I’d like to get it done as soon as possible. Also keep in mind that it is NOT broken right now, as the content is styled to fit it, but if more is added, it will break.
Here’s my css:
Code:@charset “UTF-8”;
/* CSS Document */body
{background-image:url(http://www.darkhollowfarm.com/Joomla/templates/herringswell/images/Example5_Slice-copy_27.jpg);
background-repeat: repeat-x;
background-position: 0 0;
background-color:#dddcdc;
position:relative;
height:100%;
margin: 0px auto;
}.container {
position:absolute; left:22.5%; top:0px; margin: 0px auto;
}#content { float: left; min-height: 100%; width: 400px; padding-top: 10px; padding-left:10px; padding-right:10px; }
.corner-a { position:absolute; left:820px; top:50px; width: 25px; height:1188px; background:url(http://www.darkhollowfarm.com/Joomla/templates/herringswell/images/right.png) repeat-y right; }
.corner-b { position: absolute; left:63px; top:50px; width:53px; height:1187px; background:url(http://www.darkhollowfarm.com/Joomla/templates/herringswell/images/left.png) repeat-y left; }
.corner-c { position: absolute; left:80px; top:1206px; width:747px; height:53px; background:url(http://www.darkhollowfarm.com/Joomla/templates/herringswell/images/bottom.png) repeat-x bottom; }
.corner-d { position:absolute; left:62px; top:1237px; width:18px; height:18px; background:url(http://www.darkhollowfarm.com/Joomla/templates/herringswell/images/left-corner.png) bottom left; }
.corner-e { position:absolute; left:827px; top:1238px; width:18px; height:18px; background:url(http://www.darkhollowfarm.com/Joomla/templates/herringswell/images/right-corner.png) no-repeat bottom right; }
.blogger { position:absolute; left: 25px; top: 1145px; width: 36px; height: 32px; }
.facebook { position:absolute; left: 25px; top: 1177px; width: 36px; height: 32px; }
.twitter { position:absolute; left: 25px; top: 1212px; width: 36px; height: 32px; }.cell1 { position:absolute; z-index:1; left:0px; top:0px; width:78px; height:78px; background: url(http://www.darkhollowfarm.com/Joomla/templates/herringswell/images/Example5_Slice-copy_01.png); }
.cell2 { position:absolute; left:78px; top:0px; width:758px; height:50px; background:url(http://www.darkhollowfarm.com/Joomla/templates/herringswell/images/Example5_Slice-copy_02.png); }
.cell5 { position:absolute; left:78px; top:50px; width:752px; height:373px; overflow: hidden; }
.cell10 { position:absolute; left:229px; top:425px; width:415px; height:820px; background:url(http://www.darkhollowfarm.com/Joomla/templates/herringswell/images/Example5_Slice-copy_10.jpg) repeat-y; }
.cell11 { position:absolute; left: 644px; top:425px; width:186px; height:34px; background:url(http://www.darkhollowfarm.com/Joomla/templates/herringswell/images/Example5_Slice-copy_11.jpg) }
.cell13 { position:absolute; left:644px; top:459px; width:185px; height:130px; background-color:#EEEEEE; }
.cell14 { position:absolute; left: 644px; top: 589px; width:185px; height:656px; background-color:#EEEEEE; }
/* .cell16 { position:absolute; left:644px; top:589px; width:186px; height:34px; background:url(http://www.darkhollowfarm.com/Joomla/templates/herringswell/images/Example5_Slice-copy_16.jpg)} */
.cell18 { position:absolute; left:79px; top:968px; width:150px; height:277px; background:
url(http://www.darkhollowfarm.com/Joomla/templates/herringswell/images/Example5_Slice-copy_18.jpg) }.cell27 { position:absolute; left:79px; top:425px; width:150px; height:557px; background-color:#b5b5b5; }
.consequin { z-index:1; position:absolute; left: 12px; top: 560px; width: 162px; height: 49px; background:url(http://www.darkhollowfarm.com/Joomla/templates/herringswell/images/CosLogo.jpg) no-repeat; }
.PhotoLEFT {
padding-right: 7px;
}
.pagenavbar {
text-align: center;
margin-top: -100px;}
#footer { position:absolute; left: 105px; top: 1250px; width:700px; display:inline; text-align:center; }
Any help is greatly appreciated!
November 22, 2009 at 11:12 pm #66936AshtonSandersParticipantI’m having some trouble figuring out what is wrong. The center content seems to be filling the white space just fine. Did you already fix it?
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.