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;
}
try to add this in the popular idea div
#popularIdeas
{
vertical-align:middle;
}
or
vertical-align:top;
what's happening?
if thats not working you can just use
display: inline-block
on both div (popular ideas and recent ideas)
I would suggest something different for the same, You can use display property instead of float property. You might have to do some changes like following
#recentIdeas {
width: 50%;
margin-left: auto;
margin-right: auto;
/* float: left; */ /* Removed this */
vertical-align: top; /* Added this */
display: inline-block; /* Added this */
}
#popularIdeas
{
/*margin-left: 50%;*/ /* Removed this */
margin-right: auto;
display:inline-block; /* Added this */
vertical-align:top /* Added this */
}
Demo
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!!!
Related
I have a H1 that is placed inside a .container div with a width of 800px. I tried giving the H1 a width also and that didn't fix it either. I can't think of any reason why this H1 wouldn't take the full width (taking it out of the .container div makes it work). Any idea what's causing this?
Thanks in advance.
HTML:
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container" id="header-block">
<h2>Cristian M.</h2>
<h3>Product Designer</h3>
<p>Hi, I'm Cristian Moisei and I'm currently a Product Designer at <a id="screencloud-link" href="https://www.screen.cloud">ScreenCloud</a>. I formerly worked as the Lead Product Designer for <a id="glofox-link" href="https://www.glofox.com">Glofox</a> and ran a design studio, <a id="hyperion-link" href="http://www.hyperion.co">Hyperion</a>, for 4 years.</p>
<div id="extra-info">
<p>
Resume <span id="slash">   /   </span>
My Process <span id="slash">   /   </span>
Contact
</p>
<p>I live in London, UK</p>
</div>
</div>
<div id="glofox-block">
<div class="container">
<img src="Images/macbook.png">
<div id="text">
<h1 id="number">01.</h1>
<h1>Reinventing Glofox's interface for a complex user base.</h1>
<div id="view-project">
View Project
<img src="Images/arrow-white.png">
</div>
</div>
</div>
</div>
<div id="webfaction-block">
<div class="container">
<div id="text">
<h1 id="number">02.</h1>
<h1>Helping Webfaction attract a less technical audience.</h1>
<div id="view-project">
View Project
<img src="Images/arrow-black.png">
</div>
</div>
<img id="ipad" src="Images/ipad.jpg">
</div>
</div>
</body>
</html>
CSS:
#import url("http://fast.fonts.net/t/1.css?apiType=css&projectid=b4314e71-83d8-4cc4-bd90-9ceb4a5339d0");
#font-face{
font-family:"Tisa W01 Light";
src:url("Fonts/63d98d82-cdc2-4f22-8883-bede07823185.eot?#iefix");
src:url("Fonts/63d98d82-cdc2-4f22-8883-bede07823185.eot?#iefix") format("eot"),url("Fonts/163f4b9f-d9b9-42c5-9098-d70e0016ae27.woff2") format("woff2"),url("Fonts/cc68d660-f674-409c-9be1-7f7f8bc0542a.woff") format("woff"),url("Fonts/2385d9d0-f23e-4d30-abb4-28817eda1254.ttf") format("truetype"),url("Fonts/a9d1c46b-d28d-4dab-8373-bbaf41232d7f.svg#a9d1c46b-d28d-4dab-8373-bbaf41232d7f") format("svg");
}
#font-face{
font-family:"Tisa W01 Regular";
src:url("Fonts/885a1883-0bbc-429a-91f5-c32e88a82b0e.eot?#iefix");
src:url("Fonts/885a1883-0bbc-429a-91f5-c32e88a82b0e.eot?#iefix") format("eot"),url("Fonts/36a5385d-e6c3-4aba-ad04-fa161f5c96b0.woff2") format("woff2"),url("Fonts/9b2fef91-4d32-413d-864e-4aaa363673eb.woff") format("woff"),url("Fonts/131d9e79-a2a5-4e3a-8cb9-e8acfcaa1c8a.ttf") format("truetype"),url("Fonts/419b1ef5-3ea5-43d3-8c3f-f68edc3d0a2b.svg#419b1ef5-3ea5-43d3-8c3f-f68edc3d0a2b") format("svg");
}
#font-face{
font-family:"Tisa W01 Medium";
src:url("Fonts/7901ab62-60f6-49a3-9332-359efb61e81b.eot?#iefix");
src:url("Fonts/7901ab62-60f6-49a3-9332-359efb61e81b.eot?#iefix") format("eot"),url("Fonts/785e7c0f-c445-4077-b412-1fd0a1a8ab06.woff2") format("woff2"),url("Fonts/7ee6ca7c-fe74-4640-a75d-939ea0bd637d.woff") format("woff"),url("Fonts/d76d30ec-b31a-4502-acf4-89812c16447e.ttf") format("truetype"),url("Fonts/9ce8adf1-e8ae-4095-84d3-6b2f836cd33e.svg#9ce8adf1-e8ae-4095-84d3-6b2f836cd33e") format("svg");
}
#font-face{
font-family:"Tisa W01 Bold";
src:url("Fonts/0b58340f-a8ca-4e68-8eab-bfda350b0b58.eot?#iefix");
src:url("Fonts/0b58340f-a8ca-4e68-8eab-bfda350b0b58.eot?#iefix") format("eot"),url("Fonts/02a4b96f-e988-44fe-a0e7-57ff1b610f3b.woff2") format("woff2"),url("Fonts/78d1ac04-d453-4364-8326-035a105b0865.woff") format("woff"),url("Fonts/776e5c1b-6939-4b32-9c0d-2dee7c34c7da.ttf") format("truetype"),url("Fonts/edc51787-36cf-434d-a4f1-b04139da6bfc.svg#edc51787-36cf-434d-a4f1-b04139da6bfc") format("svg");
}
/* Global */
body, a {
font-family:"Tisa W01 Light", serif;
color: black;
margin: 0;
padding: 0;
}
a{
text-decoration: none;
border-bottom: 1px solid black;
cursor: pointer;
}
p {
font-size: 19px;
line-height: 1.8;
}
h1{
font-size: 50px;
line-height: 1.2;
margin: 0 0 40px 0;
padding: 0;
}
h2{
font-size: 30px;
margin: 0;
padding: 0;
}
h3{
font-family: "Tisa W01 Medium", serif;
font-size: 26px;
margin: -5px 0 40px 0;
padding: 0;
}
.container{
width: 800px;
margin-left: auto;
margin-right: auto;
}
#view-project{
display: inline !important;
opacity: .5 !important;
border-bottom: 1px solid white;
}
#view-project a{
font-family: "San Francisco", "Helvetica Neue", Arial, Helvetica, sans-serif;
font-weight: bold;
}
#view-project img{
width: 15px !important;
margin: 0 0 0 5px !important;
padding: 0 !important;
float: none !important;
}
/* Intro Section */
#header-block{
padding: 140px 50px 140px 50px;
}
#extra-info{
margin-top: 40px !important;
font-size: 18px;
opacity: .4;
}
#extra-info p{
margin: 0;
padding: 0;
}
#extra-info a{
font-family: "Tisa W01 Medium", serif;
}
/* Glofox Section */
#glofox-block{
background-color: #2b4ea4;
height: 800px;
}
#glofox-block #number{
opacity: .2;
font-family: "Tisa W01 Regular", serif;
margin-bottom: 20px;
}
#glofox-block img{
z-index: 1;
width: 740px;
float: left;
margin-top: 60px;
}
#glofox-block .container #text{
position: relative;
top: -790px;
z-index: 2;
float: right;
width: 350px;
color: white;
float: right;
}
#glofox-block #view-project a{
color: white;
border: none;
}
/* Webfaction Section */
#webfaction-block #ipad{
z-index: 1;
width: 795px;
position: relative;
top: -100px;
}
#webfaction-block h1{
width: 750px;
}
#webfaction-block #text{
z-index: 2;
}
In order to fix this you need to add the following line to your CSS:
white-space: nowrap;
Please familiarise yourself with CSS whitespace parameters.
https://www.w3schools.com/cssref/pr_text_white-space.asp
I want center text inside rounded rectangle (both vertically and horizontally), and also center this banner on page too, not sure how to make this correctly. The other elements need be centered too. Please advice how to make things correctly.
Here is code:
#wrapper {
position: relative;
width: 80%;
margin: auto;
text-align: center;
vertical-align: middle;
}
#rcorners {
border-radius: 15px;
border: 6px solid #ffffff;
padding: 20px;
width: 450px;
height: 40px;
}
body {
background-image: url(images/blaunew.png);
background-color: #001b33;
color: #ffffff;
font-family: 'Roboto';
font-size: 14px;
}
#rcorners {
font-family: 'Roboto';
font-size: 48px;
font-weight: 700;
font-style: normal;
Helvetica,
sans-serif;
}
p {
font-family: 'Roboto';
font-size: 32px;
Helvetica,
sans-serif;
}
.main {
margin-top: 20%;
//font-size: 35px;
}
footer {
font-size: 14px;
}
<head>
<title>centered construction</title>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="wrapper">
<div class="main">
<h1 id="rcorners">Centered Text No1</h1>
<p>LOREM IPSUM DOLOR </p>
</div>
<footer>
<div>© Lorem Ipsum Dolor </div>
</footer>
</div>
remove width: 450px; and height: 40px from #rcorners.
Otherwise, if you want to keep it 450px wide, you may add margin: auto to #rcorners. It will solve your problem.
#import url('https://fonts.googleapis.com/css?family=Roboto:400,700');
#wrapper {
position: relative;
width: 80%;
margin: auto;
text-align: center;
vertical-align: middle;
}
#rcorners {
border-radius: 15px;
border: 6px solid #ffffff;
padding: 20px;
/* width: 450px;
height: 40px; */
}
body {
background-image: url(images/blaunew.png);
background-color: #001b33;
color: #ffffff;
font-family: 'Roboto';font-size: 14px;
}
#rcorners {
font-family: 'Roboto';font-size:48px;font-weight:700; font-style:normal; Helvetica, sans-serif;
}
p {
font-family: 'Roboto'; font-size: 32px; Helvetica, sans-serif;
}
.main {
margin-top: 20%;
//font-size: 35px;
}
footer {
font-size: 14px;
}
<div id="wrapper">
<div class="main">
<h1 id="rcorners">Centered Text No1</h1>
<p>LOREM IPSUM DOLOR </p>
</div>
<footer>
<div>© Lorem Ipsum Dolor </div>
</footer>
</div>
To center the button add margin: 0 auto and to center the text you can easily do it with flexbox I think. The code will look something like:
#rcorners {
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
}
You can read more about centering with flexbox here: https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/
I have edit your CSS. but i dont get why you gave height on your #rcorners element. Hope this will help you
CSS
#wrapper {
position: relative;
width: 80%;
margin: auto;
text-align: center;
vertical-align: middle;
}
#rcorners {
border-radius: 15px;
border: 6px solid #ffffff;
padding: 20px;
width: 450px;
/*height: 40px; */ /*it is less height for 2 line text*/
}
body {
background-image: url(images/blaunew.png);
background-color: #001b33;
color: #ffffff;
font-family: 'Roboto';font-size: 14px;
}
#rcorners {
font-family: 'Roboto';font-size:48px;font-weight:700; font-style:normal; Helvetica, sans-serif;
}
p {
font-family: 'Roboto'; font-size: 32px; Helvetica, sans-serif;
}
.main {
margin-top: 20%;
margin-left: auto;
margin-right: auto;
display: inline-block;
width: auto;
/*font-size: 35px; */
}
footer {
font-size: 14px;
}
#bannercontainer{
height: 200;
width: 960;
}
#banner1{
height: 100px;
width: 960px;
background-color: white;
}
#banner2 {background-color: #4D4C4C;
color: white;
height: 100px;
width: 960px;
position: static;
}
.logo {
width: 433px;
height: 199px;
float: left;
}
.linkcontainer{
height: auto;
width: auto;
vertical-align: bottom;
position: absolute;
bottom: 0px;
}
a:active{ color: grey;
font-weight: bold;
background-color: white;
}
a, a:visited { color: white;
text-decoration: none;
}
#link {
padding-top: 10px;
margin-right: 30px;
margin-bottom:20px;
font-size:15pt;
font-weight: bold;
font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
display:inline-block;
position:relative;
float:right;
}
.selector {
background-color: white;
color: #4D4C4C;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 3px;
font-weight: bold;
}
<div id="bannercontainer">
<div id="banner1">
<div id="logo"><img src="img/Dulwich Design Banner.png" width="434" height="200" alt=""></div>
</div>
<div id="banner2">
<div id="link"><div id="selector">Home</div></div>
<div id="link">About</div>
<div id="link">Blog</div>
<div id="link">Contact</div><div id="link"> Projects</div>
</div>
</div>
So, while a user is on a given page, I would like the link to be white and the "selector" class to have a white background and grey text, essentially for the colours to be reversed while the page is active. Any help would be greatly appreciated.
Reason why it's not working it's because your element is using id instead of class for selector
So from this:
<div id="link">
<div id="selector">
Home
</div>
</div>
Change it to this:
<div id="link">
<div class="selector">
Home
</div>
</div>
And your css, update your .selector and add .selector a for the text color:
.selector {
background-color: white;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 3px;
font-weight: bold;
}
.selector a {
color: #4D4C4C;
}
Fiddle
Also note that it's not good to have the same id on multiple elements, you should use class instead. I'm referring to multiple elements with links id.
Somehow one of the group of the same block elements on the picture gets inexplicably big height. Styles shown on the pic don't suggest that kind of behavior for this element. In fact, height isn't even set for those h3's.
Browser screenshot
The html is
<section class="about-us">
<div class="wrapper clearfix">
<h2 class="about-us-heading section-heading red-black-stressing-line-at-left">About Us</h2>
<p class="about-us-statement section-saying about-us-saying">This is who we are - or at least who we strive to be...</p>
<div class="about-more">
<p class="about-saying">If you can't explain it simply, you don't understand it enough.</p>
The more you know
</div>
<div class="about-work-details">
<h3 class="about-details-heading typography-icon">Typography</h3>
<p class="about-details-text">...</p>
</div>
<div class="about-work-details">
<h3 class="about-details-heading curve-with-dots-icon">Full icon set</h3>
<p class="about-details-text">...</p>
</div>
<div class="about-work-details">
<h3 class="about-details-heading triangular-ruler-icon">Accurate</h3>
<p class="about-details-text">...</p>
</div>
</div>
</section>
Three same div.about-work-details elements.
The default css is
.about-us{
background-color: #fff;
position: relative;
}
.about-us-heading{
color: #272d32;
}
.about-us-statement{
color: #4e5860;
margin-bottom: 3.9em;
}
.about-more{
width: 16.875em;
float:left;
margin-right: 1.875em;
}
.about-saying{
font-family: "Open Sans", sans-serif;
font-size: 1.75em;
line-height: 1.4285;
color: #4e5860;
}
.about-more-link{
display: inline-block;
font-family: "Raleway", sans-serif;
line-height: .77;
padding: 1em 2.625em 1em 1.25em;
text-decoration: none;
font-weight: 600;
color: #fff;
text-transform: uppercase;
background: #ff3c1f url(../images/left-arrow.gif) 12.7em .95em no-repeat;
margin-top: 4.25em;
transition: background-color 0.5s;
}
.about-work-details{
width: 16.875em;
float:left;
margin-right: 1.685em;
margin-bottom: 8.1875em;
position: relative;
min-height: 16.875em;
border: 1px solid #edeff2;
}
.about-work-details:last-of-type{
margin-right: 0;
}
.about-details-heading{
font-family: "Open Sans", sans-serif;
font-weight: 700;
font-size: 1.25em;
color: #303030;
text-transform: uppercase;
padding: 0.85em 0 1em 3em;
margin: 1.70em 0 0 1em;
}
Media query modifications
#media screen and (max-width: 860px){
.about-work-details{
width: 70%;
margin: 3em auto;
min-height: 0;
float: none;
}
.about-us{
padding-bottom: 1px;
}
.about-work-details:last-of-type {
margin-right: auto;
}
}
Seems like a floating item behavior issue.
Try removing/commenting float:left; from .about-more.
Here is my HTML
<!DOCTYPE html>
<html>
<head>
<title>
Oaki Softworks
</title>
<link href='style.css' rel='stylesheet' type='text/css'>
<link rel="icon" href="favicon.png">
</head>
<body>
<div id="navigation">
<div style="height:20px;width=15%;float:right;">
<img src="facebook_icon.png" class="social_media_icon">
<img src="instagram_icon.png" class="social_media_icon">
<img src="twitter_icon.png" class="social_media_icon">
<img src="youtube_icon.png" class="social_media_icon">
</div>
<div class="navigation_tile">Contact Us</div>
<div class="navigation_tile">Careers</div>
<div class="navigation_tile">Products</div>
<div class="navigation_tile">About Us</div>
</div>
<div id="content">
<div id="blurb">
<img src="Logo%20(inverted,%20transparent).png" style="width:90%;height:auto;align-self:center;">
<h2>Video games as art.</h2>
<p>Even before the conception of our company, we have always embraced video games as the newest, emerging art form. Video games engage an audience like no other medium: allowing them to digest the material at their own pace, to identify themselves within their avatar as they see fit, and to interact with the world around them. Oaki Software aims to underline these elements of art even further with our own game design.</p>
</div>
<div id="main_pic">
<img src="art.jpg">
</div>
</div>
<div id="footer">
<p>
Oaki Softworks™
<br>Fort Collins, CO 80521
<br>benkulka#oakisoftworks.com
</p>
</div>
</body>
</html>
Here is my CSS
body {
background-color: #021034;
padding: 0px;
margin: 0px;
}
#navigation {
position: fixed;
background-color: black;
height: 40px;
width: 100%;
color: white;
color: #adb7bd;
font-family: 'Lucida Sans', Arial, sans-serif;
font-size: 16px;
line-height: 26px;
}
div.navigation_tile {
height: 30px;
width: 15%;
align-content: center;
text-align: center;
float: right;
margin: 5px;
}
div.navigation_tile:hover {
background-color: #092466;
}
div.navigation_tile:active {
background-color: white;
color: black;
}
#content {
margin-top: 30px;
display: inline-block;
text-align: justify;
}
#blurb{
padding: 40px 0 0 25px;
width: 28%;
height: 250px;
}
#main_pic {
float: right;
width: 66%;
height: 250px;
border: 10px #092466 solid;
overflow: hidden;
}
h1{
color: #A5B7E3;
font-family: 'Lato', sans-serif;
font-size: 54px;
font-weight: 300;
line-height: 58px;
margin: 0 0 20px;
}
h2 {
color: #6681C4;
font-family: 'Lato', sans-serif;
font-size: 34px;
margin: 0 0 10px;
}
p{
text-indent: 20px;
color: white;
font-size: 12px;
font-weight: 100;
font-family: 'Lucida Sans', Arial, serif;
line-height: 20px;
}
img.social_media_icon{
height: 15px;
width: 15px;
padding: 5px;
}
#footer {
height: auto;
width: 100%;
background-color: black;
text-align: center;
padding: 5px;
}
I'm trying to get my #blurb div to line up with my #main_pic div within my parent #content div, but I'm having trouble doing so. Can someone point me in the right direction?
#blurb {
[...]
float: left;
}
#content {
[..]
overflow: hidden;
}
Also consider removing height: 250px; from #blurb ... hard to say is it required for some reason.