I got this issue that a portrait is overlapping my nav bar.
And I've been looking around and trying to find a fix, but no luck.
I have tried z-index, but sadly didn't work at all.
My code for the section:
/*Navbar CSS*/
.topNavMain,
.topNavMain ul {
margin: 0;
padding: 0;
background: rgba(227, 232, 237, 0.40);
color: #5f6f81;
list-style: none;
text-transform: none;
text-decoration: none;
width: 100%;
font-weight: 300;
font-family: 'Lato', Arial, sans-serif;
line-height: 60px;
z-index: 999 !important;
}
/*img class CSS*/
.imgPortrait {
width: 80%;
z-index: -999;
overflow: hidden;
}
<section id="aboutMe" class="contentS">
<div class="container">
<div class="row">
<div class="col slideIn margin-fix">
<h2 class="contentT">About me</h2>
<p class="shortText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br> Fusce mollis pretium felis id ultricies. Sed libero risus, volutpat vel rhoncus et, auctor non ipsum. <br> Praesent sollicitudin nibh nisl, et sagittis nulla ornare at.</p>
</div>
<div class="col slideIn2">
<img src="img/portrait.jpg" alt="" class="imgPortrait img-fluid"></img>
</div>
</div>
</div>
</section>
Screenshot of my issue:
Click here.
Just a simple fix, you need to apply a z-index to the div containing the nav, not just the ul.
#navDiv {
z-index: 1;
}
In my case the arrows of the carousal overlapped with the navbar. As the arrow icons already had z-index as 1 so in my case I had to make the z-index of the navbar div as 2 and it worked.
Related
I got a city landing page, below the main image I want to have one picture with float: right; and next to that is text. Below that, I want to have the same content but this time I used float: left; but the picture didn't position itself below the first one. They are in separate DIV-s with display: block;
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../style/main-style.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Dancing+Script&display=swap" rel="stylesheet">
<title>Moskva</title>
</head>
<body>
<!-- Header start -->
<header>
<div class="container">
<h1>Moskva</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel interdum purus. Nulla semper nisi vel volutpat tristique.</p>
</div>
<div class="container">
<nav>
<ul>
<li>Naslovnica</li>
<li>Galerija</li>
</ul>
</nav>
</div>
</header>
<!-- Header end -->
<!-- About city -->
<section id="opis">
<div class="container">
<div class="box">
<h3>Lorem Ipsum</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel interdum purus. Nulla semper nisi vel volutpat tristique. Fusce eget quam sit amet dui consequat fermentum. Morbi dictum efficitur lorem a aliquam. Nam dapibus, lorem vel molestie tincidunt, urna ipsum vehicula sem, in vehicula dolor dui vel massa. Fusce a tortor est. Maecenas nec congue diam. Ut et ornare urna, id feugiat ex.Donec ac vehicula dolor, quis placerat arcu. Nam laoreet enim in varius tristique. Vestibulum feugiat sed nisl ac vestibulum. Cras quis pellentesque quam, eu sollicitudin enim. Curabitur massa elit, tempor vel leo in, laoreet placerat sem.
</p>
</div>
<hr>
<!-- Image-Text sections -->
<!-- Kremlin -->
<div class="box">
<h3>Kremlin</h3>
<img src="../images/kremlin-pic.jpg" alt="kremlin" class="right-img">
<br> <br>
<p>Najprepoznatljivija struktura Moskve bez sumnje je Kremlj, utvrđeni kompleks iz 15. stoljeća koji pokriva površinu od 275.000 četvornih metara okružen zidinama izgrađenim 1400-ih. Palača Grand Kremlj - koja ima preko 700 soba - nekad je bila obitelj kralja i sada je službeno prebivalište predsjednika Ruske Federacije, iako većina šefova država odlučuje prebivati negdje drugdje.</p>
</div>
<!-- Kremlin End -->
<!-- Bolshoi Theatre Start -->
<div class="box">
<h3>Bolshoi Theatre</h3>
<img src="../images/bolshoi-theatre.jpg" class="left-img">
</div>
<!-- Bolshoi Theatre End -->
</section>
</body>
</html>
CSS
body {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
line-height: 1.5;
background-color: #f4f4f4;
}
/* Global container */
.container {
width: 80%;
margin: auto;
overflow: hidden;
text-align: center;
}
.box {
text-align: center;
display: block;
}
/* Header section */
header {
text-align: center;
padding-top: 30px;
background: url(../images/background.jpg) no-repeat;
min-height: 690px;
}
header h1 {
font-size: 95px;
font-weight: bold;
color: white;
font-family: 'Dancing Script', cursive;
}
header p {
color: white;
}
nav {
margin-top: 4%;
}
/* Anchor tags section */
header a {
color: white;
text-decoration: none;
font-size: 24px;
transition: linear .2s;
}
header a:hover {
color: #ccc;
font-weight: bold;
}
/* Anchor tags section end */
header li {
display: inline;
padding: 0px 40px 0px 20px;
}
/* Header section END */
/* Image-Text section */
h3 {
font-size: 28px;
font-family: 'Dancing Script', cursive;
}
/* Image float - RL */
.right-img {
float: right;
}
.left-img {
float: left;
}
First of all when you are using float so you need to add overflow hidden in Parent.
The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow (in contrast to absolute positioning).
So you have to add overflow: hidden; CSS, please review below as I create an example for the same.
I add a link in comment for better understanding.
I am trying to write a responsive footer. The footer items are separated by vertical bar (|). When we decrease the screen size, the footer items are wrapping to second line. Vertical bar (|) needs to be only between the footer items. Also facebook logo needs to be on the same line with the footer items for bigger screen sizes and on the center for smaller screen sizes. I used float:right but now they wrap from the beginning. How can I make them wrap from the end and hide vertical bar (|) if it is not between the footer items?
Here is my source code: https://jsfiddle.net/6kcdvteo/
body {
font-family: 'Calibri';
}
.text {
font-size: 1rem;
padding: 1rem 1rem 2rem 2rem;
color: #666666;
background-color: #f4f4f4;
}
.footer {
font-size: 0.85rem;
padding: 2rem 1rem 2rem 2rem;
background-color: #303741;
color: white;
}
.footer_company {
float: right;
padding-right: 2rem;
}
.footer_links {
font-size: 0.85rem;
background-color: #303741;
color: white;
padding-bottom: 2rem;
padding-right: 2.5rem;
}
.footer_links_span span {
background-color: #303741;
padding-right: 0.5rem;
float: right;
}
img {
height: 3rem;
width: 3rem;
}
.img {
padding-left: 1rem;
display: inline-block;
}
<div class="text">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac cursus felis, ut egestas lacus. Sed nec elementum ipsum. Morbi metus est, venenatis at libero pharetra, suscipit posuere dolor. Proin a auctor nulla, sed tincidunt tellus. Nullam bibendum
luctus elit, sed porttitor lectus varius in. Cras venenatis rutrum urna at ultrices. Sed in luctus ligula.
</p>
</div>
<div class="footer">
<span class="footer_company">© My Company Name</span>
</div>
<div class="footer_links">
<div class="img">
<img src="https://image.flaticon.com/icons/png/512/124/124010.png">
</div>
<div class="footer_links_span">
<span>Sed metus</span>
<span>|</span>
<span>Aenean ultricies</span>
<span>|</span>
<span>Praesent vitae</span>
<span>|</span>
<span>Donec auctor</span>
<span>|</span>
<span>Vestibulum lobortis</span>
</div>
</div>
As part of your question you can use this
<div class="footer_links">
<div class="img">
<img src="https://image.flaticon.com/icons/png/512/124/124010.png" alt="">
</div>
<div class="footer_links_span">
<span><b>|</b> Sed metus</span>
<span><b>|</b> Aenean ultricies</span>
<span><b>|</b> Praesent vitae</span>
<span><b>|</b> Donec auctor</span>
<span><b>|</b> Vestibulum lobortis <b>|</b></span>
</div>
</div>
with this css
/* container */
.footer_links {
padding: 0.75rem 1.5rem;
font-size: 0.85rem;
background-color: #303741;
color: white;
}
/* clearfix floats */
.footer_links::after {
display: block;
clear: both;
content: "";
}
/* facebook img */
.img {
float: left;
}
.img img {
width: 3rem;
height: auto;
border: 0;
}
/* links */
.footer_links_span {
float: right;
width: calc(100% - 3.5rem);
text-align: right;
}
.footer_links_span span {
display: inline-block;
white-space: nowrap;
background-color: #303741;
}
.footer_links b {
padding: 0 0.2rem;
font-weight: inherit;
}
.footer_links_span span:first-child b {
padding-left: 0;
}
.footer_links_span span:last-child b {
padding-right: 0;
}
Maybe it will help you in the right direction.
This will solve your problem, but it's Bootstrap :) All your responsive screenshotes are implemented in this code. No extra css for the layout required.
EDIT: The included style is for the width of the links block and for hiding the pipe symbool on small screens.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Page</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style type="text/css">
#footerSocial img { width: 3rem; margin-bottom: 0.5rem; }
#footerLinks > div { max-width: 350px; margin: auto; }
#footerLinks .dv { font-weight: inherit; display: none; }
#media (min-width: 576px) {
#footerSocial img { margin-bottom: 0; }
#footerLinks > div { max-width: none; padding-left: 100px; }
}
#media (min-width: 768px) {
#footerLinks > div { padding-left: 0; }
#footerLinks .dv { display: inline; }
}
</style>
</head>
<body>
<div class="container-fluid bg-secondary text-white">
<div class="row py-3">
<div class="col-12 text-center">
<h1 class="mb-2">Company Name</h1>
</div>
</div>
</div>
<div class="container">
<div class="row py-3">
<div class="col-12 ">
<h2>Article</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac cursus felis, ut egestas lacus.
Sed nec elementum ipsum. Morbi metus est, venenatis at libero pharetra, suscipit posuere dolor.
Proin a auctor nulla, sed tincidunt tellus. Nullam bibendum luctus elit, sed porttitor lectus
varius in. Cras venenatis rutrum urna at ultrices. Sed in luctus ligula.</p>
</div>
</div>
</div>
<div class="container-fluid bg-dark text-white">
<div class="row px-2 py-3">
<div id="footerSocial" class="col-12 col-sm-2 text-center text-sm-left">
<img class="img-fluid bg-white" src="https://image.flaticon.com/icons/png/512/124/124010.png" alt="FB">
</div>
<div id="footerLinks" class="col-12 col-sm-10 text-center text-sm-right">
<div>
© Company Name<br>
<span class="text-nowrap">Sed metus</span>
<span class="text-nowrap">| Aenean ultricies</span>
<span class="text-nowrap">| Praesent vitae</span>
<span class="text-nowrap"><b class="dv">| </b>Donec auctor</span>
<span class="text-nowrap">| Vestibulum lobortis</span>
</div>
</div>
</div>
</div>
</body>
</html>
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 4 years ago.
I am trying to create a space above "Affordable Professional Web Design" in the image below, so that it creates a space which is occupied by the image
However when I do so, it only seems to push the image down and leaves white space (indicated in red). I am trying to do this by applying margin-top although cannot find a resolution. Any ideas how to resolve?
Web Page Image
/* Global */
.container {
width: 80%;
margin: auto;
overflow;
hidden;
}
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}
ul {
margin: 0;
padding: 0;
}
/* Header */
header {
background-color: #35424a;
border-bottom: orange solid;
min-height: 70px;
padding-top: 30px;
color: #ffffff;
}
header #branding {
float: left;
}
header #branding h1 {
margin: 0;
}
header li {
float: left;
list-style: none;
padding: 0 10px 0 10px;
}
header nav {
float: right;
text-transform: uppercase;
}
header a {
text-decoration: none;
color: #ffffff;
}
#highlight,
#current a {
color: #e8491d;
}
nav a:hover {
color: orange;
}
/* Showcase */
#showcase {
min-height: 400px;
background: url('../countryside.jpg') no-repeat;
background-size: cover;
text-align: center;
color: #ffffff;
}
#showcase h1 {
margin-top: 100px;
padding: 30px;
text-align: center;
color: #ffffff;
font-size: 50px;
}
#showcase p {
text-align: center;
color: #ffffff;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>My Website</title>
<link rel="stylesheet" href="styles.css" />
<meta name="viewport" width="device-width" />
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1><span id="highlight">Test</span> Web Design</h1>
</div>
<nav>
<ul>
<li id="current">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="container">
<h1>Affordable Professional Web Design</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget nulla molestie, dictum purus vel, dapibus turpis. Aliquam malesuada laoreet ante. Integer dictum ipsum sed arcu commodo laoreet ultrices ac est. Nullam sagittis eget arcu nec
mollis.
</p>
</div>
</section>
<section id="newsletter">
<div class="container">
<form>
<h2>Subscribe to our newsletter</h2>
<input type="email" placeholder="Enter email..." />
<button type="submit">Submit</button>
</form>
</div>
</section>
<section class="boxes">
<div class="container">
<div class="box">
<img src="HTML.png" alt="" />
<h3>HTML Markup</h3>
<p>In a orci nec nunc posuere placerat. Etiam imperdiet libero ac enim faucibus, ac commodo lacus mollis.</p>
</div>
<div class="box">
<img src="css.png" height="200px" alt="" />
<h3>CSS3 Styling</h3>
<p>In a orci nec nunc posuere placerat. Etiam imperdiet libero ac enim faucibus, ac commodo lacus mollis.</p>
</div>
<div class="box">
<img src="graphic_design.svg" height="300px" alt="" />
<h3>Graphic Design</h3>
<p>In a orci nec nunc posuere placerat. Etiam imperdiet libero ac enim faucibus, ac commodo lacus mollis.</p>
</div>
</div>
</section>
</body>
Instead of margin try using padding:
#showcase h1{
padding:100px 30px 30px 30px;
text-align:center;
color:#ffffff;
font-size:50px;
}
I have chat window where I want to put photo and message next to photo. Conversation window must be responsive and message div auto-adjustable to the screen. But I can't find any way to do this, because once message has few lines of text, it drops to the next line.
If I use table, I can't make fixed-width photo TD. If I use DIVS, I can't do auto-width message DIV :)
Here is JSFiddle with an example:
https://jsfiddle.net/s95tdcLw/3/
HTML:
<div class="receiver">
<div class="receiverPhoto"></div>
<div class="receiverMessage">
Lorem ipsum dolor sit
</div>
</div>
<div class="receiver">
<div class="receiverPhoto"></div>
<div class="receiverMessage">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et mauris eget est maximus condimentum nec a turpis.
</div>
</div>
<div class="receiver">
<div class="receiverPhoto"></div>
<div class="receiverMessage">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et mauris eget est maximus condimentum nec a turpis. Nulla nulla est, feugiat vitae posuere et, efficitur ac justo. Suspendisse pulvinar, urna quis vehicula malesuada, lorem lacus luctus odio,
eu mattis nisi turpis vel lectus.
</div>
</div>
CSS:
.receiver {
clear: both;
padding-top: 1rem;
}
.receiverPhoto {
float: left;
width: 40px;
height: 40px;
background: blue;
border-radius: 20px;
}
.receiverMessage {
float: left;
width: auto;
background: rgb(230, 230, 230);
border-radius: 10px;
margin-left: 0.5rem;
padding: 10px;
}
Leave the float settings, use these instead:
.receiver {
position: relative;
}
.receiverPhoto {
position: absolute;
left: 0;
}
.receiverMessage {
margin-left: 45px;
}
jsFiddle
Your .receiverMessage element should not float and it should reserve left-margin space for the .receiverPhoto element.
.receiverMessage {
/* should not float */
width: auto;
background: rgb(230, 230, 230);
border-radius: 10px;
margin-left: 50px; /* reserve space of .receiverPhoto width */
padding: 10px;
}
See the forked Fiddle: https://jsfiddle.net/092b077c/
In response to your comment how to make it work for the opposite...
I'd use the classes on the wrapping div elements to determine the message type. In my example I introduce a new class .sender. Now I create four selectors that determine whether the photo element floats left or right and whether the message element has left or right padding:
New CSS:
.sender .receiverPhoto {
float: right;
}
.sender .receiverMessage {
margin-right: 50px;
}
.receiver .receiverPhoto {
float: left;
}
.receiver .receiverMessage {
margin-left: 50px;
}
HTML:
<div class="sender">
<div class="receiverPhoto"></div>
<div class="receiverMessage">...</div>
</div>
Now the .receiverPhoto and .receiverMessage styles do not need to declare margin or float.
See the updated Fiddle: https://jsfiddle.net/092b077c/1/
I currently have a site I'm working on ( copying another site as Practice )
This is the site I am trying to re-create
http://www.north2.net/
.
I am almost done, however I cannot position the two side sections(left and right of main image) correctly.
Can anyone help me out?
I have 3 "sections" left, middle, right, all are in a wrapper
I've tried
margin-top,
removing inline-block on the wrappers
...
MY GOAL :
Is to be able to raise the two side bars to my liking, but I don't see how to raise them in any way.
north2.net to see what I mean.
JSFIDDLE
http://jsfiddle.net/abXk4/
Not Important ::
Also, when I position anything, my background image moves and there is a white gap on the bottom of the page, my screen is 1920 x 1080, so any adjustment makes a white space,
I've been fixing this with
padding-bottom: X%;
Is this just something I have to do? Or is it because I coded incorrectly.
HTML
<title> ENTER TITLE </title>
</head>
<body>
<div id='page'>
<!--All of Left Side Bar Contents -->
<div class="swrap">
<div id="logo">
<img src="img/logo_green.png">
</div>
<div id="about">
<aside class="tlb"><p>About Us</p></aside>
<p>Welcome. We are Author, nulla mauris odio, vehicula in, condimentum sit amet, tempus id, metus. Donec at nisi sit amet felis blandit posuere. Aliquam erat volutpat.</p>
</div>
<div id="services">
<aside class="tlb"><p>Services</p></aside>
<ul>
<li>Web Site Dev and Applications </li>
<div class='hr'></div>
<li>CMS</li>
<div class='hr'></div>
<li>Digital Branding and Industry</li>
<div class='hr'></div>
<li>UI Design</li>
<div class='hr'></div>
<li>Social Media</li>
<div class='hr'></div>
<li>User Experience</li>
<div class='hr'></div>
<li>Creative Ingenuity</li>
</ul> </div>
</div>
<!-- Center Content ( main header, main image ) -->
<div class="mwrap">
<!-- Main Nav Above Slider -->
<nav class='mnav'>
<ul>
<li class="m1"><a href='#'>home</a></li>
<li class="m2"><a href='#'>Author</a></li>
<li class="m3"><a href='#'>work</a></li>
<li class="m4"><a href='#'>clients</a></li>
<li class="m5"><a href='#'>contact</a></li>
</ul>
</nav>
<div id="fimg">
<img src="img/fumic_naslovna.jpg">
</div>
<div id="featart">
<article>
<h1>Lorem Ipsum</h1>
<p> Nulla mauris odio, vehicula in, condimentum sit amet, tempus id, metus. Donec at nisi sit amet felis blandit posuere. Aliquam erat volutpat. Cras lobortis orci in quam porttitor cursus. Aenean dignissim. Curabitur facilisis sem at nisi laoreet placerat. Duis sed ipsum ac nibh mattis feugiat. Proin sed purus. Vivamus lectus ipsum, rhoncus sed, scelerisque sit amet, ultrices in, dolor. Aliquam vel magna non nunc ornare bibendum. Sed libero. Maecenas at est. Vivamus ornare, felis et luctus dapibus, lacus leo convallis diam, eget dapibus augue arcu eget arcu.</p>
</article>
</div>
</div>
<div id="rwrap">
<div class="rfc">
<aside class="tlb">Featured Clients</aside>
<p> Nulla mauris odio, vehicula in, condimentum sit amet, tempus id, metus. Donec at nisi sit amet felis blandit posuere. Aliquam erat volutpat. Cras lobortis orci in quam porttitor cursus.</p>
<div class='hr'></div>
<p> Nulla mauris odio, vehicula in, condimentum sit amet, tempus id, metus. Donec at nisi sit amet felis blandit posuere. Aliquam erat volutpat.</p>
</div>
</div>
</div>
</body>
</html>
CSS
body {
background-image: url(img/brown.jpg);
background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center;
padding-bottom:12%;
color: #fff;
font-weight: bold;
font-size: large;
text-align: left;
}
* {
border-radius: 1px;
}
#page {
margin: 30px 25%;
width: auto;
/* width should be 50% ... 25% on each side, 50% in middle, centered!*/
border: 2px solid black;
}
/*Left Content Begins ------------------ */
.swrap {
width: 23%;
display:inline-block;
/*1% margin on each side */
margin-top: 100px;
}
#logo {
background-color: rgba(0,0,0,.7);
}
#about {
margin: 3px 0;
background-color: rgba(89, 194, 141, 1);
padding: 5%;
}
#about aside {
margin-left: -6% !important;
}
#services {
background-color:rgba(66, 161, 75, .96);
padding: 2%;
margin: 3px 0;
}
.tlb {
background-color: rgba(0,0,0,.6);
width: 75%;
margin: -10px 0 0 -2% !important;
padding-left: 4%;
}
/*Middle Content Begins ------------------ */
.mwrap {
width: 48%;
margin: 0 auto;
/*1% margin on each side for .mwrap*/
display:inline-block;
}
.mnav ul {
list-style:none;
}
.mnav ul li {
display: inline;
font-size: large;
font-weight:bold;
padding: 2px 2%;
border-radius: 1px;
}
.mnav ul li a {
text-decoration: none;
color: #fff;
}
.m1 {background-color:rgba(46, 206, 87, 1); }
.m2 {background-color: rgba(39, 197, 80, 1); }
.m3 {background-color: rgba(70, 182, 99, 1); }
.m4 {background-color: rgba(64, 164, 90, 1);}
.m5 {background-color: rgba(63, 140, 83, 1); }
.mnav ul li:active {
background-color:none !important;
}
.mnav li:hover {
background-color: rgba(0,0,0,.3);
}
#fimg {
width: 100%;
}
#fimg img {
width: 100%;
}
#featart {
margin-top: -10px;
background-color: rgba(64, 164, 90, .9);
padding: 1% 1%;
}
/*Right Content Begins ------------------ */
#rwrap {
width: 23%;
display:inline-block;
/*1% margin on each side */
}
.rfc {
background-color:rgba(66, 161, 75, .96);
padding: 2%;
}
.rfc .tlb {
margin-top: 9px !important;
margin-left: -2.3% !important;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}
The easy way is to use position relative position: relative; bottom: [how ever many pixels]
A better (and later much more flexible) way is to change you HTML structure a little bit.
If I were building this site I'd break it into two wrapping divs with three column divs under each of them like here:
<div class="header">
<div class="left-column">
<img id="logo" src="img/logo.png" />
</div>
<div class="middle-column">
<ul class="nav"></ul>
</div>
<div class="right-column">
Put content here if you want it
</div>
</div>
<div class="content">
<div class="left-column">
Content in left column
</div>
<div class="middle-column">
Content in middle
</div>
<div class="right-column">
Content on right
</div>
</div>
Now, use CSS to float those columns just like you did before. The difference with this is you can define a height for the header and the logo and navigation will be much easier to align as they are separate from the other columns.
If you want to get more technical check out CSS Flexbox, it would work well here.
http://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/
set
a position: relative;
bottom: X px;