What is the best way to position my div outside of the wrapper while keeping the text inside?

For example: https://i.sstatic.net/UyhOl.png I want the blue text that says "join our discord server" to extend to 100% width when it's placed inside the wrapper. The reason it's inside the wrapper is to ensure the text matches up perfectly with the rest of the content.

Answer №1

To create a full-width element with inner text contained within a specific width, apply a background color to the full-width element and wrap the inner text in another element matching the width of your content section. For instance, use a class like .viewport to define the width of the content area.

.box {
  background: #09c;
  color: #fff;
}

.viewport {
  width: 80%;
  max-width: 960px;
  margin: auto;
}

.content {
  background: #eee;
  padding: 1em 0 0;
}

.content .viewport {
  background: #fff;
}
<div class="box">
  <div class="viewport">Join our community</div>
</div>

<nav class="viewport">navigation</nav>

<div class="content">
  <div class="viewport">Content section<br>Content section</div>
</div>

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

Adjustable Text Size with HTML5 and CSS3

Looking to enhance the accessibility of a website by implementing text size adjustment buttons ' A A A ' using just HTML5 and CSS3. Avoiding the use of jQuery or Javascript for this task. Inspiration drawn from this link. Appreciate any assistan ...

Expand a list item to full width based on the number of items present

Is there a way to make dynamically added list items in a footer stretch across the width of their container? The footer is created in WordPress and the list items are actually widgets. Here is an example: Fiddle I can't manually set the width for e ...

retrieve data with the help of DOMDocument

I'm currently working on extracting a specific value from the HTML snippet below using DOMDocument: <h3> <meta itemprop="priceCurrency" content="EUR">€ <meta itemprop="price" content="465.0000">465 </h3> The value ...

Modifications to the selected input do not impact the current state of the model

Declare 3 select inputs with hierarchical data to be chosen: <select data-ng-model="current.manufacturer" data-ng-options="c.name for c in manufactures"></select> <select data-ng-model="current.mark" data-ng-options="c.name for c in current ...

Using ImageResource in ClientBundle to create an actual <img> element

Is there a way to inform ClientBundle that all images should be actual img elements instead of fake css-background images, as background images are not printed by default in IE9? ...

Creating Dynamic HTML Links with C# Programming

In the web application I am working on, there is a menu that looks like this: <div> <ul> <li><a href="http://localhost:52451/Voronezh/Settings.aspx">Settings</a</li> <li><a href="http://localhost:52451/L ...

Looking to extract a Twitter handle using Python's BeautifulSoup module?

I'm struggling to extract the Twitter profile name from a given profile URL using Beautiful Soup in Python. No matter what HTML tags I try, I can't seem to retrieve the name. What specific HTML tags should I be using to successfully grab the prof ...

Reposition the span element to the right of the div tag

I need help adjusting the positioning of the elements in this HTML code. How can I move the span element with the image to the right of the div tag? Here is the code snippet: <div style='width:600px;padding-top: 2px;padding-bottom: 1px'& ...

Utilizing Angular's directive-based *ngIf syntax instead of passing a string parameter

Currently, I'm studying the article on reactive forms by PluralSight to brush up on my knowledge and I'm having trouble understanding the syntax provided below. <div *ngIf courseForm.get('courseName').valid && courseForm.get ...

Unable to center text within a CSS div rotated 90 degrees due to width limitations caused by rotation; solution involves utilizing flexbox

Currently, I am working on creating a tab positioned on the right side, as illustrated in the image below: https://i.sstatic.net/QGTEB.png The desired width for the tab on the right is only 25px. To achieve this layout, I am utilizing flexbox for the cont ...

The jQuery bxSlider is failing to function properly in a responsive design

Anyone else experiencing issues with the jQuery bxSlider not functioning properly on a responsive layout? It seems to be working fine on larger screens. $(document).ready(function () { $('.slider1').bxSlider({ pagerCustom: '#bx-pager&apos ...

Save information to a server-side .xml file with the use of either JavaScript or PHP

I have a website built using HTML and JavaScript. Currently, I am successfully retrieving data from a server-side .xml file on the site. Everything is working perfectly! However, I am facing issues with allowing users to input data into a field and save ...

Enable and disable modal popup functionality in ng-bootstrap for Angular 5

How do I enable (editable) and disable (not editable) an ng-bootstrap modal popup? I have the following HTML code to display a modal popup when a button is clicked. However, I want it to be inactive until a certain condition is met. I am unsure of how to ...

How do I incorporate left, right, and top labels with Material-ui Toggle switches?

My goal is to create a unique toggle switch design with labels positioned on each side as well as on top. For example, I am working on a left/right switch. The desired output should resemble this:          Side Left [Toggle] Right Below is ...

Can someone please share the steps on how to insert a new row into a PrimeNg DataTable component

I am currently working on enhancing a table by adding a new row underneath the existing data list. This new row will contain a save button and allow users to insert information, such as saving a phone number. While I have indicated where the new row should ...

What is the process for opening a local HTML file in IE compatibility mode?

Having issues with IE compatibility mode while opening my HTML file on desktop. In IE8, unable to switch it to compatibility mode as the icon seems to disappear in local HTML documents. Any insights on this? LATEST UPDATE: Tried three solutions but still ...

Tips for shifting div background image while the push menu is in use

Looking for a Solution: I'm trying to figure out how to adjust my background image within a div when the push menu is active. Here's the CSS I'm currently using: .webcam-bg { background-attachment: fixed; background-image: url("../ ...

Bootstrap sticky footer with adjustable height

Striving to achieve a sticky footer with a custom height on my website has turned out to be more challenging than I initially expected. Presented below is a snapshot of the current state of my footer: https://i.sstatic.net/SXaTA.png The issue arises whe ...

The onClick function for the "div" element is failing to append

I am currently working on a project that involves searching for strings in a database and then appending the selected string to a text box. So far, I have been successful in retrieving the search results from the database and appending them below the text ...

The wrapper is failing to extend the full height of the entire page

Initially, I thought setting the height of my wrapping div to 100% would be a quick task that I could complete in five minutes. However, it ended up taking me hours, so now I'm here hoping someone can assist me with this commonly asked question. The ...