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

Struggling to make images wrap properly using flexbox

I've been struggling to get these images to wrap properly within my container. They keep overflowing beyond the designated width and I'm not sure if it's because I have paragraphs placed under each image. Any ideas on how to make 3 images ap ...

htmlcssflexbox

Activate the button to effortlessly load pages with a visually engaging animation

I have been facing a problem for the past couple of days. I need help with achieving a specific functionality on my website. When button1 is clicked, I want to load the page in a div class named "loadpage" with an animation coming from the left. Similarl ...

jquerycssajaxhtml

Determine the total by multiplying the value of a dropdown menu and a text input field using jQuery when the values are changed

I am new to jQuery and JavaScript. I have a textbox and a select box, and when I enter a value in the textbox and select a value from the select box, I want to display the multiplication of both values in another textbox. I have tried doing this with two t ...

javascriptjqueryhtml

A step-by-step guide on uploading a CSV file in Angular 13 and troubleshooting the error with the application name "my

I am currently learning angular. I've generated a csv file for uploading using the code above, but when I try to display it, the screen remains blank with no content shown. The page is empty and nothing is displaying Could it be that it's not ...

javascripthtmlcssangular

Unusual CSS behavior discovered while implementing horizontal scrolling navbar with overflow-x

I've been working on a navbar that will scroll horizontally when it exceeds the width of its parent container. It features a bottom border with a different color for the active link. Using a negative margin to overlap them works well, but as soon as ...

htmlcss

What is the best way to add 1 to a number every second with javascript?

My code seems to be functioning correctly, but I'm having trouble setting the delay and stopping the increment after a certain interval. Can someone please assist me with this? Javascript: $(document).ready(function() { var number = parseInt($(& ...

javascripthtml

Using jQuery to trigger a click event on a radio button prevents the button from being checked

Having trouble with using the .trigger("click"); function on radio buttons to activate a button in a form. When I use the code below, the button is triggered as expected. However, it seems to be interfering with the radio button, causing it to appear chec ...

javascriptjqueryhtmlforms

Issue with style display:none not functioning in IE8, IE9, and IE10 when in Compatibility View mode

I am facing an issue with two DIVs on my webpage. One of them is set to have display:none based on certain conditions. Surprisingly, it works perfectly fine on IE10, Firefox, and Chrome. However, the problem arises on IE8, IE9, and IE10 Compatibility Vie ...

javascriptjqueryhtml

Choosing a specific category to display in a list format with a load more button for easier navigation

Things were supposed to be straightforward, but unexpected behaviors are popping up all over the place! I have a structured list like this XHTML <ul class = "query-list"> <li class="query"> something </li> <li class="query" ...

javascriptjquerycssmeteor

What is the best way to align my SVG to display inline with text?

I am trying to add an SVG image next to some text in a navbar, but I'm running into some issues. The SVG is overflowing from the navbar instead of aligning inline with the text. Here's a snippet of my HTML code: ...

htmlcsssvg

What is the best way to transfer form input data from a child component to the parent component in React?

Recently delving into the world of React, I decided to experiment with forms. My project idea was straightforward - create a form component with input fields that, upon clicking submit, would pass the input values to the parent component ('App') ...

javascripthtmlreactjsformsreact-hooks

What is the best way to expand my container element and add margins to the top and bottom?

Currently, I am utilizing the Material-UI library in combination with ReactJS, but facing some challenges pertaining to flexbox. The objective is to position my Item Container at the center of my div, extending it to occupy the entire available height whi ...

cssreactjsflexboxgridmaterial-ui

Steps for sharing a word file between two users

Can someone help me with sending a file to another user and providing them with a download link? I have already attached the file to the database table of the recipient, but now I need to figure out how to allow them to download and view it. I've hear ...

htmlruby-on-railsdownloadcontrollerpaperclip

Ensure that the contents of the upper and lower divs are appropriately aligned, while maintaining the centered positioning of the

As a complete beginner in the world of HTML and CSS, I am facing a challenge with my code. Here's the HTML snippet: <section class="instructions"> <div class="row"> <div class="instructions-col" ...

htmlcss

What is the best way to position my header at the top of my navigation bar?

I am new to the world of HTML and CSS! My goal is as follows: https://i.stack.imgur.com/hmLNS.png This is my progress so far: https://i.stack.imgur.com/rav8P.png I am also looking to have the header fill the entire browser window and remain fixed, wit ...

htmlcss

Refresh the Content of a Page Using AJAX by Forcing a Full Reload

I have a webpage that automatically updates a section using jQuery AJAX every 10 seconds. Whenever I modify the CSS or JavaScript of that page, I would like to include a script in the content fetched via AJAX to trigger a full page reload. The page is ac ...

javascriptjqueryhtmlajaxreload

Image transformation not rotating the image

I'm having trouble making an image of an X rotate 180 degrees when it's hovered over. Instead of rotating, the image just moves up and to the right. What am I missing that's preventing this from looking like a smooth 180-degree spin? .bl ...

htmlcsstransformcss-transforms

Tips for dynamically assigning unique IDs to HTML form elements created within a JavaScript loop

let count = 0; while (count < 4) { $('#container').append("<div><input type='textbox' class ='left' id='left-${count}'/><input type='textbox' class ='right' id=' ...

javascriptjqueryhtml

Tips on automatically adjusting the width of a div to fit the content, maintaining center alignment, and ensuring the contents float to the left

I am facing an issue with a div element that has multiple children. My goal is to have the children neatly fit to the bottom left of the grid when the window expands, utilizing the next available space efficiently. However, as the div expands with the wind ...

javascripthtmlcss

Ensure that both textarea and pre elements have equal dimensions and line wrapping behavior in Internet Explorer

I am in the process of implementing a dynamic textarea that resizes automatically, based on a technique discussed in this article: Alistapart: Expanding Textareas (2011). The idea is quite straightforward: by using a pre element to mirror the input in the ...

javascripthtmlcssinternet-explorer