align sections side by side

Question

I have tried several attempts to align the section & main to sit side by side? by using a display of inline-block and floating <section> to the left etc. But I am unsuccessful, any help as to what I am doing wrong here would be greatly appreciated :-)

 jQuery(document).ready(function($) { //on mobile - open/close primary navigation clicking/tapping the menu icon $('.cd-primary-nav').on('click', function(event) { if ($(event.target).is('.cd-primary-nav')) $(this).children('ul').toggleClass('is-visible'); }); //upload videos if not on mobile uploadVideo($('.cd-hero-slider')); //change visible slide $('.cd-slider-nav li').on('click', function(event) { event.preventDefault(); var selectedItem = $(this); if (!selectedItem.hasClass('selected')) { // if it's not already selected var selectedPosition = selectedItem.index(), activePosition = $('.cd-hero-slider .selected').index(); if (activePosition < selectedPosition) { nextSlide($('.cd-hero-slider'), $('.cd-slider-nav'), selectedPosition); } else { prevSlide($('.cd-hero-slider'), $('.cd-slider-nav'), selectedPosition); } updateNavigationMarker(selectedPosition + 1); } }); function nextSlide(container, pagination, n) { var visibleSlide = container.find('.selected'), navigationDot = pagination.find('.selected'); visibleSlide.removeClass('selected from-left from-right').addClass('is-moving').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function() { visibleSlide.removeClass('is-moving'); }); container.children('li').eq(n).addClass('selected from-right').prevAll().addClass('move-left'); navigationDot.removeClass('selected') pagination.find('li').eq(n).addClass('selected'); checkVideo(visibleSlide, container, n); } function prevSlide(container, pagination, n) { var visibleSlide = container.find('.selected'), navigationDot = pagination.find('.selected'); visibleSlide.removeClass('selected from-left from-right').addClass('is-moving').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function() { visibleSlide.removeClass('is-moving'); }); container.children('li').eq(n).addClass('selected from-left').removeClass('move-left').nextAll().removeClass('move-left'); navigationDot.removeClass('selected'); pagination.find('li').eq(n).addClass('selected'); checkVideo(visibleSlide, container, n); } function uploadVideo(container) { container.find('.cd-bg-video-wrapper').each(function() { var videoWrapper = $(this); if (videoWrapper.is(':visible')) { // if visible - we are not on a mobile device var videoUrl = videoWrapper.data('video'), video = $('<video loop><source src="' + videoUrl + '.mp4" type="video/mp4" /><source src="' + videoUrl + '.webm" type="video/webm" /></video>'); video.appendTo(videoWrapper); } }); } function checkVideo(hiddenSlide, container, n) { //check if a video outside the viewport is playing - if yes, pause it if (hiddenSlide.find('video').length > 0) hiddenSlide.find('video').get(0).pause(); //check if the select slide contains a video element - if yes, play the video if (container.children('li').eq(n).find('video').length > 0) container.children('li').eq(n).find('video').get(0).play(); } function updateNavigationMarker(n) { $('.cd-marker').removeClassPrefix('item').addClass('item-' + n); } $.fn.removeClassPrefix = function(prefix) { //remove all classes starting with 'prefix' this.each(function(i, el) { var classes = el.className.split(" ").filter(function(c) { return c.lastIndexOf(prefix, 0) !== 0; }); el.className = $.trim(classes.join(" ")); }); return this; }; }); 

 *{ margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* -------------------------------- Primary style -------------------------------- */ *, *::after, *::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html { font-size: 62.5%; } body { font-size: 1.6rem; font-family: "Open Sans", sans-serif; color: #2c343b; background-color: #f2f2f2; } a { color: #d44457; text-decoration: none; } img { max-width: 100%; } /* -------------------------------- Main Components -------------------------------- */ /* -------------------------------- Slider -------------------------------- */ .cd-hero { position: relative; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .cd-hero-slider { position: relative; height: 360px; overflow: hidden; } .cd-hero-slider li { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } .cd-hero-slider li.selected { /* this is the visible slide */ position: relative; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .cd-hero-slider li.move-left { /* slide hidden on the left */ -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } .cd-hero-slider li.is-moving, .cd-hero-slider li.selected { /* the is-moving class is assigned to the slide which is moving outside the viewport */ -webkit-transition: -webkit-transform 0.5s; -moz-transition: -moz-transform 0.5s; transition: transform 0.5s; } @media only screen and (min-width: 768px) { .cd-hero-slider { height: 500px; } } @media only screen and (min-width: 1170px) { .cd-hero-slider { height: 680px; } } /* -------------------------------- Single slide style -------------------------------- */ .cd-hero-slider li { background-position: center center; background-size: cover; background-repeat: no-repeat; } .cd-hero-slider li:first-of-type { background-color: #2c343b; } .cd-hero-slider li:nth-of-type(2) { background-color: #3d4952; background-image: url("../assets/tech-1-mobile.jpg"); } .cd-hero-slider li:nth-of-type(3) { background-color: #586775; background-image: url("../assets/tech-2-mobile.jpg"); } .cd-hero-slider li:nth-of-type(4) { background-color: #2c343b; background-image: url("../assets/video-replace-mobile.jpg"); } .cd-hero-slider li:nth-of-type(5) { background-color: #2c343b; background-image: url(../assets/img.jpg); } .cd-hero-slider .cd-full-width, .cd-hero-slider .cd-half-width { position: absolute; width: 100%; height: 100%; z-index: 1; left: 0; top: 0; /* this padding is used to align the text */ padding-top: 100px; text-align: center; /* Force Hardware Acceleration in WebKit */ -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); } .cd-hero-slider .cd-img-container { /* hide image on mobile device */ display: none; } .cd-hero-slider .cd-img-container img { position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .cd-hero-slider .cd-bg-video-wrapper { /* hide video on mobile device */ display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } .cd-hero-slider .cd-bg-video-wrapper video { /* you won't see this element in the html, but it will be injected using js */ display: block; min-height: 100%; min-width: 100%; max-width: none; height: auto; width: auto; position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .cd-hero-slider h2, .cd-hero-slider p { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); line-height: 1.2; margin: 0 auto 14px; color: #ffffff; width: 90%; max-width: 400px; } .cd-hero-slider h2 { font-size: 2.4rem; } .cd-hero-slider p { font-size: 1.4rem; line-height: 1.4; } .cd-hero-slider .cd-btn { display: inline-block; padding: 1.2em 1.4em; margin-top: .8em; background-color: transparent; border: 1px solid white; font-size: 1.3rem; font-weight: 700; letter-spacing: 1px; color: #ffffff; text-transform: uppercase; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); -webkit-transition: background-color 0.2s; -moz-transition: background-color 0.2s; transition: background-color 0.2s; } .cd-hero-slider .cd-btn.secondary { background-color: rgba(22, 26, 30, 0.8); } .cd-hero-slider .cd-btn:nth-of-type(2) { margin-left: 1em; } .no-touch .cd-hero-slider .cd-btn:hover { background-color: #d44457; } .no-touch .cd-hero-slider .cd-btn.secondary:hover { background-color: #161a1e; } @media only screen and (min-width: 768px) { .cd-hero-slider li: nth-of-type(2) { background-image: none; } .cd-hero-slider li:nth-of-type(3) { background-image: none; } .cd-hero-slider li:nth-of-type(4) { background-image: none; } .cd-hero-slider .cd-full-width, .cd-hero-slider .cd-half-width { padding-top: 150px; } .cd-hero-slider .cd-bg-video-wrapper { display: block; } .cd-hero-slider .cd-half-width { width: 45%; } .cd-hero-slider .cd-half-width:first-of-type { left: 5%; } .cd-hero-slider .cd-half-width:nth-of-type(2) { right: 5%; left: auto; } .cd-hero-slider .cd-img-container { display: block; } .cd-hero-slider h2, .cd-hero-slider p { max-width: 520px; } .cd-hero-slider h2 { font-size: 2.4em; font-weight: 300; } .cd-hero-slider .cd-btn { font-size: 1.4rem; } } @media only screen and (min-width: 1170px) { .cd-hero-slider .cd-full-width, .cd-hero-slider .cd-half-width { padding-top: 220px; } .cd-hero-slider h2, .cd-hero-slider p { margin-bottom: 20px; } .cd-hero-slider h2 { font-size: 3.2em; } .cd-hero-slider p { font-size: 1.6rem; } } /* -------------------------------- Single slide animation -------------------------------- */ @media only screen and (min-width: 768px) { .cd-hero-slider .cd-half-width { opacity: 0; -webkit-transform: translateX(40px); -moz-transform: translateX(40px); -ms-transform: translateX(40px); -o-transform: translateX(40px); transform: translateX(40px); } .cd-hero-slider .move-left .cd-half-width { -webkit-transform: translateX(-40px); -moz-transform: translateX(-40px); -ms-transform: translateX(-40px); -o-transform: translateX(-40px); transform: translateX(-40px); } .cd-hero-slider .selected .cd-half-width { /* this is the visible slide */ opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .cd-hero-slider .is-moving .cd-half-width { /* this is the slide moving outside the viewport wait for the end of the transition on the <li> parent before set opacity to 0 and translate to 40px/-40px */ -webkit-transition: opacity 0s 0.5s, -webkit-transform 0s 0.5s; -moz-transition: opacity 0s 0.5s, -moz-transform 0s 0.5s; transition: opacity 0s 0.5s, transform 0s 0.5s; } .cd-hero-slider li.selected.from-left .cd-half-width:nth-of-type(2), .cd-hero-slider li.selected.from-right .cd-half-width:first-of-type { /* this is the selected slide - different animation if it's entering from left or right */ -webkit-transition: opacity 0.4s 0.2s, -webkit-transform 0.5s 0.2s; -moz-transition: opacity 0.4s 0.2s, -moz-transform 0.5s 0.2s; transition: opacity 0.4s 0.2s, transform 0.5s 0.2s; } .cd-hero-slider li.selected.from-left .cd-half-width:first-of-type, .cd-hero-slider li.selected.from-right .cd-half-width:nth-of-type(2) { /* this is the selected slide - different animation if it's entering from left or right */ -webkit-transition: opacity 0.4s 0.4s, -webkit-transform 0.5s 0.4s; -moz-transition: opacity 0.4s 0.4s, -moz-transform 0.5s 0.4s; transition: opacity 0.4s 0.4s, transform 0.5s 0.4s; } .cd-hero-slider .cd-full-width h2, .cd-hero-slider .cd-full-width p, .cd-hero-slider .cd-full-width .cd-btn { opacity: 0; -webkit-transform: translateX(100px); -moz-transform: translateX(100px); -ms-transform: translateX(100px); -o-transform: translateX(100px); transform: translateX(100px); } .cd-hero-slider .move-left .cd-full-width h2, .cd-hero-slider .move-left .cd-full-width p, .cd-hero-slider .move-left .cd-full-width .cd-btn { opacity: 0; -webkit-transform: translateX(-100px); -moz-transform: translateX(-100px); -ms-transform: translateX(-100px); -o-transform: translateX(-100px); transform: translateX(-100px); } .cd-hero-slider .selected .cd-full-width h2, .cd-hero-slider .selected .cd-full-width p, .cd-hero-slider .selected .cd-full-width .cd-btn { /* this is the visible slide */ opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .cd-hero-slider li.is-moving .cd-full-width h2, .cd-hero-slider li.is-moving .cd-full-width p, .cd-hero-slider li.is-moving .cd-full-width .cd-btn { /* this is the slide moving outside the viewport wait for the end of the transition on the li parent before set opacity to 0 and translate to 100px/-100px */ -webkit-transition: opacity 0s 0.5s, -webkit-transform 0s 0.5s; -moz-transition: opacity 0s 0.5s, -moz-transform 0s 0.5s; transition: opacity 0s 0.5s, transform 0s 0.5s; } .cd-hero-slider li.selected h2 { -webkit-transition: opacity 0.4s 0.2s, -webkit-transform 0.5s 0.2s; -moz-transition: opacity 0.4s 0.2s, -moz-transform 0.5s 0.2s; transition: opacity 0.4s 0.2s, transform 0.5s 0.2s; } .cd-hero-slider li.selected p { -webkit-transition: opacity 0.4s 0.3s, -webkit-transform 0.5s 0.3s; -moz-transition: opacity 0.4s 0.3s, -moz-transform 0.5s 0.3s; transition: opacity 0.4s 0.3s, transform 0.5s 0.3s; } .cd-hero-slider li.selected .cd-btn { -webkit-transition: opacity 0.4s 0.4s, -webkit-transform 0.5s 0.4s, background-color 0.2s 0s; -moz-transition: opacity 0.4s 0.4s, -moz-transform 0.5s 0.4s, background-color 0.2s 0s; transition: opacity 0.4s 0.4s, transform 0.5s 0.4s, background-color 0.2s 0s; } } /* -------------------------------- Slider navigation -------------------------------- */ .cd-slider-nav { position: absolute; width: 100%; bottom: 0; z-index: 2; text-align: center; height: 55px; background-color: rgba(0, 1, 1, 0.5); } .cd-slider-nav nav, .cd-slider-nav ul, .cd-slider-nav li, .cd-slider-nav a { height: 100%; } .cd-slider-nav nav { display: inline-block; position: relative; } .cd-slider-nav .cd-marker { position: absolute; bottom: 0; left: 0; width: 60px; height: 100%; color: #d44457; background-color: #ffffff; box-shadow: inset 0 2px 0 currentColor; -webkit-transition: -webkit-transform 0.2s, box-shadow 0.2s; -moz-transition: -moz-transform 0.2s, box-shadow 0.2s; transition: transform 0.2s, box-shadow 0.2s; } .cd-slider-nav .cd-marker.item-2 { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } .cd-slider-nav .cd-marker.item-3 { -webkit-transform: translateX(200%); -moz-transform: translateX(200%); -ms-transform: translateX(200%); -o-transform: translateX(200%); transform: translateX(200%); } .cd-slider-nav .cd-marker.item-4 { -webkit-transform: translateX(300%); -moz-transform: translateX(300%); -ms-transform: translateX(300%); -o-transform: translateX(300%); transform: translateX(300%); } .cd-slider-nav .cd-marker.item-5 { -webkit-transform: translateX(400%); -moz-transform: translateX(400%); -ms-transform: translateX(400%); -o-transform: translateX(400%); transform: translateX(400%); } .cd-slider-nav ul::after { clear: both; content: ""; display: table; } .cd-slider-nav li { display: inline-block; width: 60px; float: left; } .cd-slider-nav li.selected a { color: #2c343b; } .no-touch .cd-slider-nav li.selected a:hover { background-color: transparent; } .cd-slider-nav a { display: block; position: relative; padding-top: 35px; font-size: 1rem; font-weight: 700; color: #a8b4be; -webkit-transition: background-color 0.2s; -moz-transition: background-color 0.2s; transition: background-color 0.2s; } .cd-slider-nav a::before { content: ''; position: absolute; width: 24px; height: 24px; top: 8px; left: 50%; right: auto; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); background: url(../assets/cd-icon-navigation.svg) no-repeat 0 0; } .no-touch .cd-slider-nav a:hover { background-color: rgba(0, 1, 1, 0.5); } .cd-slider-nav li:first-of-type a::before { background-position: 0 0; } .cd-slider-nav li.selected:first-of-type a::before { background-position: 0 -24px; } .cd-slider-nav li:nth-of-type(2) a::before { background-position: -24px 0; } .cd-slider-nav li.selected:nth-of-type(2) a::before { background-position: -24px -24px; } .cd-slider-nav li:nth-of-type(3) a::before { background-position: -48px 0; } .cd-slider-nav li.selected:nth-of-type(3) a::before { background-position: -48px -24px; } .cd-slider-nav li:nth-of-type(4) a::before { background-position: -72px 0; } .cd-slider-nav li.selected:nth-of-type(4) a::before { background-position: -72px -24px; } .cd-slider-nav li:nth-of-type(5) a::before { background-position: -96px 0; } .cd-slider-nav li.selected:nth-of-type(5) a::before { background-position: -96px -24px; } @media only screen and (min-width: 768px) { .cd-slider-nav { height: 80px; } .cd-slider-nav .cd-marker, .cd-slider-nav li { width: 95px; } .cd-slider-nav a { padding-top: 48px; font-size: 1.1rem; text-transform: uppercase; } .cd-slider-nav a::before { top: 18px; } } /* -------------------------------- Main content -------------------------------- */ .cd-main-content { width: 100%; max-width: 768px; margin: 0 auto; padding: 2em 0; display: inline-block; } .cd-main-content p { font-size: 1.4rem; line-height: 1.8; color: #999999; margin: 2em 0; } @media only screen and (min-width: 1170px) { .cd-main-content { padding: 3em 0; } .cd-main-content p { font-size: 1.6rem; } } /* -------------------------------- Javascript disabled -------------------------------- */ .no-js .cd-hero-slider li { display: none; } .no-js .cd-hero-slider li.selected { display: block; } .no-js .cd-slider-nav { display: none; } 

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <section class="cd-hero"> <ul class="cd-hero-slider"> <li class="selected"> <div class="cd-full-width"> <a href="" class="cd-btn">Like what I do? Let me know</a> </div> <!-- .cd-full-width --> <div class="cd-bg-video-wrapper" data-video="assets/video/video"> <!-- video element will be loaded using jQuery --> <img src=[!["http://blog.franceandson.com/wp-content/uploads/2015/02/marilyn-monroe-by-andy-warhol-medium.jpg"][1]][1] alt="" width=1200/> </div> <!-- .cd-bg-video-wrapper --> </li> <li> <div class="cd-full-width"> <div id="container"> <div class='module' id='measure'> <fieldset> <legend></legend> <p>Send me a message</p> <input class="single" type='text' placeholder='Name' /> <input class="single" type='text' placeholder='Email' /> <input class="single" type='text' placeholder='Phone' /> <textarea class="message" type='text' placeholder='Message'></textarea> </fieldset> </div> <a href="" class="cd-btn">Send</a> </div> <!-- .cd-half-width --> </li> <li> <div class="cd-full-width"> <a href="" class="cd-btn">Thank you</a> </div> <!-- .cd-full-width --> <div class="cd-bg-video-wrapper" data-video="assets/video/video"> <!-- video element will be loaded using jQuery --> <img src=[!["http://www.therealbest.com/img/items/big/587/Turquoise-Marilyn_The-Head-of-Marilyn_789.jpg"][1]][1] alt="" </div> <!-- .cd-half-width --> </li> </ul> <!-- .cd-hero-slider --> <div class="cd-slider-nav"> <nav> <span class="cd-marker item-1"></span> <ul> <li class="selected"><a href="#0">Intro</a></li> <li><a href="#0">Tech 1</a></li> <li><a href="#0">Tech 2</a></li> </ul> </nav> </div> <!-- .cd-slider-nav --> </section> <!-- .cd-hero --> <main class="cd-main-content"> <p>I'd love to hear from you.</p> </main> <!-- .cd-main-content --> 

Answer 1

Here's one quick and simple way:

In your CSS...

1. Remove position: absolute from .cd-full-width .
2. Add body { display: flex; } body { display: flex; }
3. Add width: 100% to .cd-hero .

DEMO

---

Note that flexbox is supported by all major browsers, except IE 8 & 9 . Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes . For a quick way to add all the prefixes you need, post your CSS in the left panel here: Autoprefixer .

Answer 2

For my first suggestion, i would wrap both elements in a container:

<div class="hero-main-container">
  <section class="cd-hero">[...]</section>
  <main class="cd-main-content">[...]</main>
</div>

and then in your css, add the following:

.hero-main-container {
  display: flex;
  flex-direction: row;
}
.cd-hero, cd-main-content {
  width: 50%;
}

If wrapping them in a container is not an option, positioning them side-by-side would be a second option:

//css
.cd-hero {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 50%;
}
.cd-main-content {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 50%;
}