Utilize CSS to design columns that have identical heights

I am trying to create 2 columns with equal height and have a link with the class "link-arrow" positioned 10px from the bottom of each column. You can view the issue I'm facing at this jsfiddle link.

Here is the HTML code:

<div class="block">
    <div class="image-wrap">
        <img src="http://img6.imageshack.us/img6/3977/84462809.png" alt="" />
    </div>
    <div class="right-item">
        <h2>Our Operations</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
        <a href="javascript:;" class="link-arrow">
            View our operations
        </a>
    </div>
</div>

And here is the CSS code:

.block {
    width: 315px;
    float: left;
    background: red;
}
.image-wrap {
    float: left;
    width: 112px;
    overflow: hidden;
    border: 1px solid #dfdfdf; 
    background: blue;
}
.right-item {
    margin: 0 0 0 13px;
    width: 186px;
    float: left;
    position: relative;
    background: green;
}
.link-arrow {
    position: absolute;
    left: 0;
    bottom: 10px;
}
img {
    width: 100%;
}
h2 {
    font-size: 18px;
    line-height: 14px;
    padding-bottom: 13px;
    border-bottom: 1px solid #c4c4c4;
    margin-bottom: 13px;
}

Is there a way to achieve this layout using just CSS?

Thank you!

csscross-browserinternet-explorer-7

Answer №1

If you're looking for an HTML element that can adjust its height to match others, consider using the <td> element with display: table-cell;.

You can check out this solution here: Keeping two div the same length

Create a table-like structure using the display property:

HTML

<div class="table-div" style="width:100%">
    <div class="tr-div">
        <div class="td-div">td-div 1a</div>
        <div class="td-div">td-div 2a</div>
        <div class="td-div">td-div 3a</div>
    </div>
    <div class="tr-div">
        <div class="td-div">td-div 1b</div>
        <div class="td-div">td-div 2b</div>
        <div class="td-div">td-div 3b</div>
    </div>
</div>

CSS

.table-div{display:table}
.tr-div{display:table-row}
.td-div{display:table-cell;border:1px solid silver}

No need for JavaScript.

Check out the live demo on jsFiddle: http://jsfiddle.net/sPm9M/

Answer №2

If you are confident that the left column will be larger, an option is to utilize absolute positioning on the text. You can refer to this example on jsfiddle for reference. Essentially, .block is assigned a relative position and the right-hand column is styled as follows:

.right-item {
    margin: 0 0 0 13px;
    width: 186px;
    position: absolute;
    background: green;
    top:0; bottom:0; right:0;
}

Answer №3

Using CSS Tables for Layout

If you're unsure whether the left or right column will determine the height of the parent container, consider using CSS tables like this:

The HTML:

<div class="block">
    <div class="image-wrap">
        <img src="http://img6.imageshack.us/img6/3977/84462809.png" alt="" />
    </div>
    <div class="spacer"></div>
    <div class="right-item">
        <h2>Our Operations</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <a href="javascript:;" class="link-arrow">
        View our operations
        </a>
    </div>
</div>

The CSS:

.block {
    width: auto; 
    float: left;
    background: red;
    position: relative;
}
.image-wrap {
    display: table-cell;
    vertical-align: top;
    width: 112px;
    background: blue;
}
.image-wrap img {
    vertical-align: top; 
}
.spacer {
    display: table-cell;
    vertical-align: top;
    width: 15px;
    border-right: 1px solid #dfdfdf; 
    border-left: 1px solid #dfdfdf; 
}
.right-item {
    display: table-cell;
    vertical-align: top;
    width: 186px;
    background: green;
    padding-bottom: 2.00em; 
    padding-left: 10px;
    padding-right: 10px;
}
.link-arrow {
    position: absolute;
    left: 137px; 
    bottom: 10px;
}

To control spacing more precisely, you can add a third column div.spacer to separate the left and right columns if needed. Borders can also be added for further customization.

The positioning of .link-arrow requires special consideration. Absolute positioning doesn't work within table cells, so it should be positioned with respect to the containing block (.block). Manually adjust the left offset and include bottom padding on .right-item to prevent text overlap.

For a demo, check out this fiddle: http://jsfiddle.net/audetwebdesign/sFY7v/

Answer №4

Give this a shot:

Before getting started, make sure you have jquery installed in order for this plugin to function correctly.

Follow the link provided below for guidance on how to achieve the desired outcome:

Answer №5

To ensure proper alignment, be sure to set a specific height for the .right-item component.

.right-item {
    margin: 0 0 0 13px;
    width: 186px;
    float: left;
    position: relative;
    background: green;
    height: 200px;
}

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

Maintain correct aspect ratio when zooming in the body

I'm facing a challenge with my single-page web application that has fixed width and height. It doesn't scale properly to fit the page at all times. Scaling based on its width works fine, but I want to achieve scaling from both width and height w ...

jquerycsszoomingaspect-ratio

Flexbox - managing wrapping on legacy devices

Utilizing flexbox, I have successfully designed a 2 column layout with a div at the top spanning both columns for a menu format. While this works flawlessly in Chrome and iOS7, it appears to be ineffective in outdated versions of Safari. In this fiddle, yo ...

htmlcssflexbox

Is it possible to style a strikethrough item in a list using CSS?

Within this list, I want to use CSS to indent any list item that drops a line. I attempted to achieve this using the following CSS: li:not(::first-line) { text-indent: 15px; } Unfortunately, it doesn't seem to be working as expected. Here is an exa ...

htmlcss

Tips on properly showcasing user input in this code

I am struggling to make the "Custom" option appear inline with some text and input boxes, like this: Custom: I would like [ ] x [ ]. However, the display of the text boxes is not working due to a hidden attribute. I attempted to add the following CSS: ...

css

Upon completing the upload, dropzone.js displays checkmark and x icons for confirmation

It seems like there may be a CSS problem. When I programmatically create a dropzone box, I notice that the checkmark and x icons, along with other text, appear after the upload (see image link). <div id="header-dropzone"></div> $("#header-drop ...

javascriptcssdropzone.js

Triggering an automatic pop-up window using JavaScript based on a PHP condition

I have developed a hidden pop-up box that becomes visible when targeted, with its opacity increasing to one. I am aiming for the pop-up to appear if the user is identified as a "firstTimeUser," a status saved in a PHP $_SESSION variable. However, I am stru ...

javascriptphphtmlcss

Ensure a div stays on a single line when viewed in Internet Explorer

My current setup is structured in the following way. <div id="header"> <div id="heading">Title</div> <div id="flow"> Enter Something: <input type="textbox" size="30" id="id" class="class" onkeyup="dosomething()" /> &l ...

jqueryhtmlcss

Achieve vertical center alignment of text without using line height or table cells

Looking to add a "toggle" animation on my Teaser, here's the code: .ax { height:60px; width:150px; background:gold; } .caption { position: absolute; left:0; top: 35%; overflow: hidden; right: 0; background-colo ...

cssvertical-alignment

Condense a lineup of names into only two rows

I have a challenge where I need to showcase a list of names separated by commas, pulled from an array in my React component. The HTML output should appear as follows: <div> <span>Liza</span>, <span>Eric</span>, <span>Mic ...

javascriptcssreactjs

What is the best way to apply CSS styles to a child div element in Next.js?

I'm currently working on enhancing the menu bar for a website project. Utilizing nextjs for my application I am aiming to customize the look of the anchor tag, however, encountering some issues with it not rendering correctly. Here is a snippet of ...

javascriptcssreactjsnext.js

Ways to calculate the total order amount when the quantity is modified

The order entry form includes columns for product name, price, and quantity: <table id="order-products" class="mobileorder-table"> <colgroup> <col style="width: 80%;"> <col ...

javascripthtmlcssjavascript-objectsonblur

Make the background disappear when the text field is left empty and the cursor is not present (onUnfocus)

When the text field is empty and there is no cursor in the text field, I want it to be transparent and for the spell checker not working. The result should be displayed a little to the left inside a <div>. Should this be done using CSS, JavaScript, ...

javascriptphpjqueryhtmlcss

Incorporating CSS Styles in Dompdf Library for Codeigniter

Although I am able to generate a PDF file from the Codeigniter Framework using the Dompdf library, the generated PDF does not retain the styling I applied to the page. How can I ensure that CSS is rendered together with the HTML content in the PDF? The fu ...

csscodeigniterbootstrap-4dompdf

Can you suggest a method for randomly arranging the display of submitted input?

I'm still learning javascript and primarily focus on front end development. I want to display user submissions in a randomized manner on the screen, even if it means that everything gets wiped away upon refreshing the page. Currently, this is my code ...

javascripthtmlcssrandominput

What is the reason this :class="{}" is not functioning properly in Vue.js?

I have created a simple file that contains a reactive Array of objects where each object has a property called "checked" which is a boolean that toggles based on a checkbox. I am using a v-for directive to iterate through the array of employees and render ...

javascriptcssvue.jsfrontendvuejs3

Using jQuery to control mouseenter and mouseleave events to block child elements and magnify images

My objective is to create a hover effect for images within specific div elements. The images should enlarge when the user hovers their mouse over the respective div element. I plan to achieve this by adding a child element inside each div element. When the ...

javascripthtmljquerycss

Tips for concealing the image title when hovering over it

In this section, I will be including a title for an image that I will also need for another purpose. However, I do not want this title to be shown when the image is hovered over. Your prompt response would be greatly appreciated. Thank you in advance. ...

javascriptjqueryhtmlcssimage

Having trouble with the Bootstrap float right class? Your buttons are refusing to respond?

Currently, I am experimenting with ExpressJS and EJS rendering. I have noticed that the Bootstrap float-right class is not working properly on the navbar. I even attempted using d-flex, but the issue persists. I am unsure if I am missing something in my co ...

cssnode.jsexpressbootstrap-4ejs

Dim the opacity of a div by selecting a checkbox

Is there a way to gray out or disable a specific div when a checkbox is checked? I could use some guidance with an example on JSfiddle perhaps? Here is the code snippet: http://jsfiddle.net/albertoc/vFrAB/5/ HTML: <div id="wrap" style="width:500px"&g ...

javascriptjqueryhtmlcss

Troubleshooting: Fixed Header Issue in HTML5 Responsive Web Design

My goal is to develop a simple HTML5 responsive web layout with a fixed header. I am striving to maintain clean HTML and CSS code while adhering to best practices. The header is designed to have a maximum width of 980 pixels, with a blue background that ex ...

htmlcss