Hello and Help !! ::: SOLVED :::

[crankshaft]

Hi;

Firstly wanna say thanks for developing simple CMS, have been using for 2 days and have alreay created a couple of sites.

Now, a problem that I 've been trying to solve for the last 4 hours. I cannot get 2 50% columns to work using from the custom style sheet. If I add the style directly to the tag it works as expected, but if I pull it from the style sheet then it's all over the place !

I have created a custom style sheet and attached it to the template I am using, marked as all.

Code: Select all

#dis50w {
height:100%;
width:49%;
float:left;
}

I added a new page using the css above, and the divs are shown below each other, not side by side:

Code: Select all

<div style="width:100%; height:100%;">
<div id="dis50w">
xxx xxx xxxxxxxx xx xxxxxxx xxx xxxx xxxx x xxxxxxx. xxxxxxx xxx xxxxxx xxxx xxxxxxx xx xxxxxx xxxxx,xxxxxx. 
<br><br>
xxx xxx xxxxxxxx xx xxxxxxx xxx xxxx xxxx x xxxxxxx. xxxxxxx xxx xxxxxx xxxx xxxxxxx xx xxxxxx xxxxx,xxxxxx. 
<br><br>
xxx xxx xxxxxxxx xx xxxxxxx xxx xxxx xxxx x xxxxxxx. xxxxxxx xxx xxxxxx xxxx xxxxxxx xx xxxxxx xxxxx,xxxxxx. 
</div>
<div id="dis50w">
aaa aaa aaaaaaaa aa aaaaaaa aaa aaaa aaaa a aaaaaaa. aaaaaaa aaa aaaaaa aaaa aaaaaaa aa aaaaaa aaaaa,aaaaaa. 
<br><br>
aaa aaa aaaaaaaa aa aaaaaaa aaa aaaa aaaa a aaaaaaa. aaaaaaa aaa aaaaaa aaaa aaaaaaa aa aaaaaa aaaaa,aaaaaa.
<br><br>
aaa aaa aaaaaaaa aa aaaaaaa aaa aaaa aaaa a aaaaaaa. aaaaaaa aaa aaaaaa aaaa aaaaaaa aa aaaaaa aaaaa,aaaaaa. 
<br><br>
aaa aaa aaaaaaaa aa aaaaaaa aaa aaaa aaaa a aaaaaaa. aaaaaaa aaa aaaaaa aaaa aaaaaaa aa aaaaaa aaaaa,aaaaaa. 
<br><br>
aaa aaa aaaaaaaa aa aaaaaaa aaa aaaa aaaa a aaaaaaa. aaaaaaa aaa aaaaaa aaaa aaaaaaa aa aaaaaa aaaaa,aaaaaa. 
</div>
</div>

So I directly add the style to the and the columns are shown side by side, but the page is broken as the dotted line that should be at the foot of the page cuts through the fourth row of the 2 div blocks:

Code: Select all

<div style="width:100%; height:100%;">
<div style="width:49%; float:left; height:100%;">
xxx xxx xxxxxxxx xx xxxxxxx xxx xxxx xxxx x xxxxxxx. xxxxxxx xxx xxxxxx xxxx xxxxxxx xx xxxxxx xxxxx,xxxxxx. 
<br><br>
xxx xxx xxxxxxxx xx xxxxxxx xxx xxxx xxxx x xxxxxxx. xxxxxxx xxx xxxxxx xxxx xxxxxxx xx xxxxxx xxxxx,xxxxxx. 
<br><br>
xxx xxx xxxxxxxx xx xxxxxxx xxx xxxx xxxx x xxxxxxx. xxxxxxx xxx xxxxxx xxxx xxxxxxx xx xxxxxx xxxxx,xxxxxx. 
</div>
<div style="width:49%; float:left; height:100%;">
aaa aaa aaaaaaaa aa aaaaaaa aaa aaaa aaaa a aaaaaaa. aaaaaaa aaa aaaaaa aaaa aaaaaaa aa aaaaaa aaaaa,aaaaaa. 
<br><br>
aaa aaa aaaaaaaa aa aaaaaaa aaa aaaa aaaa a aaaaaaa. aaaaaaa aaa aaaaaa aaaa aaaaaaa aa aaaaaa aaaaa,aaaaaa.
<br><br>
aaa aaa aaaaaaaa aa aaaaaaa aaa aaaa aaaa a aaaaaaa. aaaaaaa aaa aaaaaa aaaa aaaaaaa aa aaaaaa aaaaa,aaaaaa. 
<br><br>
aaa aaa aaaaaaaa aa aaaaaaa aaa aaaa aaaa a aaaaaaa. aaaaaaa aaa aaaaaa aaaa aaaaaaa aa aaaaaa aaaaa,aaaaaa. 
<br><br>
aaa aaa aaaaaaaa aa aaaaaaa aaa aaaa aaaa a aaaaaaa. aaaaaaa aaa aaaaaa aaaa aaaaaaa aa aaaaaa aaaaa,aaaaaa. 
</div>
</div>

So is this a bug or am I doing something stupid ??

Cheers

[RonnyK]

In your div#main add

height: 1%;

or create 2 DIV's and float them left and right. I is also better for validation.

RonnyK

[crankshaft]

Ronny;

thanks, but io don't get you, change which div to 1% ??

Anyway, I had omitted some other styles including padding:10 which when combined with the width of 50% looks like it made it overflow.

But..... the page still gets broken, the dotted line is no longer at the bottom of the page, but cuts through the top half of the page ??!

Cheers

[heatherfeuer]

Can you provide a link to the page with the problem?  It helps to actually see what you are talking about.

[crankshaft]

Hi !

You can see the effect here: http://peter-c.net:8088/cms

the dotted line which is supposed to be at the bottom of the page cuts through the top, and the ^top bookmark is out of position !

Any ideas ??

Cheers

[kermit]

You can see the effect here: http://peter-c.net:8088/cms

site won't work as it's not configured to run off the above url, it's configured to be http://192.168.0.10/cms/

[crankshaft]

Urghhhhhh...

OK, going to have to re-set it up again, will post again when the demo is up.

Cheers

[crankshaft]

Hi;

OK, I have setup the config.php file for the correct site path.

http://peter-c.net:8088/cms

I have included the css config for the left and right columns as setup in the stylesheets.

Notice how the dotted line which should be beneath the section cuts through the top.

Any suggestions would be appreciated.

[heatherfeuer]

I think I understand now.  If you look at the original template/stylesheet for the div#content, there are two other divs (#sidebar and #main) that define the content area.  The sidebar contains the navigation (if you are using a vertical not horizontal menu) and anything else you want in the sidebar (news, calendar, etc.).  The div#main holds the primary content for each page.  The right/left divs at 49% were designed for the prev/next links at the bottom of the "main" section.

If what you are trying to achieve is two columns in the "main" part of the page, in order to get the dotted line at the bottom of the "main" section (or div) you need to add a line to the css for the prev/next links at the bottom: "clear: both;"

This has the effect of placing that dotted line below the content in those two columns.  Is it your intent to have two columns in the "main" part of the template in addition to the sidebar (where you now have the news showing)?

[kermit]

a few quick fixes.. pick one.

1.  put the two "half column" divs inside of:

 
 
 
 


clearfix is a hack (included in the default template css you're using), but it works.

2. insert a "clearing div" after the two "half columns":






3. clear the first item in div#main after the two "half columns":






technically it's div acting as an HR, so it'd be:

[crankshaft]

Thanks so much

Before I read your post, I googled css and found a thread saying that you should add clear: none so I changed it in the style sheet to:

/* as we hid all hr for accessibility we create new hr with extra div element */
div.hr {
  height: 1px;
  padding: 1em;
  border-bottom: 1px dotted black;
  margin: 1em;
  float:none;
  clear: both;
}