What is the best way to adjust the height of the second column downwards?

I am trying to achieve a 2-column layout with both columns at the same height.

This is how it currently appears:

And this is how I want it to be:

Here is my code snippet:

html {
  background-color: lightblue;
  font-family: Tahoma, Geneva, sans-serif;
  margin: 0 auto;
}

#service {
  padding-top: 40px;
  margin-left: 40px;
  height: 600px;
  width: 100%;
  margin-bottom: 50px;
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
}

#service .service {
  Margin-left: 30px;
  color: #c0392b;
  font-size: 45px;
}

#service .service_txt {
  margin-left: 30px;
  margin-right: 50px;
  color: #fff;
  top: 190%;
}
<div id="service">
  <p class="service">service</P>
  <p class="service_txt">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
    quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
    Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
    Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
  </p>
  <p><img class="service_img" src="img/service.jpg"></p>
</div>
htmlcss

Answer №1

It seems like the goal is to align the top of both text columns, correct?

To achieve this, remove the <p> from the reflow columns so that it matches the width of the text, thus ensuring both text columns start at the same height. Additionally, make sure to adjust the margins accordingly.

Another issue to address is the absence of units in your CSS declarations. For example, margin: 40 is not valid syntax; you should specify a unit such as pixels (px), ems (em), percentages (%), etc. The only exception is when setting a value to 0, as the unit becomes irrelevant in that case.

Furthermore, simplify your naming convention. Avoid using complex aliases like #service .service; opt for more semantic names and consider refraining from utilizing the id attribute altogether.

html {
  background-color: lightblue;
  font-family: Tahoma, Geneva, sans-serif;
  margin: 0 auto;
}

.wrapper {
  margin-left: 40px;
  height: 600px;
  width: 100%;
  margin: 0 auto;
  margin-bottom: 50px;
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
}

.title {
  margin-left: 30px;
  color: #c0392b;
  font-size: 45px;
}

.wrapper .text {
  margin-top: 0; /*Add this or your first columns will start below the second*/
  margin-left: 30px;
  margin-right: 50px;
  color: #fff;
  /*top: 190% This does nothing useful*/
}
<p class="title">service</p> <!-- Move this outside the service div -->
<div class="wrapper">
  <p class="text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
    quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
    Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
    Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
  </p>
  <p><img class="service_img" src="img/service.jpg"></p>
</div>

Answer №2

To define the layout of text container columns, apply the columns property as shown below:

html {
  background-color: lightblue;
  font-family: Tahoma, Geneva, sans-serif;
  margin: 0 auto;
}

#service {
  padding-top: 40;
  margin-left: 40;
  height: 600px;
  width: 100%;
  margin: 0px auto;
  margin-bottom: 50;
  
}

#service .service {
  Margin-left: 30;
  color: #c0392b;
  font-size: 45;
  display: inline-block;
  width: 100%;
  
}

#service .service_txt {
  margin-left: 30;
  margin-right: 50;
  color: #fff;
  top: 190%
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
}
.service_img {
display: block;
margin: 10px 0px;
}
<div id="service">
  <p class="service">service</P>
  <p class="service_txt">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
    quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
    Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
    Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
    <img class="service_img" src="http://fakeimg.pl/250x100/">
  </p>
  
</div>

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

Dynamic Content Sorting with JavaScript and jQuery

I am presenting various courses that are available, and I am utilizing JavaScript/jQuery to display or hide them based on element classes. You can view the page here. Currently, the script conceals all content on the page and then reveals items that matc ...

javascriptjqueryhtml

What is the best way to ensure that a component remains the highest layer on a react-leaflet map?

I am encountering an issue where the table on my page only shows for a brief second when I refresh the page, and then it disappears. The Map Component being used is a react-leaflet map. I would like to have a component always displayed on top of the map wi ...

javascriptcssreactjsreact-leaflet

Angular: bypassSecurityTrustHtml sanitizer does not render the attribute (click)

I'm facing an issue where a button I rendered is not executing the alertWindow function when clicked. Can anyone help?: app.component.ts: import { Component, ElementRef, OnInit, ViewEncapsulation } from '@angular/core'; import ...

htmlangulartypescript

What is the best way to align li elements in a ul list at the

How can I center ul elements on a web page? I have checked similar questions on this site and tried using text-align in my CSS file to center the elements, but it didn't work as expected. I also attempted to use margins which did center the elements, ...

htmlcsstwitter-bootstrap

Attempting to verify the HTML output, yet it remains unspecified

After developing a basic testing framework, I have set myself the challenge of creating a single-page web application using vanilla JavaScript. I've been facing difficulties in figuring out why my view test is not recognizing the 'list' con ...

javascripthtmlunit-testingtesting

CSS3 pulsating circular Firefox bug

I am currently working on a CSS3 pulsing circle (animating scale to 1.1). To address a jumpy animation issue in Firefox, I have added a slight rotation. animation: button_pulse 2s infinite ease-out; transform: scale(1.1) rotate(0.1deg); Despite this adju ...

firefoxcss

Tips for Choosing Two Classes Using CSS

I'm currently exploring ways to select two classes so that when one of them is hovered over, a specific animation will occur. Here is my latest attempt: .news1 { -webkit-filter: blur(3px); filter: blur(3px); -webkit-transition: .3s ease-i ...

htmlcss

Angular: Oops! Encountered some template parsing issues: Surprising closing tag encountered

Recently, I created a brand new project with Angular CLI on 05/25/17. I decided to copy and paste some HTML code into a new component in the project. Surprisingly, this HTML code, which worked perfectly fine as its own standalone page, is now causing compi ...

htmlangularhtml-parsing

Attempting to showcase extensive content based on the selection made in a drop-down menu

As a newcomer to anything beyond basic HTML, I am seeking guidance and assistance (preferably explained at a beginner level) for the following issue. If I have overlooked any crucial rules or concepts in my query, I apologize. I aim to have each selection ...

javascriptphphtml

Is there a way for me to align my div with my header on the same line?

HTML: <h2> RAN shares false news story about Hershey's Oil Commitment</h2> <div class="date"> <div class="number">27</div> <div class="month">Oct</div> </div> <p>The Rainforest Action Netwo ...

csshtml

Guide on invoking a JavaScript function within a jQuery upon a specific event, such as clicking a hyperlink

I have a website page where I display some important information. However, I want to make this text hidden initially and only visible when a user clicks on a specific link or button. I attempted to achieve this functionality using the following code snippe ...

javascriptjqueryhtml

Utilizing jQuery to Perform Calculations with Objects

Can someone help me with a calculation issue? I need to calculate the number of adults based on a set price. The problem I'm facing is that when I change the selection in one of the dropdown menus, the calculation doesn't update and continues to ...

javascriptjqueryhtmllogic

Tips for recalling the display and concealment of a div element using cookies

My HTML code looks like this: <div id='mainleft-content'>content is visible</div> <div id="expand-hidden">Button Expand +</div> To show/hide the divs, I am using JQuery as shown below: $(document).ready(function () { ...

javascriptjqueryhtmlcsscookies

Utilizing a server for seamless communication between a mobile device and a website

Exploring a simple setup idea here: Imagine having a mobile app with a page that contains 4 lines of content (utilizing phonegap for development). The plan is to have a web page where data for those 4 lines can be inputted. Once the information is submitt ...

javascriptphphtmlajax

developing a fresh node within the jstree framework

Recently, I have been working on creating a node using crrm as shown below $("#TreeDiv").jstree("create", $("#somenode"), "inside", { "data":"new_node" }); This specific function is triggered by a wizard, enabling me to seamlessly create a new node withi ...

javascriptjqueryhtmlcssjstree

What is the best way to conceal a menu that automatically scrolls to the content when it is clicked?

Below is a Codepen with a menu that isn't behaving as expected. var menu = document.querySelector('.nav__list'); var burger = document.querySelector('.burger'); var doc = $(document); var l = $('.scrolly'); var panel = $ ...

javascriptjquerycss

Interact with one div to trigger changes in another (CSS)

I successfully influenced the style of one div when hovering over another div using the "+" selector, but I would prefer to find a different solution. My goal is for this interaction to work even if the .h div and the .t div are located in separate parent ...

htmlcsshoverselector

Dynamic reloading of a div with form data using jQuery's AJAX functionality

I am currently developing an online visitor chat software using PHP and MySQL. My goal is to load the page when the submit button is clicked. Submit Button ID: send Visitor ID: vid Chat ID: cid Below is the snippet of code for an Ajax request that I hav ...

javascriptphpjqueryhtmlajax

Is there a way for me to attach a link to a picture displayed in a lightbox that directs to an external ".html" file?

I have a platform where users can view images in a gallery and when they click on an image, it opens up in a lightbox. I am trying to add a feature where the opened image can be clicked again to redirect the user to an external page. I attempted to nest t ...

javascriptcsshtmllightbox

Showcase a sizable picture broken down into smaller sections

I am interested in creating a mapping application similar to Google Maps that can asynchronously load images from the backend. I am seeking guidance on where to begin and how to proceed in this endeavor. The ultimate goal is to have the image displayed w ...

javascriptjqueryhtml