Struggling to apply a border to a specific element on the webpage

Currently, I'm exploring the capabilities of the float property in CSS.

I've been working on adjusting the height of two floating divs.

The following are the two methods:

Method 1.

<div style="overflow: hidden;">
    <div style="background: blue;float: left;width: 65%;padding-bottom: 500px;
       margin-bottom: -500px;border:1px solid White;">column a<br />column a</div>
    <div style="background: red;float: right;width: 35%;
      padding-bottom: 500px;margin-bottom: -500px;border:1px solid White;">column b</div>
</div>

Method 2.

<div style="background-color: yellow;">
    <div style="float: left;width: 65%; border:1px solid White;">column a</div>
    <div style="float: right;width: 35%;border:1px solid White;">column b</div>
    <div style="clear: both;"></div>
</div>

Although both methods work, I am looking to apply borders across these columns. However, my attempts to do so have not been successful. Is there a way to add borders that will be compatible with all browsers?

Edited Code

Method 3.

<div style="background-color: yellow;">
    <div style="float: left;width: 65%; border-right:1px solid White;">
        column acolumn acolumn acolumn acolumn acolumn acolumn acolumn 
        acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn 
        acolumn   acolumn acolumn acolumn acolumn acolumn acolumn acolumn acolumn 
    </div>
    <div style="float: right;width: 35%;border-right:1px solid White;">column b</div>
    <div style="clear: both;"></div>
</div>

Feel free to check out the jsfiddle for reference

The div containing column b does not display the border along its full length.

In Method 1, I encountered difficulty applying the border. Could someone please provide solutions to address these issues in both methods?

htmlcss

Answer №1

A solution to this issue is to nest another div inside both columnA and columnB, setting their widths to 100% along with borders.

Simply adding borders directly to the column divs can cause the total width to exceed 100% since 35% + 2px is greater than 35%.

Answer №2

Below is a possible solution:

<div style="overflow: hidden;position: absolute;right: 5px;left: 5px;">
   <div style="background: blue; float: left;width: 65%; border: 1px solid #ccc;">column a</div>
   <div style="background: red; border: 1px solid #ccc;">column b</div>
</div>

Answer №3

Simply add the following code:

border: 2px solid red;

Are you encountering any errors?

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

Organizing Checkbox Groups for Validation in Bootstrap

My form consists of 2 checkboxes and I only want to submit the form if at least one checkbox is checked. The current code requires both checkboxes to be checked, but I tried grouping them using the name attribute without success. How can I group checkbox ...

javascripthtmlvalidationcheckboxbootstrap-4

Is it possible to rotate a group within an SVG without altering the orientation of the gradient fill it contains?

In my search on SO, I came across a lot of information about rotating gradients. However, my issue is the opposite. I have an icon created from multiple paths that I want to fill with a vertical gradient. I have successfully done this and it works well. ...

cssanimationsvglinear-gradients

Can a menu with data-toggle='dropdown' remain visible even after clicking on it?

I have a dropdown menu that I created with the use of data-toggle='dropdown'. Everything seems to be working fine as the buttons close the menu upon clicking, except I would like the gray button (as shown below) to keep the menu open. https://i. ...

javascripthtmltwitter-bootstrapbootstrap-4

Guide for creating a scroll-triggered rotation animation using only JavaScript

Looking to achieve a cool scroll effect with an image that rotates on the X-axis by a specific degree, such as 70deg. The goal is to have the image's rotateX value change to 0deg when it enters the viewport upon scrolling and revert back to 70deg whe ...

javascripthtmlcss

Using PHP to send a JSON request via cURL

I am attempting to make a cURL request in PHP. The request I am trying to send is as follows: $ curl -H 'Content-Type: application/json' -d '{"username":"a", "password":"b","msisdn":"447000000001","webhook":"http://example.com/"}' http ...

phphtmljsoncurlheader

Is there a way to conceal :before content in the parent element by hovering over the child element?

Here is the HTML code I currently have: <li *ngFor="let menu of menus" class="{{ menu.attributes.class }} menu-items" [attr.data-title]="menu.label"> <a [routerLink]="[menu.url||'/']" [queryParams]="menu.refParameter3 ? menu.refPara ...

htmlcssangular

Trying to replace all instances of a word in an HTML document with a <span> element, but only for <p>, <span>, and <div> tags. It shouldn't work if the parent node already contains

Here is the HTML code snippet I am working with: <div> hello world <p> the world is round <img src="domain.com/world.jpg"> </p> </div> I am looking to replace the word "world" (or any mixed case variations) with < ...

javascripthtml

Is it possible to assign a class to a br element?

Do you think the following HTML code is valid? <br class="something"> While it seems like a valid HTML element, I personally haven't come across it being used before. ...

html

Unable to load the CSS file

Having trouble with the folder structure in my content directory: -Content --jquery-ui-1.10.4.custom --------------------------css --------------------------smoothness ------------------------------------jquery-ui-1.10.4.custom.css ----------------------- ...

jquerycssasp.net-mvc-4

absence of a scrollbar on smaller window display

My website is experiencing an issue: everything displays properly when the window size matches or exceeds the background image, but on a smaller window, there is no scroll bar which causes the footer to disappear. Here is an image showing what happens wit ...

htmlcssbrowserwindow

When floating a left and right div block, they do not necessarily align on the same line

I am looking to create a nested menu where some of the menu items have key shortcuts that I want to align to the right side on the same line. I attempted to use float left/right, but encountered an issue where the shortcuts were shifted to the next line. H ...

htmlcss

Encountering a problem with passing parameters using $state.go in Ionic

Having just started an Ionic project, I am currently working on creating a sign in and sign up page. After implementing the HTML and CSS, I am facing an issue with changing the position between controllers. Although the URL of the controller is changing, ...

htmlcssangularjsionic-framework

What causes performance issues when utilizing mouseover events in JQuery?

var mouseX; var mouseY; $(document).mousemove( function(e) { mouseX = e.pageX; mouseY = e.pageY; }); $(".test").mouseover(function(){ $('#DivToShow').css({'top':mouseY,'left':mouseX, 'display':'block&ap ...

javascriptjqueryhtml

Specialized function to identify modifications in data attribute value

I have a container with a form inside, featuring a custom data attribute named data-av Here is how I am adding the container dynamically: > $("#desti_div").append("<div class='tmar"+count+"'><div > class='form-group col-md-6 ...

javascriptjqueryhtmlhtml-dataset

Items seem to vanish into thin air and become immovable when attempting to relocate them

I am attempting to create a unique grid layout with 3x3 dimensions, where each grid item represents a fragment of a single image. These items should have the capability to be dragged and dropped inside another 3x3 grid, in any desired sequence. I have hit ...

javascripthtmlcssdrag-and-dropgrid

Tips for adjusting the width of a div when printing

Imagine I have two container elements named container1 and container2. First, I assign a width of 30% to container1 and 60% to container2. Then add a border between the two containers. However, when I attempt to print, container1 takes up the full 100% o ...

htmlcssprintingbootstrap-4

Alignment of a div at the bottom inside a jumbotron using Bootstrap 4

Searching for answers on how to vertically align a div within a jumbotron, I have come across plenty of solutions for middle alignment but none for bottom alignment. <section id="profileHero"> <div class="container"> <d ...

csstwitter-bootstrapbootstrap-4

What is the best way to adjust the size of a div element so that it is

I am facing an issue with a table that contains a TreeView within a cell. The code snippet is shown below: <style> #leftPanel { width:60px; height:'100%'; border:1px solid red; ...

javascriptjqueryhtml

Guide to transforming the image's color with CSS3

Is there a way to transform the color of an image from grayscale to green, red, or yellow using CSS3? I attempted the code below but unfortunately, it did not produce the desired result. img { -webkit-filter: hue-rotate(90deg); filter: hue-rotat ...

css

overflowing bootstrap cards are causing disruptions in row layouts and impacting the margins of surrounding elements

As a beginner in the world of programming, I'm reaching out for help with my first post. Please bear with any errors in my code or confusion in my terminology. Experimenting with bootstrap cards on a blog template, I am facing an issue where the heig ...

htmlcsstwitter-bootstrapbootstrap-4responsive