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.
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..
Using an absolute positioned wrapper, we can use an img tag to add in the image, then use a span to contain the overlaid text, like this: <div id="wrapper"> <img...
You need to add content: "" for span:before to work #five_day_table span { display: block; margin: 1px 3px 0px 0px; } span:before { content: ""; display: inline-block; width: 15px; height:...
This can't be done using css and the html you provide. If you put an extra span in the anchor, it can be done: a.my-text { height: 50px; display: block;...
If you look at the css code : body { -moz-animation-duration: 4s; -moz-animation-iteration-count: 1; -moz-animation-name: roll; } ...
You should remove h2.editable_text_titulo margin and provide the line-height:1em; like h2.editable_text_titulo { line-height: 1em; margin: 0; } ...
That is the UI of Firefox, whether themed or none. Not something you got from coding. If it is troubling you so much you can reset it and define your...
You could use YepNope.js, YepNope allows you to build asynchronous conditional tests to see whether resources have loaded. Once your tests have passed you can tell it to inject new...
You have to use arrow shape image facing down words in background of the menu. for bootstrap you can use it in .navbar-default class .navbar-default { padding-bottom: 70px; background:url('imagename.png') no-repeat...
ul.dropdown { background: #000 url(../images/menuLight.png) repeat-x top left; }
You can use one span in h1 and put img inside it and use position relative/absolute on span and img h1 { text-align: center; font-family: 'Fugaz One', cursive; font-size: 590%;...
Try -moz-user-select: text instead of all. As a future reference, whenever concerned about the possible values for a css rule, check a site like MDN. Here is the MDN link...
You can do like this $('.lblViewStatus').hover(function() { $('.flyout').toggle("slide", {direction:'left'}); }); ...
You can use http://selectivizr.com/ JS which support css3 selector for IE.
From the code you provided, it looks like there is some padding on tds in the outer table. You should be able to fix it by adding .releasegroupingtable > tbody...
If you're wanting the color/image to appear behind the entire menu block, then you're localizing the background too close to the anchor element. Just do this: #navigation {background: #ccc;} or...
Try this: Create your Custom Elements with Error Alert, Success Alert, etc... /View/Elements/error_alert.ctp <!-- Example Bootstrap Error Alert --> <div class="alert alert-danger"> <button type="button" class="close" data-dismiss="alert">×</button> <strong><?php echo $message...
I guess "{$item.member.membership}" is returning the user's group name, right? Then try this: CSS: .member_badge { padding: 5px; border: 1px solid; font-size: 13px; font-weight: bold; text-align: center; } .admin {...
I've dealt a lot with CSS themes as of late. Here is the approach I am using. The base themes a, b, c, d, I've left alone for the most...
Is div2 positioned absolute? If so, you can only place .container higher by positioning it absolute as well and setting the z-index higher than div2, or by placing .container after...
You can do following way using :first-child css: .entry-content div:first-child, .entry-content div:first-child + div { display:none; } <div class="entry-content"> <div class="gv-grid">1</div> <div class="gv-table-container gv-container">2</div> <div class="gv-grid">3</div> <div...
This is not an issue with IE10 alone; in fact, it's by design. Backgrounds have special behavior when applied to body and/or html. When you apply a background to body...
Well you need to set z-index in header and footer div like this .header { width: 100%; background-color: #4F7776; text-align: center; font-weight: bold; top: 0; position: fixed; z-index:9; } .footer...
If you are intent on using styled, injected HTML, it would be possible to create a series of custom components (one for each marker) and attach them to the map....
Get rid of the inline width of #menu, also get rid of the (twice declared) display:inline-block and actually define the width of #menu specifically in order for margin: 0 auto...
You can't do it that way. CSS classes are hierarchical so: .button.details will only work for a structure like the following: <div class="button"> <div class="details"> </div> </div> It means for...
If I understand you correctly, this will do it: li:hover{background-image:url(greenbox.png); background-position:center center; background-repeat:no-repeat;}...
By the sound of it you need to use the CSS overflow property. You would add this to your theme's style.css file. pre { overflow: auto; } Note: If that...
I'm not sure this counts as an answer (because you suggested it anyway), but I'd recommend that you place the "finalized" email addresses in their own boxes outside of your...
I think it is not possible. Pseudo-classes are a member of the family of selectors, which don't occur in the attribute. Using javascript,something like ,,, <a href="#" onmouseover = "this.style.color...
I would recommend using flexbox. It's a pretty new concept in css, but it has good support in all modern browsers. I personally use it in production. The markup would...