Jump to content


Photo

Help with Custom CSS, HTML Boxes Alignment

Custom CSS HTML Boxes next to each

Best Answer James B , 11 June 2013 - 09:23 PM

Thanks Prasanna, responded on the new thread :-)

Go to the full post


  • Please log in to reply
9 replies to this topic

#1 selectams

selectams

    Member

  • Members
  • PipPip
  • 21 posts
  • Country: Country Flag

Posted 05 June 2013 - 08:44 PM

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

 

 

 



#2 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 05 June 2013 - 10:58 PM

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.



#3 selectams

selectams

    Member

  • Members
  • PipPip
  • 21 posts
  • Country: Country Flag

Posted 06 June 2013 - 09:16 PM

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



#4 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 06 June 2013 - 09:43 PM

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


#5 selectams

selectams

    Member

  • Members
  • PipPip
  • 21 posts
  • Country: Country Flag

Posted 06 June 2013 - 10:04 PM

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


#6 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 06 June 2013 - 10:47 PM

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...n-the-same-line



#7 selectams

selectams

    Member

  • Members
  • PipPip
  • 21 posts
  • Country: Country Flag

Posted 07 June 2013 - 10:15 PM

Hi James, 

 

All works perfectly.

 

Many Thanks. 

 

Really appreciate your help

 

Prasanna



#8 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 07 June 2013 - 10:27 PM

Hi Prasanna,

 

Excellent glad that worked :-)


  • selectams likes this

#9 selectams

selectams

    Member

  • Members
  • PipPip
  • 21 posts
  • Country: Country Flag

Posted 11 June 2013 - 08:23 PM

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



#10 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 11 June 2013 - 09:23 PM   Best Answer

Thanks Prasanna, responded on the new thread :-)







Also tagged with one or more of these keywords: Custom CSS, HTML Boxes next to each