Tue, 2010-08-03 01:08
Hey Guys,
I'm making a template in joomla and am having some difficulties with float. Whats happening is while they are appearing side by side the smaller sybContent div is in line with the bottom or the large mainContent div.
Heres the CSS:
#mainContent {
width: 720px;
float:left;
background-image:url(../images/mainContentMid.png);
background-repeat:repeat-y;
padding-bottom: 30px;
padding-top: 10px;
padding-left: 30px;
padding-right: 15px;
}
.subContent {
width: 325px;
float: right;
position: inherit;
background-image:url(../images/subContentMid.png);
padding-left: 15px;
}
Any advice would be great!
Cheers.
Tue, 2010-08-03 01:33
#1
UPDATE: Annoyingly the only
UPDATE:
Annoyingly the only way I can fix it is by putting a negetive margin-top (margin-top:-470px;) on the subContent
Tue, 2010-08-03 02:05
#2
Or you could provide us a
Or you could provide us a link. At the very least, all of your code. Not much we can do with a couple snippets of CSS. Without this, we don't know the simple things. Like, is the wrapper containing these floats 1105 px wide?
Tue, 2010-08-03 03:31
#3
Heres the code. Because of
Heres the code. Because of the nature of the design I've had to do 3 different divs for each content (It needed a top image, middle image and bottom).
Thanks
CSS:
#wrapper {
margin:auto;
width:1200px;
border: thin solid #000000;
background-image:url(../images/dreamBG.png);
background-repeat:no-repeat;
margin-top:-10px;
}
#container {
padding-left: 30px;
padding-right: 15px;
}
/****************MAIN CONTENT PANEL*****************************/
#mainContentTop {
width: 720px;
height:36px;
float:left;
background-image:url(../images/mainContentTop.png);
background-repeat:no-repeat;
/* margin-left: 80px;*/
padding-left: 30px;
padding-right: 15px;
}
#mainContent {
width: 720px;
float:left;
background-image:url(../images/mainContentMid.png);
background-repeat:repeat-y;
padding-bottom: 30px;
padding-top: 10px;
padding-left: 30px;
padding-right: 15px;
}
#mainContentBottom {
width: 720px;
height: 48px;
float:left;
background-image:url(../images/mainContentBottom.png);
background-repeat:no-repeat;
/* margin-left: 80px;*/
padding-left: 30px;
padding-right: 15px;
}
/****************SUB CONTENT PANELS*****************************/
.subContentContainer{
float: right;
margin-top: -470px;
}
.subContentTop {
width: 310px;
height: 28px;
background-image:url(../images/subContentTop.png);
background-repeat:no-repeat;
padding-left: 15px;
}
.subContent {
width: 310px;
height: 100px;
background-image:url(../images/subContentMid.png);
padding-left: 15px;
}
.subContentBottom {
width: 310px;
height: 31px;
background-image:url(../images/subContentBottom.png);
background-repeat:no-repeat;
padding-left: 15px;
}
***************************HTML************************************
sub content sub content sub content sub content sub content sub content sub content sub contentsub con
Tue, 2010-08-03 04:34
#4
Can you please post your code
Can you please post your code in code tags?