4 replies [Last post]
MeltingDog
Offline
newbie
Last seen: 3 years 50 weeks ago
Timezone: GMT-7
Joined: 2010-08-03
Posts: 3
Points: 4

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.

MeltingDog
Offline
newbie
Last seen: 3 years 50 weeks ago
Timezone: GMT-7
Joined: 2010-08-03
Posts: 3
Points: 4

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

Deuce
Deuce's picture
Offline
Guru
Las Vegas, NV
Last seen: 1 year 12 weeks ago
Las Vegas, NV
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4422
Points: 1841

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?

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

MeltingDog
Offline
newbie
Last seen: 3 years 50 weeks ago
Timezone: GMT-7
Joined: 2010-08-03
Posts: 3
Points: 4

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

Deuce
Deuce's picture
Offline
Guru
Las Vegas, NV
Last seen: 1 year 12 weeks ago
Las Vegas, NV
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4422
Points: 1841

Can you please post your code

Can you please post your code in code tags?

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph