Joomla Templates Club 406,261 posts

[aduff Friend aduffJoin date: November 2005Posts: 76Downloads:31Uploads:0 Thanks: 9 Thanked: 1 times in 1 posts]

#135886

Hi,

I believe I have an incorrect setting in my template-css.css code that is causing content to wrap below an image ({mosimage}) in my left-hand column (ja-contentwrap), whenever I have content in the right-hand column (ja-colwrap)

In the left-hand column (ja-contentwrap) I have a {mosimage} set to ‘left’ followed by a table 460px wide. These two items need to sit on the same line ie horizontally one beside the other, as the table contains information that describes the image. This generally works as required provided I don’t have a site module published that occupies the right-hand column (ja-colwrap).

In the right-hand column (ja-colwrap) I have a module with a simple set of links that are right justified.

If I do not publish the module with the links (in the right-hand column), the table sits on the same line (following) the image.

If I publish the module with the links (in the right-hand column), the table sits below the image.

Can some-one suggest how I might correct this problem?

The following code snippet is where I suspect the conflict is lurking.

========================================================
/* PRIMARY COLUMN

——————————————————— */

#ja-contentwrap {

float:left;

margin:0;

width:80%;

}

/* —————————–

clear: both;

margin: 20px 0;

——————————– */

}

#ja-content {

float: left;

width: 100%;

}

#ja-content div.innerpad {

clear: both;

margin: 0;

padding: 0 15px;

display: block;

height: 400px;

}

html>body #ja-content div.innerpad {

height: auto;

min-height: 400px;

}

/* SECONDARY COLUMNS

——————————————————— */

#ja-colwrap {

float: right;

width: 40%;

}

#ja-col1 {

float: left;

width: 50%;

padding-top: 10px;

background: url(../images/col1-top.gif) no-repeat top;

}

#ja-col1 div {

padding-bottom: 20px;

background: url(../images/col1-bot.gif) no-repeat bottom;

}

#ja-col1 div div {

padding: 0;

background: url(../images/col1-mid.gif) repeat-y top;

}

#ja-col1 div div div {

float: none;

background: none;

}

.narrow #ja-col1 {

background: url(../images/col1-narrow-top.gif) no-repeat top;

}

.narrow #ja-col1 div {

background: url(../images/col1-narrow-bot.gif) no-repeat bottom;

}

.narrow #ja-col1 div div {

background: url(../images/col1-narrow-mid.gif) repeat-y top;

}

#ja-col2 {

float: right;

width: 49.9%;

padding-bottom: 10px;

overflow: hidden;

}

#ja-col1 table, #ja-col2 table {

border-collapse: collapse;

border-spacing: 0;

}

#ja-col1 ul, #ja-col2 ul {

margin: 0;

padding: 0;

}

#ja-col1 ul li, #ja-col2 ul li {

padding-left: 14px;

background: url(../images/bullet-list.gif) no-repeat 0px 5px;

}

=============================================

many thanks
aduff,
tas au

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#281234

Hi aduff !

Could you please send us your live URl and if possible, the screenshots so that we could have closer look on the issue.

[Author]

Posts