Archived

This topic is now archived and is closed to further replies.

  • 0

Help with Custom CSS, HTML Boxes Alignment


Question

Posted · Report post

Hi, 

 

I would really appreciate help/advise on the following; 

 

I am looking to place two HTML boxes next to each other. 

 

I have inserted the following CSS within the Custom Code CSS section of platform pro theme

 

 

#wrap {
width:960px;
}
.left {
width:230;
background-color:#00d;
height:425 px;
float:left;
}
.right {
    width:230;
background-color:#00d;
height:425 px;
float:right;
}

 

 

and the following code on one of the pages

 

<div id="wrap">
     <div class="left"></div>
<div class="right"></div>
</div>
 
For some reason I am unable to see any boxes at all. 
 
I am new to CSS so some advise would be really helpful. 
 
Many Thanks
 
Prasanna

 

 

 

Share this post


Link to post
Share on other sites

9 answers to this question

Posted · Report post

Thanks Prasanna, responded on the new thread :-)

Share this post


Link to post
Share on other sites

Posted · Report post

Hi James, 

 

Here's the link 

 

I checked the page source and the code appears to be there but for some odd reason I am unable to see the boxes. 

 

Please note I have two themes - Iblog and Platformpro. Unfortunately, the codes are not working on both the themes. 

 

I think there is something wrong that I am doing. 

 

Please advise. 

 

Thanks James

 

Prasanna

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Prasanna,

 

It looks like on that page you've only set partial css for the box.

 

If you set like the below

 

.left {
    backgroundblue !important;
    background-color#0000DD !important;
    displayblock !important;
    floatleft;
    height224px;
    width50% !important;
}
 
You should see somethink like - http://screencast.com/t/Oga08XSZQ

Share this post


Link to post
Share on other sites

Posted · Report post

Hi James, 

 

 Your suggestion works perfectly for 2 boxes. Many thanks. 

 

I am really sorry to be a pain. I am looking to have 3 boxes and based on your suggestion I tried the following; 

 

Custom CSS as below

 

.left {
    background: blue !important;
    background-color: #0000DD !important;
    display: block !important;
    float: left;
    height: 224px;
    width: 25% !important;
}
 
.right {
    background: blue !important;
    background-color: #0000DD !important;
    display: block !important;
    float: right;
    height: 224px;
    width: 25% !important;
}
 
.centre {
    background: blue !important;
    background-color: #0000DD !important;
    display: block !important;
    float: centre;
    height: 224px;
    width: 25% !important;
}
 
HTML code as below
 
 
 <div class="left"></div>
 <div class="right"></div>
 <div class="centre"></div>
 
My page here
 
Unable to see 3 boxes, only I am able to see 2 boxes. 
 
Your advice will be really appreciated. 
 
Cheers
 
Prasanna

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Prasanna

 

Unfortunately there's no such option as float center. If you're looking to do three boxes why not use the boxes section?

 

Otherwise you'll need to float them all left but with a % width so they fill the available area. (33.3% etc)

 

Like the example here - http://stackoverflow.com/questions/3639907/how-to-display-3-boxes-in-the-same-line

Share this post


Link to post
Share on other sites

Posted · Report post

Hi James, 

 

All works perfectly.

 

Many Thanks. 

 

Really appreciate your help

 

Prasanna

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Prasanna,

 

Excellent glad that worked :-)

1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

Hi there, I've tested your code and I can see two blue boxes appearing. Do you have a link to the page with the code on we could look at live.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi James, 

 

Hope you are well. 

 

I am looking to reduce spacing between site branding and default content in platform pro. 

 

Are you able to guide me with the custom css codes please? 

 

Also since this is a new topic, should I log a new question on your forum. 

 

Cheers

 

Prasanna

Share this post


Link to post
Share on other sites