Can you show me a method to integrate this HTML and CSS code into a Teachable page successfully?

Hey there, I've been encountering some challenges while working with HTML and CSS on a platform known as Teachable.

Essentially, I'm aiming to create a layout with 2 columns: - Column 1 - Image - Column 2 - Text

Whenever I apply <div class="column"> solely to Column 1, it results in this:

However, upon adding <div class="column"> to both sections, the layout appears as you can see here.

You'll notice that column 2 becomes quite narrow in this scenario. Is there a way to adjust things so that column 1 takes up around 25% of the width, while column 2 occupies about 75%?

Below is the CSS code I currently have:

/* Three image containers (use 25% for four, and 50% for two, etc) */
.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}

/* Clear floats after image containers */
.row::after {
  content: "";
  clear: both;
  display: table;
}
htmlcss

Answer №1

/*I've customized the classes for the image and text div sections*/
/*column-1 represents the image div*/
.column-1 {
  float: left;
  width: 25%;
  height: 100%;
  padding: 5px;
}

/*Set img width to 100% to fill the div container*/
img {
  width: 100%;
}

/*column-2 is the text div*/
.column-2 {
  width: 75%;
  padding: 5px;
}
/*Adjust padding and width as per your requirements.*/
<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="column-1">
      <img src="SS_img_01-2-s.jpg">
    </div>
    <div class="column-2">
      <p>
        It appears that column 2 becomes very narrow in this scenario.
        It appears that column 2 becomes very narrow in this scenario.
        (Repetition of the previous sentence continues...)
      </p>
  </body>
</html>

This is my interpretation of what you're attempting to achieve, but there may be room for error.

Edit: Adding 'height: 100%' to column-1 might resolve the issue unless additional elements need to be included below the image. If further content needs to be added beneath the image, utilizing z-index and correct positioning should suffice. Make sure to validate the functionality yourself since the code snippet may not display the actual result correctly.

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

Using JavaScript to listen for events on all dynamically created li elements

Recently, I've created a simple script that dynamically adds "li" elements to a "ul" and assigns them a specific class. However, I now want to modify the class of an "li" item when a click event occurs. Here's the HTML structure: <form class ...

javascripthtmlcss

The Ajax request is successful on one server but fails on another

I have implemented an ajax call to the UPS address validation webservice. The call is successful when made from my application using this domain: http://serverone.org/addrvalidator. However, if I try using a different domain or an IP address instead of th ...

htmlajaxcross-domaincross-domain-policycross-domain-proxy

Ensure that the Div element remains visible on the screen while contained within a

Is there a way to maintain the position of elements on the right side of a div without using position: fixed, while still keeping the div within its parent container? See the desired layout. I need the "Stays in view" element to stay within its parent div ...

htmlcss

Using CSS to style PHP function results

I am working on a shopping cart application and I want to incorporate a condensed version of the cart onto my home page. The main shopping cart page is called 'modcart.php' and I have managed to integrate it into my homepage using the following c ...

phpcss

Dynamic insertion of the current page's id into href links

Below is a link from a specific WordPress plugin: <a href='".home_url("?p=7&action=get_marks&id=$select_data2->id")."' ></a> I am looking to automatically detect the page_id when clicked for reloading the same page, like ...

phphtmlwordpress

Struggling with implementing ng-repeat in AngularJS for displaying HTML content

I stumbled upon a post that covers pretty much what I'm trying to achieve: AngularJS - Is it possible to use ng-repeat to render HTML values? Currently, the code appears like this and displays correctly as text: <div ng-repeat="item in items.Item ...

javascripthtmlangularjs

Tips for emphasizing a chosen hyperlink within a jQuery Mobile panel

I am currently working on a jquery mobile page that includes a navigation menu in a sliding panel. While the functionality is good, I am looking to enhance the user experience by highlighting the selected link in the navigation. Typically, I would utilize ...

jquerycssjquery-mobileselecteditem

Designing a navigation system that revolves around a central logo image

I have created a navigation bar that you can see in this image: https://i.stack.imgur.com/eT4TL.jpg Using foundation to construct a website, I have designed the nav bar in the following manner: HTML: <nav class="top-bar"> <ul> ...

csshtmlzurb-foundation

Which programming language is best suited for this task?

Seeking assistance with changing an image inside a div to another image with a simple mouse click. Wondering if this can be achieved through CSS or if jQuery would be the better option. Here is the code snippet: <div id="slideshow"> <img ...

jqueryhtmlcss

Space between Logo Header and Navigation Bar

Recently, I attempted to create a new header with a responsive logo and menu. After seeking guidance from StackOverflow experts, everything seems to be functioning correctly now. However, I am facing an issue regarding the gap between the header and navba ...

htmlcss

Issue with cursor behavior in contenteditable field on Chrome

Recently, I encountered an issue where the cursor would jump to the wrong place when a user clicked inside a contenteditable div, but not directly on the text. This problem seems to be isolated to newer versions of Chrome and Opera. Interestingly, when I t ...

htmlcssgoogle-chromecontenteditableblink

Using jQuery to dynamically add or remove CSS classes to an element based on the selected radio button

Currently, I am attempting to utilize localstorage to save a class based on the selected radio button. Essentially, when the second radio button is clicked with the data-color attribute "color2", the goal is to apply that data as a class to the .box elemen ...

jqueryhtmllocal-storage

I successfully managed to ensure that the splash screen is only displayed upon the initial page load. However, I am now encountering an issue where it fails to load again after I close the page. Is there any possible solution

After successfully implementing a splash screen that only plays once on page load, I encountered an issue. When I close the tab and revisit the page, the splash screen no longer plays. Is there a way to fix this problem? Perhaps by setting a time limit for ...

javascripthtmlcsscss-animationssplash-screen

What is the best way to add a line break to a menu item?

Looking for some assistance with Angular Material here. I am trying to design a menu that includes an item with two lengthy paragraphs, but the text is getting truncated and only showing the first paragraph. If anyone could offer guidance or help, it woul ...

htmlcssangularangular-materialmenuitem

Tips for defining conditions within the style attribute in JSP

Below is the code that I attempted: <div style="width:85%;"> <input class="formbutt" value="AddNew" title="AddNew" type="button" style="{(${projectEnvironmentBean.divStyle}=='dipslay:none') ? 'display:block' :'display: ...

cssjspjpa

What is the best method for organizing data in rows and columns?

I attempted to use my map function to iterate over the data and display it, but I struggled to format it into rows and columns. The requirement is for 5 fixed columns with dynamically changing rows, making array indexing impractical. Here is the code snip ...

javascripthtmlcssreactjstailwind-css

Floating elements overlapping fixed elements

I am currently in the process of developing a mobile application and encountering an issue with relative divs overlapping the top and bottom headers fixed with a z-index. Despite my attempt to resolve this by adding a z-index to the relative div, the probl ...

htmlcss

CSS vertical text not functional as expected

Trying to make some text vertical, here is the CSS I'm using: h2.verticle{ color:#1a6455; border:0px solid red; writing-mode:tb-rl; filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); -webkit-transform:rotate(90deg); -moz-transform:rota ...

css

pressing the button again will yield a new outcome

I am looking to disable a button (material ui) when it is clicked for the second time by setting disabled={true}. Unfortunately, I have not been able to find any examples related to this specific scenario on StackOverflow. <Button onClick={this.s ...

javascripthtmlcssreactjstypescript

Switching hover behavior on dropdown menu for mobile and desktop devices

I have implemented a basic JavaScript function that dynamically changes HTML content based on the width of the browser window. When in mobile view, it removes the attribute data-hover, and when in desktop view, it adds the attribute back. The functionalit ...

javascriptjqueryhtmlcsstwitter-bootstrap