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

What techniques can be employed to create a fully operational web application using AngularJS?

I have taken on the challenge of understanding AngularJS by creating a webapp. Within my Eclipse environment, I am working with 4 files: main.js, index.html, view1.js, and view2.html. Currently, I can get index.html to load when Tomcat is running. Embedd ...

javascripthtmlangularjseclipseweb-applications

Tips for utilizing fontawesome effectively in a select menu

I'm having trouble displaying fontawesome icons in a select element, as they do not appear correctly in the drop-down list. .FontAwesomeSelect { font-family: Font Awesome\ 5 Free; font-size: 18px; } <link href="https://use.fontaw ...

cssfont-awesomefont-awesome-5

What is the best way to horizontally center an image with a transparent background using CSS?

A search button triggers a processing gif image to appear in the center with a transparent background. The content of this function is described below. Thank you for all responses. .img-loader{ text-align: center; width: 50px; display: block; ma ...

htmlcss

use css to align multiple div elements

I am struggling to line up more than five div tags on the same line. Here is my CSS: <style> #yes { float: left; width: 18%; margin:1px; } </style> Example of HTML code: echo '<div id="yes">'.'<b>'.'Job T ...

htmlcss

A guide on using Xpath to compare content between two tags

I am facing the following scenarios with $html contents. I am trying to determine if the html content starts with a media element (such as an image, video, or iframe) without any text content, similar to the third scenario below. //no contetn between firs ...

phphtmlxpath

PHP code snippets do not interfere with one another's styles

header.php: <div class="purple-box"> <!-- Header content --> </div> <style> .purple-box { /* Styles for purple box in the header */ } </style> footer.php: <div class="purple-box"> <!-- Foo ...

htmlcss

Angular2 material dropdown menu

Currently, I am studying angular2 with its material design. One of the modules I am using is md-select for material and here is a snippet of my code: <md-select> <md-option value="1">1</md-option> <md-option value="2">2< ...

cssangularangular-material

Show whether the day is even or odd with the JavaScript getDay object

I'm currently working on a task where I need to show the text "Even Day" if the day of the month is 2, 4, 6..., and "Odd Day" for days such as 1, 3, 5, and so on. I attempted to achieve this by setting up an array linked to the getDay object, but unfo ...

javascripthtmlarraysdate

`Inconsistency in image width behavior observed in Opera browser`

I am very new to HTML and CSS3. I am teaching myself as I work on creating a new website. For some reason, my image gallery is not displaying properly in Opera browser. The width of portrait images appears distorted only in Opera, whereas landscape images ...

htmlcssoperaimage-size

JavaScript: Selecting parent elements using getElementsByClassName

I am dealing with the following HTML code: <div class="item"> <img class="item-image" src="${item.getImage()}"/> <p>${item.getName()}</p> </div> and JavaScript: var classname = document.getElementsByClassName("item" ...

javascripthtmlcss

What could be the reason behind an Ajax Auto-Complete feature suddenly malfunctioning when moving to a new page within the same website?

Working on a website featuring an auto-complete search box powered by Ajax, Javascript, and PHP. As the user types into the search box, an ajax request triggers a php file to query a database and return possible results. Everything works smoothly until the ...

javascriptphphtmlajaxautocomplete

Ways to ensure that an svg image is perfectly sized to its parent container

I'm exploring the svg <image> tag for the first time. I've decided to use this tag to apply a gray filter on an image (thanks, IE). Check out my HTML code below: <div class="container"> <div class="item"> <svg version ...

htmlcsssvg

Toggle the visibility of a hidden div by clicking a button

After spending several days working on this project, just when I thought it was perfect, I had to completely restructure the entire page. Now I'm feeling stuck and in need of some help. The issue is that I have three images with buttons underneath eac ...

javascriptcssbuttonanchorhidden-field

Determining the file size of an HTML and JavaScript webpage using JavaScript

Is there a way to determine the amount of bytes downloaded by the browser on an HTML+JS+CSS page with a set size during page load? I am looking for this information in order to display a meaningful progress bar to the user, where the progress advances bas ...

javascripthtmlcss

What could be causing my scrollable div to not function properly within a Bootstrap modal?

I am facing a frustrating issue. I have a simple DIV element that I want to make scrollable, containing a table inside it. The process should be straightforward as I have a separate .html file with the code that functions correctly. Here is an excerpt of ...

csstwitter-bootstraphtml

Offspring of a parent with a "flex: 1" attribute and a grandparent with a "min-height" property defying the "width: 100%" rule

Is it possible to have a hidden footer just below the screen's bottom and allocate the remaining height to content children without inheriting max-height all the way down? The "Grand child" element is not occupying the full height: body { marg ...

htmlcss

disable full page scrolling on iOS devices

Can you achieve elastic scrolling for a single absolutely positioned div in Mobile Safari without causing the entire page to move up and down? Check out this basic example that illustrates the problem: <!doctype html> <html> <head> ...

javascripthtmlioscssmobile-safari

A step-by-step guide to implementing Google Analytics Event tracking using PHP

Implementing Google Analytics Events in Javascript can be done using the following code: ga('send', 'event', 'test', 'test','value'); I am trying to incorporate this feature throughout my entire project. ...

javascriptphphtmlgoogle-analytics

Revamping Slideshows: Bringing CSS Animation to JavaScript

/* JavaScript */ var slides=0; var array=new Array('background.jpg','banner.jpg','image.jpg'); var length=array.length-1; $(document).ready( function(){ setInterval(function(){ slides++; ...

javascripthtmlcss

What is the best way to obscure or conceal images of runners?

I am trying to figure out how to blur or hide the runner thumbnails on different streaming sites, such as Prime Video. I typically use the Amino: Live CSS Editor chrome extension or uBlock Origin to manipulate elements on websites. However, I am struggling ...

htmlcss