Tips for placing a border alongside an image

I have a large div with two smaller divs inside. The first div contains an image, while the second one contains text.

Currently, there is a border below the image in the first div.

http://jsfiddle.net/8f3arq2y/

#newsfeed_header {
    padding: 10px 0px;
    width: 98%;
    position: relative;
}
#nf_image:after {
    content: " ";
    border-bottom: solid 1px #000000;
    display: block;
}
#nf_text {
    text-transform: uppercase;
    font-size: 14px;
    font-weight: bold;
    font-family: Oswald;
}
<div id="newsfeed_header">
    <div id="nf_image">
        <img src="//dummyimage.com/35x35" />
    </div>
    <div id="nf_text">Read the latest</div>
    <br/>
</div>

Is it possible to place the border next to the image instead of below it?

|<img>__________________|
|text                   |
htmlcss

Answer №1

If you're looking to achieve this, remember that it is also compatible with varying image sizes.

#custom_image {
    display: table;
    width: 100%;
    margin-bottom: 10px;
}
#custom_image img {
    display: table-cell;
    vertical-align: top;
}
#custom_image:after {
    display: table-cell;
    content: "";
    width: 100%;
    border-bottom: solid 1px black;
}

VIEW UPDATED DEMO

#newsfeed_header {
    padding: 10px 0px;
    width: 98%;
    position: relative;
}
#custom_image {
    display: table;
    width: 100%;
    margin-bottom: 10px;
}
#custom_image img {
    display: table-cell;
    vertical-align: top;
}
#custom_image:after {
    display: table-cell;
    content: "";
    width: 100%;
    border-bottom: solid 1px black;
}
#nf_text {
    text-transform: uppercase;
    font-size: 14px;
    font-weight: bold;
    font-family: Oswald;
}
<div id="newsfeed_header">
    <div id="custom_image">
        <img src="//dummyimage.com/35x35" />
    </div>
    <div id="nf_text">Stay informed</div>
    <br/>
</div>

Answer №2

If you want to add a border below an image, simply create an empty div below the image and apply some CSS styling:

#newsfeedheader{
    padding: 10px 0px;
    width: 98%;
    position: relative;
}

#border {
    margin-top: -8px;
    margin-bottom: 10px;
    border-top: 2px solid red;
    z-index: -10;
}

#nf_text{
    text-transform: uppercase;
    font-size: 14px;
    font-weight: bold;
    font-family: Oswald;
}
 <div id="newsfeed_header">
     <div id="nf_image"><img src="http://www.pixelsquish.com/wp-content/gallery/random-impulses/the-arch-jumpers.jpg" height="105" /></div>
     <div id="border"></div>
     <div id="nf_text">Read the latest</div>
     <br/>
</div>

To make sure the border appears next to the image, give the div a negative top margin and a negative z-index so it appears behind the image.

Answer №3

UNDERSTOOD!

To ensure the bottom border starts right after the image, I increased the margin-left of the :after block to match the width of the image.

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

Ensure that each row of x images has the same height based on the height of the viewport

Currently, I am working on a website using HTML and CSS, specifically focusing on a "blog" header section. I am aiming to create a responsive grid layout featuring x images with equal heights (width adjusted according to their natural dimensions) and consi ...

javascriptjqueryhtmlcss

Can someone please provide me with a Javascript code snippet that accomplishes the same function

<script> document.addEventListener('DOMContentLoaded', function () { const menuItems = document.querySelectorAll('.headmenu li'); menuItems.forEach(function (menuItem) { menuItem.addEventL ...

javascriptcss

Having trouble getting background image transitions to work properly in CSS?

I'm encountering an issue with setting the transition CSS property for a hover effect, as it doesn't seem to be working correctly. Here is the relevant HTML: <div class = "menuItemBox" id = "Mughlai"> <p class = ...

htmlcsscss-transitions

Tips for resizing and positioning an image within an input field

Is it possible to have a button overlapped on an input field in a responsive website like this: https://i.sstatic.net/tnVmF.png I tried using an input group addons, but the result is not quite what I expected: https://i.sstatic.net/xpMgr.png This seems t ...

cssbootstrap-4responsive-designhtml5-canvas

What is preventing this brief code from functioning properly? I am trying to extract a value from an input field and add it to a div element

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="//ajax.googleapis.com/ajax/libs/jque ...

javascriptjqueryhtml

Refreshing information within a table using Ajax Prototype

For my current project, I am utilizing PrototypeJS. I have implemented Ajax.PeriodicalUpdater to insert real-time data as required. However, I am facing an issue where the data is not getting replaced inside a specific table. Below is the HTML code snippet ...

javascripthtmlajaxprototypejs

Arrange items in a single parent Div in flex-column format, aligning them to the left and

In my Angular application, I am experimenting with stacking Bootstrap toast elements in a customized vertical layout. Specifically, I want certain toast elements to be positioned on the left side of the page (using the align-items-start style) and others o ...

cssangularbootstrap-4flexboxtoast

Interactive JavaScript Linkage

Recently, I came across some code that I inherited (definitely not mine!) which uses a session variable in the HTML header to link to a specific javascript file. For example: <SCRIPT language="javascript" src="../JavaScript/<%=Session("jsFileName") ...

javascriptasp.nethtmlvb.netvisual-studio-2003

On certain websites, the footer may appear distorted or incorrectly displayed when viewed in the IE 9 web browser

Currently experiencing an issue with the display of the footer in IE9. On some pages, the footer is not properly fixed and overlaps the middle of the content. However, this problem does not occur when using other web browsers. Here is the code that I am c ...

css

How can I use the same popup button to open a different link in a new tab?

I have a situation where I am using a button to trigger an ajax html popup. What I want is for the same button, when clicked, to open another page in a new tab. Any assistance would be greatly appreciated. Below is the HTML code I am currently using: < ...

javascripthtmlajaxbuttonpopup

What is the best way to manipulate a CSS animation using JavaScript within a Vue JS project?

I am facing some challenges with implementing a JavaScript function to access a CSS animation. My objective in this code is to make the border spin when the next or previous button is clicked, but I'm struggling to activate the CSS animation. Here is ...

javascriptcssvue.js

What is the most concise way to write this Xpath?

How can I retrieve the attribute value of an element using an absolute path like this: //*[@id="main"]/div[3]/div/div/div[3]/div[23]/div/div/div[1]/div/div/span/img I would like to know how to write code in relative xpath. Can you provide guidance on that ...

pythonhtmlselenium

Generating dynamic text boxes from a database using a combination of AJAX, JavaScript, and

Managing two tables, one for company details and one for company specials. You can view the company details at The first and fourth rows with 0 in the active column belong to company_details, while the subsequent rows are from company_specials. Currently ...

phpjavascripthtmlajax

JavaScript class name modifications are not functioning as expected

Testing a sprite sheet on a small web page I created. The code for each sprite in sprites.css is structured like this... .a320_0 { top: 0px; left: 0px; width: 60px; height: 64px; background: url("images/sprites.png") no-repeat -787 ...

javascriptcss

Perform a jQuery computation using a CSS style

Having trouble with a calculation using a CSS property that is not returning any value. Seems like the issue might be due to the CSS property returning '200px' instead of just '200'. Any suggestions for a workaround? Thanks in advance. ...

jquerycss

Trouble Displaying Background Image on Your HTML Page?

Hello, I am a beginner in HTML and I am trying to add a background image to the body. Below is the code that I have tried: <!doctype html > <html> <head> <title> Learning HTML</title&g ...

htmlcss

What is the best way to implement coding for portrait styles specifically on the Kindle Fire device?

Any recommendations on how to specifically code the styles for portrait orientation solely on the Kindle Fire device? ...

htmlcsstabs

The Evolution of .back and .pushState: A Historical Comparison

Not exactly a question, but rather an interesting discovery resulting from a unique problem. It's more of a "Learn from my fail" moment. I've been working on writing unit tests for an HTML5 history hack for IE (using window.hash as a workaround ...

javascripthtmlhistory

How can you apply the min-width property to a CSS element floating to the right?

Check out this demonstration When utilizing float:right in the CSS rules, the html does not adhere to the specified min-width. .right { float:right; background:blue; min-width:400px; } By removing the float:right or adjusting it to float:lef ...

htmlcss-floatcss

Converting HTML to PDF using Node.js without relying on PhantomJS

I'm currently creating PDF files from dynamic HTML by utilizing handlebars in my Node.js application with the html-pdf package. However, I've encountered an issue as the package is reliant on phantomjs which has now been deprecated. Unfortunatel ...

htmlnode.jspdfphantomjshtml-pdf