What is the best way to make content stretch to 100% width when there is no content in the sidebar?

As I work on developing my custom theme for Drupal, I am seeking a solution that will allow the content width to adjust depending on the presence of a sidebar. When there is no sidebar, I want the content width to be 100%, and when a sidebar is present, I would like the content to shrink horizontally to accommodate it. Below is an example of the structure:

<div id='container'>
   <div id='content'></div>
   <div id='sidebar'></div>
</div>

Up until now, my progress has been limited to achieving the layout shown in the rightmost image, where the content wraps around the sidebar.

I would greatly prefer to accomplish this using only CSS.

htmlcssdrupallayoutcss-float

Answer №1

To create a sidebar layout, start by inserting the sidebar first in the markup and positioning it absolutely. Then, apply the adjacent sibling selector (+) to add a right margin to the content that follows the sidebar:

#sidebar {
    position: absolute;
    right: 0;
    width: 150px;
}
#sidebar + #content {
    margin-right: 150px;
}

See Demo: http://jsfiddle.net/cH4ZY/2/

Answer №2

Adding a class to the container in situations where there is no sidebar allows for better control over the layout.

#container.no-sidebar #main-content {
    width: 100%;
}
#container.no-sidebar #sidebar {
    display: none;
}

Answer №3

Suppose you have a Drupal website with a non-sidebar HTML structure like the following:

<div id='wrapper'>
   <div id='main-content'></div>
</div>

By inserting the CSS code below after your usual content styling, the 100% width effect will only apply when the main content div is the last child within the wrapper. If there is a sidebar present, then the sidebar will become the last child and this specific CSS rule won't be activated for the main content.

#wrapper > #main-content:last-child {
   width: 100%;
}

Answer №4

Another option is to customize two different base themes (one with a sidebar and one without) and then utilize a module like Themekey to control which parts of your website show each theme. Personally, I prefer using single-column themes for administrative tasks, but you can easily modify them to match the look and feel of a multi-column theme that you use on most content pages.

While it's possible to have a theme that changes dynamically, it may be simpler to choose a similar theme (like a single column layout) for specific pages rather than extensively modifying one theme to display differently in various areas of your site.

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

In Firefox, the functionality of applying background-position-y to a label when it is immediately preceded by a checked input[type=radio]

CSS selector input[type=checkbox]:checked + label is not functioning properly in Firefox browser! label { display: block; font-family: 'Muli'; font-size: 14px; color: #666; vertical-align: top; background: url("https://s31.postimg. ...

htmlcssfirefoxbackground-position

Experience the smooth CSS3 transition effects on iOS devices such as iPhones and iPads. Elevate the appearance of DOM objects with

I have a basic image contained within a div tag. I use JavaScript to add a transition effect to the div element: <div style="transition: opacity 0.8s linear; opacity: 0.5;"><img src="..." /></div> At the end of the transition duration ...

iosipadcsscss-transitionsmobile-webkit

Stop the web browser from storing the value of the input control in its cache

Many web browsers have a feature that saves the information you enter into certain fields so you don't have to type it again. While this can be convenient for most cases, I am faced with a situation where users must input a unique reference for a new ...

javascripthtmluser-interface

The Bootstrap carousel spiraled into disarray

I am facing an issue with the basic bootstrap carousel. My goal is to make the slides move every four seconds. The current setup of the carousel code is as follows: $(document).ready(function() { fixCarousel(); }); function fixCarousel() { $('.c ...

javascripthtmlcsstwitter-bootstrap

Bootstrap causing malfunction of JQuery bounce animation

Looking to create a bouncing popup on hover using Bootstrap (v3.0.0) panel, but encountering an issue where the panel changes its width after the bounce effect. For reference: http://fiddle.jshell.net/YxRvp/ If anyone has a solution for this problem, ple ...

jquerycsstwitter-bootstrapbounce

Endless stream of text flowing in a continuous line within each paragraph

I am trying to create a unique scrolling effect for each line in a paragraph. The goal is to have each line repeat after one scroll is completed. For example: Let's say there is a line like this in the paragraph: 1,2,3,4, The desired outcome is for ...

htmlcsswebcss-animations

Render inline CSS styles with AngularJS

Can we use angular variables to write inline CSS styles? <div style="background: transparent url({{eventInfo.eventHeaderImg}}) top center no-repeat;"></div> Here is the output I received: "NetworkError: 404 Not Found - http://test/eventInfo. ...

htmlcssangularjs

What criteria do web browsers use to determine the order in which to apply @media queries when there are multiple relevant queries for the device

My website requires adjusting element positioning based on specific resolutions. One example is this media query: @media all and (max-width: 385px) And another one: @media all and (max-width: 500px) The device I am using has a width below 385px, but i ...

cssmedia-queries

Calculating the Load Time for a Web Page in C#

Is there an easy method for measuring the time it takes for a web page to fully load after hitting Enter? Do I need to utilize a Timer, or are there functionalities within the Web Browser control (or .net framework) that I have overlooked? Appreciate any ...

c#.nettestingperformancehtml

When you click on the logo, it will automatically redirect you to a designated Bootstrap Tab and set that tab

After searching through numerous posts, I am still struggling to find a solution to my straightforward issue. My requirement is simple: when a user clicks on the brand (logo), it should not only redirect them to a specific tab but also make it appear as a ...

jquerycsstwitter-bootstraptabs

Automatically align a Div to the right within an ngFor directive in an Angular 6 application

<div class="row"> <div class="col-lg-4 col-xs-6" *ngFor="let client of clients;index as i"> <!-- small box --> <div class="small-box bg-dashboard-box" > <div class="inner"> <div class="text-black"> ...

htmlcssangulartwitter-bootstrap

Obtain CSS3 gradient background-color of an element using JavaScript

Currently, I am using the following JavaScript (jQuery) to retrieve the background color (in RGB) of various other div elements: $theColor = $(this).css("background-color"); This method works perfectly, except when dealing with CSS3 gradients. For insta ...

jquerycssbackgroundfindgradient

List of items:1. The first item is elevated in its position

Can anyone explain why the first li item is displaying higher than the rest when I assign an id or class to the div element? https://i.sstatic.net/9SMdT.png Take a look at the code snippet below: <div id="pickList"> <ul *ngFor="let channel ...

htmlcssangular

Switch the secondary menu to be the main menu on all pages excluding the homepage in WordPress

I am looking to customize my menu display by showing the primary menu only on my home page (front-page.php) and displaying the secondary menu on all other pages except for the home page. In my functions.php file, I have registered both the primary and sec ...

phphtmlcsswordpress

Creating a Scrollbar within a Bootstrap Dropdown: a Complete Guide

Is there a way to create a scrollbar within a bootstrap 4 dropdown selection? I am facing an issue where the dropdown does not fully load when there are too many files. My solution is to display only 5 files when the dropdown is clicked and include a scrol ...

htmlcssdrop-down-menubootstrap-4

Connecting CSS styles and images to my EJS templates on a distant Express server using Node.js (Ubuntu 18.04)

I have been hunting for a solution here extensively, but every attempt has failed. So, here's the issue I'm facing: I have created a basic Express server locally to display a static page until I finish full integration. The structure of my site ...

cssnode.jsexpressejsbad-gateway

Gathering information from an HTML form and displaying it through JavaScript by utilizing Bootstrap's card component

I've been working on integrating form data from my index.html page into a card component using Bootstrap. I've successfully collected the data in the backend, but now I'm struggling to display it on the frontend as a card component. Any help ...

javascripthtmlcssformsobject

Navigating the jQuery Search Form: Redirecting to Pages within your Website

After successfully creating my first Javascript search form with an Autocomplete Script, I am facing a challenge. I want to enable users to press "enter" after searching for a product and get redirected to the corresponding product URL page. The operation ...

javascriptjquerycsshtml

execute the function based on the given ID

I've been attempting to dynamically add content using a function. My goal is for the content with the same anchor ID as the clicked anchor to be added, but it seems like nothing is happening. Is there a more effective approach to achieve this? $(&a ...

javascriptjqueryhtmlfunctionappend

Exploring Vaadin 14 Slider Components

I'm looking for help on how to incorporate a slider into my Vaadin 14 project. I discovered that the slider component was removed in Vaadin 10, so I turned to this alternative: Once I added the Maven dependency and repository to my pom.xml, I success ...

javahtmlcssvaadin