basic two-column design

Located at the end of this page, you will find two distinct columns. On the right side, there is a Twitter feed, while the left side showcases a YouTube video and a comments section. Below is the HTML and CSS code that was used to create these columns:

.leftCol {
    margin-right: 365px;
}

.rightCol {
    float: right;
    margin-bottom: 10px;
    width: 355px;
}

<div class="rightCol">
<div>

<div class="leftCol">
<div>

The issue arises where the left-hand column fails to move up into the space on the left of the right-hand column, for reasons that remain unclear.

htmlcsscss-float

Answer №1

To fix the issue, simply delete the clear: both; from the inline style of your 

<h2 class="banner bgImage video">
.

Answer №2

Revise the styling for .leftCol to:

.leftCol {
    float: left;
    width: 365px;
}

The margin is giving the impression of extra space on the right side of the left column.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to align this in a horizontal inline block?

I have this element and I would like it to display inline-block but horizontally. Currently, it is displaying as inline-block but vertically. Here is my HTML: <div class="ondisplay"> <div class="left-text"> <p&g ...

htmlcss

Converting Apache POI Word documents to clean HTML stripping out styles and superfluous tags

I am currently working on converting Word documents to clean HTML. I have been using Apache POI, but it seems to create messy output similar to MS Word's own HTML saving method. What I really need is a solution like the one offered by . For instance, ...

javahtmlcssms-wordapache-poi

Iterating over an array and displaying elements on the webpage

Struggling to access an array and loop through it, but only able to print out one element instead of all. Need a hint on how to solve this issue. See my code below: let toppingsCount; const burger = document.createElement('div'); const toppingsD ...

javascripthtmlcssdomcss-selectors

background with alternating stripes to decorate the border of a div

Is it possible to give a striped effect to a div element's border using jQuery? Consider the following code snippet: <style type="text/css"> #panel { padding: 50px text-align: center; background-color: #e5eecc; bord ...

jqueryhtmlcss

What is the best way to place text side by side with an image?

How can I align text below a picture like this? https://i.stack.imgur.com/WcNRa.jpg Here is the code snippet: https://jsfiddle.net/vzjj9eLy/ HTML: <span class="test"> <img src="http://cdn.sstatic.net/Sites/stackoverflow/img/<a href="/cd ...

htmlcss

Can the text value be read and its strings changed?

I need to modify the message inside an H2 element with the code provided below. I want to change the text from No results were found for this query: <em class="querytext"> to "No results were found by hello world!, but the catch is that I cannot di ...

javascripthtmlcss

Preview images in the Image Carousel bullet lineup

I've created an awesome image carousel using HTML and CSS. The carousel includes three bullets at the bottom that display a preview image when hovered over. Currently, there is a transition effect as the picture slides up and down. Is there a way to m ...

htmlcss

Concealing and revealing content using JQuery based on user input in

I'm attempting to create a feature where the visibility of a password field is determined by the value of another input element. For instance, when the username is set to "admin", the password field should be hidden. If any other value is entered in ...

javascriptjqueryhtmltogglebutton

"Redirecting visitors based on their location using GeoIP targeting for

Is there a way to implement a code that redirects users based on their location? For example, if a user accesses the site from the United Kingdom, they should be redirected to /UK/, if from the US to /US/, and if from anywhere in the EU (excluding the UK) ...

javascriptjqueryhtmlcssgeoip

IE9 does not properly display SVGs used as background images

Utilizing SVG files as backgrounds for my HTML elements has been successful in most major browsers. However, an issue arises when trying to ensure compatibility with Internet Explorer 9. The problem lies within IE9's rendering of the SVG backgrounds, ...

htmlcsssvginternet-explorer-9background-image

What is the best way to reset the 3rd dynamic dropdown menu once a new selection is made in the 1st dropdown menu?

I have been working on creating a dynamic dropdown using Jquery ajax and json in js. Almost everything is working as expected, except for one issue that I am facing. The problem arises when I select an option in dropdown A, which then loads items into drop ...

javascriptjqueryhtmljsonajax

How can I position the close button correctly in a bootstrap popup modal?

I have a basic bootstrap popup modal. Currently, the close X button is centered within the popup window, but I would like to align it to the right corner instead. Is there a way to achieve this? <div class="modal fade" id="checkNameSurvey-modal" data ...

htmltwitter-bootstrap

When a new VueJS project is created, it failed to automatically install the necessary basic HTML files and folders

Hey there, I am completely new to Vue.js. Just recently, I installed the Vue.js/CLI and created a brand new project using vue create test. This prompted me to choose from three options: > Default ([Vue 2] babel, eslint) Default (Vue 3 Preview) ([Vue 3 ...

javascripthtmlvue.jsvue-clijavascript-framework

Ways to make a div grow to occupy the leftover width without resorting to the overflow: hidden technique

<div id="container" style="width:100%;"> <div id="left1" style="float:left; width:100px;">float left</div> <div id="left2" style="float:left; width:100px;">float left</div> <div id="remaining">Remaining width&l ...

htmlcssexpand

How can I adjust the Bootstrap container width without it changing when resizing the browser window?

As I work on developing my website, I am utilizing Twitter's bootstrap grid system. Despite my efforts, I have been unable to find a solution for fixing the width of the site. My goal is to lock the size in place so that it remains constant regardless ...

htmlioscsstwitter-bootstrapgrid

Creating space between elements in CSS div elements

I've come across numerous resources on this topic that have already been answered, but none of them have provided a satisfactory solution. Here's the scenario: I have created a basic fiddle showcasing the desired behavior: @ See fidlle If I h ...

htmlcss

Encountering an issue with html2canvas: receiving an error message stating "object

To print the div using Javascript, I encountered an issue with the generated barcode not appearing in the printed page. This led me to use the html2canvas approach to 'render' the div before printing it out. Here is the code snippet: HTML: < ...

javascriptphphtmlhtml2canvas

Generate a loop specifically designed to execute the code following the menu in the script

My website has the code snippet below: let txt_com = document.querySelector(".text_user"); let num_com_user = document.querySelector(".massage_for_user"); txt_com.addEventListener("click", function() { if (this.classList.contains("num_com_user")) { ...

javascripthtmlcss

Guide on displaying the <html> tag within text using AngularJS

I need to display some data in HTML, which looks like this: <p>abcd efg hijk....(<a href=\"http:\/\/www.facebook.com\/stock\/NBR\">NYSE:NBR<\/a>),, however, there are some HTML tags within ...

htmlangularjs

Exploring the contrast between window and document within jQuery

I'm curious about the distinction between document and window in jQuery. These two are commonly utilized, but I haven't quite grasped their differences. ...

javascriptjqueryhtmlcss