How to align divs side by side without one being slightly lower?


Tags: html,css,salesforce

Problem :

Hi I'm building an app on the Salesforce1 platform and I'm having some trouble with the UI. If you look at the recent and popular ideas columns, technically they are side by side but the Recent Ideas column is slightly lower than the Popular Ideas column and I can't figure out how to get them exactly side by side again. Any help would be greatly appreciated.

enter image description here

HTML (ignore the apex tags. Indentation is a bit messed up because of how I had to format it to put it in a code block for this post)

<apex:page standardcontroller="Idea" recordSetVar="idea"
sidebar="false" 
showHeader="false" 
standardstylesheets="false"
doctype="html-5.0">

<head> </head>
<body>

<apex:stylesheet value="{!$Resource.PuroIdeas_Homepage_CSS}" /> 

<div id="header">
  <a href="https://cs3.salesforce.com/apex/PuroIdeas_Home">
      <img id="PuroIdeasLogo" src="{!$Resource.PuroIdeasLogo}"/>
  </a>
  <br/>
  <p id="introCopy" >PuroIdeas is a place where you can innovate. Share your ideas, check out others, join the discussion and help build a better Purolator</p>
</div>

<div id="login">
  <p class="loginText"> Login | Sign Up </p>
</div>

<div id="Challenges">
  <h1 class="ChallengesHeader"> Challenges </h1>
  <div class="activeChallenge">
     <!--   <apex:dataList value="{!ideatheme}" var="i" id="list">
        {!i.title}
        </apex:dataList> 
      <apex:pageblock>
        <apex:outputField value="{!idea.title}" />
      </apex:pageblock> -->


  <p> CHALLENGE 1 - </p>



  </div>
  <div class="activeChallenge">
  <p> CHALLENGE 2 - </p>
  </div>
  <div class="activeChallenge">
  <p> CHALLENGE 3 - </p>
  </div>   
  <!-- Do I need a div for the view all button? -->
</div>

<div id="rpIdeasContainer">
<div id="recentIdeas">
  <h1 class="RecentIdeasHeader"> Recent Ideas </h1>
<div class="rIdeas"> Recent Idea 1</div>
<div class="rIdeas"> Recent Idea 2</div>
<div class="rIdeas"> Recent Idea 3</div>
</div>

<div id="popularIdeas">
  <h1 class="PopularIdeasHeader"> Popular Ideas </h1>
<div class="pIdeas"> Popular Idea 1</div>
<div class="pIdeas"> Popular Idea 2</div>
<div class="pIdeas"> Popular Idea 3</div>
</div>

</div>


<div id="generalFeedback">
  <h1 class="GeneralFeedbackHeader">General Feedback</h1>
  <p>Category <br/> Title <br/> Description</p>
  <apex:form >
     <!-- <apex:inputField ></apex:inputField> -->
     <!-- <apex:commandButton action="{!submit}" value="Submit"/> -->
  </apex:form> 
</div>

<div id="pastChallenges">
  <h1 class="PastChallengesHeader">Past Challenges</h1>
<div class="pChallenge"> Past Challenges 1</div>
<div class="pChallenge"> Past Challenges 2</div>
<div class="pChallenge"> Past Challenges 3</div>
</div>

<div id="ideasInAction">
  <h1 class="IdeasInActionHeader">Ideas In Action</h1>
<div class="IIA"> Idea in Action 1</div>
<div class="IIA"> Idea in Action 2</div>
<div class="IIA"> Idea in Action 3</div>
</div>

</body>

</apex:page>

CSS

#header
{
width: 70%;
border-bottom-style: solid;
border-color: #D1D1D1;
border-width: 2px;
margin-left: auto;
margin-right: auto;
}

#PuroIdeasLogo
{
display: block;
margin-left: auto;
margin-right: auto;
}

#introCopy
{
text-align: center;
font-family: "Segoe UI"; /*Helvetica, Arial;*/
font-weight: lighter;
max-width: 60%;
margin-left: auto;
margin-right: auto;
color: #575757;
}

#login
{
width: 70%;
/*border-bottom-style: solid;
border-color: #D1D1D1;
border-width: 1px;*/
margin-left: auto;
margin-right: auto;
}

.loginText 
{
text-align: center;
font-family: "Segoe UI", Helvetica, Arial;
font-weight: lighter;
}

#Challenges
{
width: 70%;
border-bottom-style: solid;
border-color: #D1D1D1;
border-width: 1px;
margin-left: auto;
margin-right: auto; 
}

.ChallengesHeader
{
padding-left: 40px;
font-family: "Segoe UI";
font-weight: lighter;
color: #575757;
}

.activeChallenge
{
width: 90%;
margin: 20px auto;
padding: 15px;
font-family: "Segoe UI";
font-weight: lighter;
color: #2071FE;
/*background-color: #2071FE;*/
border: 2px solid #2071FE;
border-radius: 15px;
}

#rpIdeasContainer
{
width: 70%; 
margin-left: auto;
margin-right: auto;
border-bottom-style: solid;
border-width: 1px;
border-color:#D1D1D1;

}

#recentIdeas
{
width: 50%;
margin-left: auto;
margin-right: auto;
float:left;

}

.RecentIdeasHeader
{
padding-left: 40px;
font-family: "Segoe UI";
font-weight: lighter;
color: #575757;
}

.rIdeas
{
width: 85%;
margin: 20px auto;
border: 1px solid red;
font-family: "Segoe UI", Helvetica, Arial;
font-weight: lighter;
color: #ADADAD;
}

#popularIdeas
{
margin-left: 50%;
margin-right: auto;

}

.PopularIdeasHeader
{
padding-left: 40px;
font-family: "Segoe UI";
font-weight: lighter;
color: #575757;
}

.pIdeas
{
width: 85%;
margin: 20px auto;
border: 1px solid red;
font-family: "Segoe UI", Helvetica, Arial;
font-weight: lighter;
color: #ADADAD;
}

#generalFeedback
{
width: 70%;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
font-family: "Segoe UI", Helvetica, Arial;
font-weight: lighter;
color: #ADADAD;
}

.GeneralFeedbackHeader
{
padding-left: 40px;
font-family: "Segoe UI";
font-weight: lighter;
color: #575757;
}

#pastChallenges
{
width: 70%;
border-style: dotted;
margin-left: auto;
margin-right: auto;
}

.PastChallengesHeader
{
padding-left: 40px;
font-family: "Segoe UI";
font-weight: lighter;
color: #575757;
}

.pChallenge
{
font-family: "Segoe UI", Helvetica, Arial;
font-weight: lighter;
color: #ADADAD;
}

#ideasInAction
{
width: 70%;
border-style: dotted;
margin-left: auto;
margin-right: auto;
}

.IdeasInActionHeader
{
padding-left: 40px;
font-family: "Segoe UI";
font-weight: lighter;
color: #575757;
}
.IIA 
{
font-family: "Segoe UI", Helvetica, Arial;
font-weight: lighter;
color: #ADADAD;
}


Solution :

I would modify the following classes as such:

#recentIdeas {
    width: 48%;
    background-color: #FFA500;
    padding: 0px !important;
    margin: 0px !important;
    display: inline-block;
}
#popularIdeas {
    width: 48%;
    background-color: #AFA500;
    padding: 0px !important;
    margin: 0px !important;
    display: inline-block;
}

You can see this here-> http://jsfiddle.net/T2GG4/

Hope this helps!!!


    CSS Howto..

    CSS: how to “plot” invisible text over an image?

    How can I use :before property to create a square before a span

    How to place text at the bottom when there's predefined height!

    How does google do the barrel roll?

    How to style Text input in jQuery editable

    How to remove blue border around the button in Firefox?

    How to check if all CSS files have been downloaded to insert HTML using JavaScript?

    How to style Bootstrap menu like a V? [closed]

    How to make this menu occupy all the remaining space's width?

    How do I add an image directly below a text header?

    How do you override “-moz-user-select: none;” on a child element?

    How to slide a div out

    How to make Internet Explorer 8 to support nth child() CSS element?

    In html how do I have table within table look visually the same as if I didnt have the inner table

    How to stick a background behind the navbar?

    How to check if the flash message set is empty in cakephp

    php css how to change name color based on membership?

    How to serve different css files to different ajax pages?

    how to show background image(multiple) if out of current div

    How to hide the first two div using css?

    How to use css linear gradients in IE10?

    How do I stop Bootstrap Input Boxes and Buttons from overlapping the header and footer of a page when scrolling?

    How can I add a custom HTML map marker to a Nokia HERE map?

    How to center my menu bar with css. (I am using Microsoft Expression Web 4)

    How to include several nested CSS classes into rails .erb file?

    CSS or Jquery how to position image in the middle of an li element?

    How to get rid of scroll bars/arrows in Wordpress, when using font style called 'Pre'

    How to extract text from contenteditable div (but not html tags)

    how to use pseudo-classes (like after, before) inline in CSS

    CSS - How to achieve a mixed effect of “float left” and “text-align: center”?