Fluid imitation pillars with a decorative outer edge

Looking to create a modern, sleek 2-column HTML5 interface with a left sidebar and main content area on the right. Backwards compatibility is not an issue as all users will be using the latest versions of Chrome or FF.

The goal is to give the sidebar a background color and a right border that extends to the bottom of the page, even if the content doesn't fill the entire height. The sidebar should also be set to a percentage width rather than a fixed pixel amount.

Faux columns were considered but the desire for a border to the right of the column poses challenges. Is it possible to achieve this effect without relying on images or faux columns?

Are there any CSS3/HTML5 features that allow for this design requirement? If not, what alternative solutions exist other than making the sidebar a fixed size?

htmlcss

Answer №1

Here is a great example that showcases what you are looking for. If you have any questions about how this works, feel free to reach out! :)

Check out this link for more information

Answer №2

Hmm... what's happening here?

<style type="text/css>
  #sidebar
  { height:100%;
    width:30%;
    min-width: 120px;
    float:left;
    background-color:blue;
    border-right:dashed 2px purple;
  }
</style>
<div id="sidebar">menu</div>
<div id="main">contents</div>

Answer №3

If you're looking to make some adjustments using jQuery, here's a simple solution:

let sidebarHeight = 0;
let contentHeight = 0;

sidebarHeight = $("#sidebar").height();
contentHeight = $("#content").height();

if(sidebarHeight > contentHeight){
    $("#content").css("height", sidebarHeight);
} else {
    $("#sidebar").css("height", contentHeight);
}

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

Using jQuery to arrange information from an API into a table

Currently, I am in the process of learning jQuery as it is a new concept for me. I have attempted to make a request to an example API and received an array of objects that need to be listed in a table. However, I am facing difficulty in sorting it within t ...

javascripthtmljqueryjsonajax

What is the correct placement of DESC in a MySQL query when using PHP?

Here's the issue I'm facing: $query = "SELECT * FROM table ORDER BY 'timestamp' LIMIT $startAt, $perPage"; I've been attempting to sort the results in descending order (latest on top) by adding DESC to the query. However, every t ...

phphtmlmysqlsqlsyntax

What steps can I take to deactivate input and stop it from being accessible on the browser?

insert image description Is there a method to block users from accessing disabled input fields in the browser? Any recommendations or solutions would be greatly appreciated. Vuejs is utilized within my project. Implementing this feature serves as a secu ...

javascripthtmljqueryvue.js

Utilize CSS to exclusively filter through items

Is it possible to use CSS alone to filter a list of items based on specific links being clicked? I have a list that should display only certain items when corresponding links are clicked. HTML: <!-- Header links --> <a href="#" class="all" tabin ...

htmlcssselectfiltertabindex

Extract the <br /> tag exclusively from the content inside the div

My experience with WooCommerce has led me to the need to include <br> within a product name. However, this break appears differently as <br /> in the .woocommerce-breadcrumb element. This is what the breadcrumb currently display ...

jqueryhtmlcsswordpresswoocommerce

Automatically navigate to a different page using JavaScript after 5 seconds without interrupting the execution of other code

Is there a way to redirect to a specific URL after 5 seconds without halting the execution of other code on the page? I want all the other code to run first before triggering the redirection. Wrapping the entire page in a setTimeout block is not an option. ...

javascripthtmlasynchronoustimeoutsleep

Instructions for implementing tooltips on a pie chart slice when hovering with the mouse pointer, using the canvas

var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var cw = canvas.width; var ch = canvas.height; ctx.lineWidth = 2; ctx.font = '14px verdana'; var PI2 = Math.PI * 2; var myColor = ["Gr ...

javascriptjqueryhtmlcanvas

Is it feasible for a JavaScript function to receive the innerHTML of the element from which it is invoked as an argument?

Is there a way to bind a function that takes a String as a parameter to a button so that it is called onclick and takes the innerHTML of the element as a parameter, without assigning the button an id or using queryselector? <button onclick="myFunct ...

javascripthtml

CSS page breaks function properly in Internet Explorer 8, however, they are not functioning correctly in Firefox and Google Chrome

Help Needed: I encountered an issue where I wrote CSS to display page breaks in my HTML. It seems to work fine in Internet Explorer, but not in Firefox and Chrome. Here is the inline CSS I used: <br style="page-break-after: always;"> Below is a sni ...

asp.nethtmlcsspanelpage-break

Is it possible for a user to chat on Whatsapp by entering their mobile number in an HTML form within the app?

<?php require_once('./database.php'); if(isset($_REQUEST['submit1'])) { $number = $_REQUEST['whatsappnumber']; $code = $_REQUEST['countorycode']; $sql = "INSERT INTO whatsapp (whatsappnumber,counto ...

phphtml

Utilizing a dropdown feature in Bootstrap for creating X columns of lists instead of a traditional single list

Check out my Fiddle. Beneath Dropdown1 lies a single-column list of actions. I'm looking to expand this list across multiple columns, like 5 or the width of the page. I'm hoping there's a Bootstrap CSS class I can use for this, but I migh ...

jqueryhtmlcsstwitter-bootstrap

Tips for defining the width of columns that adapt to different screen sizes in Bootstrap version 4

Utilizing Bootstrap 3, I can effortlessly create a responsive table with adjustable columns using the grid system. Additionally, I have the ability to hide certain columns on smaller devices. For instance, consider this example where the table consists of ...

csstwitter-bootstrapresponsivenessbootstrap-4

Icon displayed within the input field

Is there a simple method to add an input text element with a clear icon on the right side, similar to the layout of the Google search box? I've searched, but I could only find instructions for placing an icon as the background of the input element. I ...

javascriptjqueryhtmlcss

Ways to position a single item in the middle of a multi-column layout

I need help with aligning dynamic images in a 2-column layout. What's the best way to center a single image or collapse the columns when there's only one image? Currently, the single image is always placed in the left column. Is there a CSS-only ...

htmlcsscss-multicolumn-layout

Utilizing Material-UI for CSS styling in a live environment

My application has a 'dashboard' feature that utilizes material-ui. Within this dashboard, other apps are called and rendered. While this setup functioned smoothly during development, I encountered issues once switching to a production build. The ...

cssreactjsmaterial-ui

Using PHP to upload a lone image file to an FTP server

I'm feeling frustrated trying to achieve a simple task. I just want to create an HTML form and use PHP to upload the selected file to a specific directory on an FTP server, but for some reason it's not working as expected. Here is the HTML form ...

phphtmlformsftp

What steps can I take to streamline and simplify this tab controller code?

I'm looking to simplify this jQuery code because I feel like there's repetition. As someone new to JavaScript and jQuery, I've created two tabs with their respective containers containing miscellaneous information. My goal is to have each co ...

javascriptjquerycsstabs

Tips for accessing form data that has been automatically uploaded in PHP

I've been trying to automatically post data using JavaScript and retrieve it in a PHP file. However, I am facing an issue where the PHP file is not able to retrieve the data. I have set up an automatic form that takes input from another form and send ...

javascriptphphtml

Can a layer be sliced to create a text-shaped cutout?

I want to achieve a cool text effect where the background is visible through the letters. I have explored options with background images and colors, but I haven't found any examples where the underlying layer is revealed. Is this even possible? Imag ...

javascriptjquerycsshtml

The html viewport size is altered by the mobile keyboard

One issue that arises when using percentage or viewport unit width and height for the <body> element is that the size of these elements will change when a mobile keyboard is invoked due to an input. I have extensively researched this problem without ...

htmlcssmobilekeyboard