Adding a border with vertical padding above and below two floated divs with different heights

Here is some sample markup:

<div class="container"> 
  <div class="one">column a<br />column a</div> 
  <div class="two">column b</div>
</div>

The content in the inner divs can vary in height and is dynamically generated.

To ensure that the two inner divs have the same height, I am utilizing some standard CSS techniques:

.container{
    overflow: hidden;
    padding: 20px;
    border: 1px solid blue;
}

.one{
    border-right: 1px solid red;
    float: left;
    width: 64%;
    padding-bottom: 500px;
    margin-bottom: -500px;
}

.two{
    float: right;
    width: 34%;
    padding-bottom: 500px;
    margin-bottom: -500px;
}

For a live demonstration, check out this fiddle: http://jsfiddle.net/FnWG8/

Issue: The line dividing the two divs extends to the bottom, touching the container as I do not know the maximum height of the inner divs. Hence, I am resorting to using the padding-bottom: 500px and margin-bottom: -500px workaround.

I want the division line between the inner divs, but with some space between it and the container:

What steps could be taken to achieve this effect?

htmlcssheightcss-float

Answer №1

give this a try, it seems like it might be able to achieve the desired outcome:

.box{
    overflow: hidden;
    padding: 20px;
    border: 1px solid blue;
}

.side-one{
    border-right: 1px solid red;
    float: left;
    width: 65%;
    display: inline-block;
}

.side-two{
    border-left: 1px solid red;
    float: left;
    width: 35%;
    display: inline-block;
    margin-left: -1px;
}

Answer №2

See if this solution works.

Please update the CSS code below:

.wrapper{
    overflow: hidden;
    padding: 20px;
    border: 1px solid blue;
}

.item-one{
    border-right: 1px solid red;
    float: left;
    width: 65%;
    margin-bottom: 5px;
}

.item-two{
    float: right;
    width: 35%;
    margin-bottom: 5px;
}​

Answer №3

Give this CSS snippet a shot:

.wrapper{
    overflow: hidden;
    padding: 20px;
    border: 1px solid blue;
}

.box1{
    border-right: 1px solid red;
    float: left;
    min-height:10px;
    width: 65%;
    padding-bottom: 40px;
    margin-bottom: -500px;
}

.box2{
    float: right; 
    min-height:40px;    
    width: 35%;
    padding-bottom: 500px;
    margin-bottom: -500px;
}​

Answer №4

Update the CSS rule ".one" by commenting out padding and margin settings

.one{
    border-right: 1px solid red;
    float: left;
    width: 65%;
    /*padding-bottom: 500px;
    margin-bottom: -500px;*/
}

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

Having trouble with CSS messing up your gridview button display?

Oddly enough, whenever I place buttons inside a gridview, they end up looking very small (as shown in the image below), even though the gridview itself has no CSS applied to it. Is it possible that some other CSS is affecting the buttons? I have too much ...

asp.netcss

What is the best way to remove bootstrap when transitioning to a new microfrontend?

Our team is facing an issue with styling when using a combination of React, Bootstrap, and Tailwind. The problem arises when linking our micro frontend to modules that use Tailwind, as the Bootstrap styles persist despite the change. Since both Tailwind an ...

cssreactjswebpackbootstrap-4

Tips on adjusting the font size of headers in a Vuetify v-data-table?

I've been struggling to change the font size of the headers in my v-data-table. No matter what I try, the font doesn't seem to update. I even experimented with the Chrome developer tool and managed to make it work there. However, when I attempt t ...

cssvue.jsvuejs2vuetify.jsv-data-table

triangle shape filled with a gradient that transitions between two colors

I have two triangles displayed at the bottom of my page - one on the left and one on the right. The right triangle is currently transparent but I want to add a gradient effect to it. For the triangle-bottom-right, I'd like the gradient to go from rgb ...

htmlcsscss-shapeslinear-gradients

I am currently attempting to create a JavaScript function that searches for the <td> elements within an HTML table. However, the function fails to work properly when there are <th></th> tags included

UPDATE: Scratch that, I managed to solve my issue by creating a separate table for the header to contain all of my <th> tags I am working with an HTML table and I would like to add a search bar to filter through the content since it is quite large. ...

javascripthtmlhtml-table

What is the safest method to insert data into a div element?

After utilizing ajax to retrieve a JSON file from the web, I successfully assigned one of the keys to a variable. Now, my question is how can I display the contents of that variable within a div tag? My initial approach was: theJsonKey = jsonObject.key; ...

javascripthtmlajaxjsonsecurity

Determining in Angular 8 whether a value has been altered by a user or by a method call

Within my select element, the value is currently being assigned through an ngOnInit call. Here is an example of the HTML code: <select name="duration" [(ngModel)]="exercisePlan.duration" (ngModelChange)="onChange($event)"> <option *ngFor="l ...

htmlangulartypescript

Navigation isn't aligning correctly on the right side

I am having trouble with my navigation menu not aligning properly to the right. <div class="logo"> <h2><i class="icon-reorder"></i> Frosty</h2> </div> <div class="nav"> <a href="#">Home</a> </div& ...

htmlcsstwitter-bootstrap

Triggering a sweet alert on a mouse click

Here is a code snippet I found on . It shows an alert box that doesn't disappear when clicked outside of it. swal({ title: "Are you sure?", text: "You will not be able to recover this imaginary file!", type: "warning", showCancelButton: true, ...

javascriptjqueryhtmlsweetalert

Using jQuery to vertically center a div

When a vertical menu on my website is clicked, it pops out from the left side of the screen. The content inside is vertically centered using CSS transformations. While expanding to show sub-items, everything remains centered. However, there's an issue ...

javascriptjqueryhtmlcsscenter

A contact form overlaying a muted Google Maps view in an HTML website

Currently, I am in the process of developing a website that features a contact form. It would be great if I could incorporate Google Maps as a background, but with a greyed-out effect instead of a plain white page. After trying out a few solutions, I ende ...

htmlcssgoogle-mapsiframe

Struggling to get a basic HTML form to function with JavaScript commands

In my form, there are two input fields and a button. Upon clicking the button, a JavaScript function is triggered which multiplies the values entered in the inputs. The result is then displayed in a <p> element and evaluated through an if else statem ...

javascripthtml

Cascading Style Sheets can be disrupted by Scalable Vector Graphics

Currently, I am incorporating SVG Icons that I created in Illustrator into my Vue.js Webapp. I have utilized Webpack's "require" to load the icons. Rather than accessing the SVGs directly using the src attribute of the img tag, I am inserting them usi ...

csssvgwebpackvue.js

Adjust the position of the xAxis on the Highcharts chart to move it downward or

I recently inherited some code from the previous developer that uses highcharts.js (v3.0.1). I'm having trouble with the xAxis appearing within the graph itself (see screenshot). Despite my efforts to recreate this issue in jsfiddle, I can't seem ...

javascripthtmlcsshighcharts

Leveraging the power of CSS id selectors to customize the appearance of a Grid

In my current CSS file, I have defined two id selectors: #TableHead { font-family: Arial, Helvetica, sans-serif; font-size:11px; font-weight: bold; color: #000000; border-top-width: thin; border-top-style: solid; border-top-color: #A9AAAA; border-bottom-w ...

c#asp.netcss

Guide to connecting data from the backend to the frontend in the select option feature using Angular 9

I have a backend system where I store a number representing a selected object, which I am trying to display in a select option using Angular. Currently, the select option only displays a list of items that I have predefined in my TypeScript code using enu ...

javascripthtmlangulartypescript

Combining a Python backend with an HTML/CSS/JS user interface for desktop applications: the perfect synergy?

Is it possible to seamlessly combine Python code with HTML/CSS/JS to develop desktop applications? For instance, I want to create a function in Python that displays "Hello World!" and design a visually appealing user interface using HTML/CSS/JS. How can I ...

javascriptpythonhtmlcssuser-interface

Model-View-Controller (MVC) and

Apologies for my initial question, as I am new to this. I am having an issue with using a radiobutton for the first time. I want to create a radiobutton that looks like the image provided in the link below: My image When the radio button is checked an ...

htmlasp.net-mvcradio-buttondetailsview

Utilizing AJAX in Wordpress to Dynamically Update HREF Links

My website now has AJAX functionality, and you can see a live example at www.mathewhood.com. I am interested in changing the URL format when clicked from To something like , without the /sitefiles/ for security reasons. Below is my code. If anyone is ex ...

javascriptjqueryhtmlajaxwordpress

Change `console.log` to output to a specified `div` container

I found a great example of using a simple rss feed parser on Stack Overflow. $.get('https://stackoverflow.com/feeds/question/10943544', function (data) { $(data).find("entry").each(function () { // or "item" or whatever suits your feed ...

jqueryhtmlrss