Divs with floating left have a complete vertical border on their right side

I would like the first and second divs to have a full height border on their right side while floating left.
CSS:

div.wrapper {
    border: 1px solid black;
}
div.wrapper > div {
    text-align: center;
    width: 50px;
    padding-left: 5px;

    float: left;
}
div.w-1, div.w-2 {
    border-right: 1px solid black;
}

HTML:

   <div class='wrapper'>
        <div class='w-1'>
            <p>text</p>
        </div>
        <div class='w-2'>
            <p>text</p>
            <p>text</p>
        </div>
        <div class='w-3'>
            <p>text</p>
            <p>text</p>
            <p>text</p>
        </div>
        <br style='clear: both;'>
    </div>

Any help with a solution would be greatly appreciated. Here is the corresponding jsfiddle http://jsfiddle.net/kto5pupz/

htmlcss

Answer №1

Web Development Basics

<div class='container'>
    <div class='box-1'>
        <p>content here</p>
    </div>
    <div class='box-2'>
        <p>content here</p>
        <p>content here</p>
    </div>
    <div class='box-3'>
        <p>content here</p>
        <p>content here</p>
        <p>content here</p>
    </div>
    <br style='clear: both;'>
</div>

CSS Styling

div.container {
    border: 2px solid black;
    overflow: hidden;
}
div.container > div {
    text-align: center;
    width: 70px;
    padding: 5px 2px;
    float: left;
    border-left: 2px solid black;
    margin: -5px 0 -6px;
}
div.container > div:first-child{
    border: none;
}

Check out the JSFiddle link

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

Tips for creating a captivating full-screen parallax section on your website

Is there a way to make the first section of a parallax site full screen? I've been scouring the internet for a solution to this problem, but I'm not having any luck. Almost every parallax site I come across has their first section full screen, a ...

jquerycsswebfullscreen

Generate a fresh DOM element when a particular height threshold is achieved, utilizing a portion of the previous DOM element's content

Update: 27th December 2016 The heading has been modified because any DOM element can be the target, whether it is a <p> element or not. Additional information has been provided about the tools being used and the desired outcome. Are there nativ ...

javascripthtmlangularjsnode.jselectron

Javascript on-page scroll positioning

My current dilemma involves finding a solution to optimize in-page scrolling for mobile users. I have a sticky header on the page, which causes #section1 to place the scroll position behind the sticky header. Is there a way to adjust the scroll position b ...

javascripthtmlcssscrollanchor

"X-Requested-With" header not being included in XMLHttpRequest request

After successfully using jQuery.ajax() to make an ajax call to an MVC action, I decided to switch to using the XMLHttpRequest along with the HTML5 File API due to some forms containing file controls. However, since making this change, the MVC action no lon ...

javascriptjqueryajaxhtml

Overlapping dynamic content causing CSS nested scrollbars to clash at full width of 100%

Displayed below is a layout with two nested divs, both featuring automatic vertical scrolling. Is there a CSS technique available to show the inner scrollbar while maintaining the inner div at 100% width? https://i.stack.imgur.com/HSKHH.png div { ba ...

htmlcss

Repairing a broken link to the search engine results page (SERP) of an instant JSON search script

I have developed a search script inspired by Google Instant search, which shows relevant results as the user types. The script is written in JSON and utilizes JavaScript to create a URL for the result based on user input. However, there seems to be an issu ...

javascriptjqueryhtmljson

Strategies for styling the contents within <details> while excluding <summary> in CSS

I'm attempting to apply a 10px padding to the Story box using CSS, without introducing any additional HTML elements into the website code. Is there a way to include the padding in the Story box without incorporating a new HTML element? To clarify: H ...

htmlcsscss-selectorshtml-tag-detailshtml-tag-summary

How to Maintain Spacing Between Two Elements While Ensuring the Right Element Stays to the Right Even if the First One is Hidden in CSS

Presently, I have two icons being displayed with a space between them using the flex-box property justify-content and value space-between. The issue arises when only one icon is displayed, as I need the V-icon to always remain on the left and the urgent-ic ...

htmlcssangularflexbox

Techniques for dynamically counting rows in a table using JavaScript

I'm working on a system to create and delete rows, and I want each row to have a unique row number displayed under "Num." However, I'm having trouble implementing this feature. EDIT I found a jQuery snippet that counts the first row but not t ...

javascriptjqueryhtmlrowcounter

Testing a feature in Angular that modifies a variable

Trying to test a function that updates a Boolean variable has been causing some confusion for me. The strange thing is, even though the function seems to be called successfully when using the toHaveBeenCalled method, the variable itself never actually gets ...

htmlangulartypescript

The "Splash Screen Div" page displayed during transitions and page loading

Creating a "Splash Screen Div" for a loading page involves waiting until everything is loaded and then hiding or moving the div off screen. Below is an example: index.html <div id="loading-Div"> <div id="bear-Logo"> < ...

javascriptcsshtml

Unable to add data to an Array once subscribed to BehaviorSubject

Hello everyone, this is my first time asking a question here. I hope it's clear enough for you to understand :) Let's dive straight into the issue at hand. I have a query regarding a behaviorSubject variable in TypeScript that is not allowing me ...

htmlarraystypescript

Ways to halt a script entirely once its tag has been eliminated

I have a script from a page tracker website that runs periodically. Occasionally I need to restart the script from the beginning. To do this, I typically remove the script tag from the DOM and then re-append it. However, because the script utilizes setInt ...

javascripthtmlreactjs

Optimizing CSS for printing with margins and overflow

After stumbling upon a helpful solution here, I wanted to print small cage cards in a neat format with some tweaks of my own. Currently, this is how it appears for me (Fiddle): /* CSS styles */ (styles modified here) * { -moz-box-sizing: border-b ...

htmlcssprinting

Guide on how to forward the response obtained from an Ajax call to a different HTML page

I am working with a mongoose database that stores data containing an individual's first and last name. The user inputs their first name into a field, triggering an ajax request sent to the file named controller.js. This file generates a JSON response ...

javascripthtmljsonnode.jsmongoose

Showcase JSON data within a designated div

As someone new to HTML, JavaScript and Vue, I'm unsure if my issue is specific to Vue or can be resolved with some JavaScript magic. I have a Node.js based service with a UI built in Vue.js. The page content is generated from a markdown editor which ...

javascripthtmlnode.jsvue.js

What is the correct way to call upon Bootstrap's CSS that was obtained through a Gradle dependency?

I'm having trouble referencing the Bootstrap library from the 'External Libraries' section in my project. In my build.gradle file, I included: compile group: 'org.webjars', name: 'bootstrap', version: '3.3.7' ...

csstwitter-bootstrapintellij-ideagradle

JavaScript/CSS manipulation: The power of overriding animation-fill-mode

When animating text using CSS keyframes, I use animation-fill-mode: forwards to maintain the final look of the animation. For example: #my-text { opacity: 0; } .show-me { animation-name: show-me; animation-duration: 2s; animation-fill-mod ...

javascriptjquerycss

Tips for managing responsive font sizes as screen size decreases

Hey there, I could really use some assistance with a new website I've been working on. While I have experience building Joomla sites for the past 6 months, this is my first attempt at making a responsive site using media queries. You can check out th ...

htmlcssresponsive-designjoomla3.0

Aligning Text at the Center in Your React Native Application

I'm facing a few issues with my visualization: Despite aligning it to the center, the text on my first button is positioned at the right end of the button. How can I move the text 'login' to the center? Currently, the 'Sign Up Her ...

cssreactjsreact-native