Ways to extend one column to the full width of the viewport horizontally

.container {
max-width: 1170px;
margin: 0 auto;
}

.row::after {
    display: block; 
    content: "";
    clear: both;
}

.col {
    float: left;
}

.col-6 {
    width: 50%;
}

.content {
    font-size: 3em;
    text-align: center;
    color: #fff;

    background-color: green;
    width: 100%;
    height: 300px
}
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
    <div class="row">

        <div class="col col-6">
            <div class="content">Half of container width</div>
        </div>

        <div class="col col-6">
            <div class="content green">The remaining part of the viewport horizontally
            </div>
        </div>
    </div>
</div>
</body>
</html>

I am aiming to create an arrangement where one col-6 takes up the first half of the container's width and the other col-6 occupies the remaining space extending to the end of the viewport. If necessary, I plan to add an image there using absolute positioning. I hope this explanation is sufficient.

htmlcss

Answer №1

Explore using viewport units for your layout:

Check out the updated codepen here

.container {
  max-width: 1170px;
  margin: 0 auto;
}

.row::after {
  display: block;
  ;
  content: "";
  clear: both;
}

.col {
  float: left;
}

.col-6 {
  width: 50%;
}

.content {
  font-size: 3em;
  text-align: center;
  color: #fff;
  background-color: green;
  width: 100%;
  height: 300px
}

.half-vw .content {
  width: 50vw;
}
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Test</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="container">
    <div class="row">

      <div class="col col-6">
        <div class="content">Half of container width</div>
      </div>

      <div class="col col-6 half-vw">
        <div class="content">The remaining part of the viewport horizontally
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Answer №2

Utilizing Flexbox makes this task a breeze.

Simply apply flex-basis : 50% to the first child,

followed by flex-grow : 1 on the second child (Which means, "Occupy all available space").

.row {
  display: flex;
  height: 200px;
}
.row .first {
  background:green;
  flex-basis: 50%;
}
.row .second {
  background: lightblue;
  flex-grow: 1;
}
<div class="row">
  <div class="first">First half</div>
  <div class="second">Rest of the space</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

Step-by-step guide on creating a concealed data variable within a table cell

Looking for a solution to update table cells via AJAX. Need to pass new info and previous cell's ID as hidden variable in query. Unsure on how to hide the ID data, similar to using a hidden input in a form. Any assistance is greatly appreciated. Thank ...

jqueryhtmlajax

How can I extract information exclusively from child nodes with Jsoup?

Currently, I am facing an issue with extracting first-level <li> elements from a <ul> element. Even though I attempt to retrieve only the first-level <li> elements using Jsoup selector or getElementsByTag, the nested <li> elements w ...

javahtmldomscreen-scrapingjsoup

How does selecting one dropdown option within a dynamic form field lead to the automatic activation of another dropdown list in a separate form field?

My goal is to create a dynamic form field with a dropdown list that allows users to add and delete multiple contributors. Currently, my code can successfully add and remove multiple users. However, I encounter an issue where selecting the dropdown list tri ...

javascripthtmlangulartypescriptangular-reactive-forms

Ways to clear a placeholder each time you leave a search box event

I have implemented an overlay search box with the placeholder "Sök," and I want the text entered by the user to be removed and the placeholder to be reset if the user exits the search box by clicking the 'x' in the upper right corner. How can I ...

javascripthtmlcss

Tips for structuring a SQL query result in an AngularJS application

Forgive me if this code is not up to par with the best standards, as I am still relatively new to angular.js. The issue I am facing is that when the data is returned from my query, it appears as a block of text. Despite using echo statements in search.php ...

phphtmlmysqlangularjs

How can you configure fancybox3 to open exclusively on a double-click?

Looking for a solution to open a fancybox gallery with a double click on a grid of sortable images. The goal is to be able to focus on an image with a single click, allowing for sorting using keyboard commands rather than drag and drop. I attempted to use ...

htmljqueryfancyboxdouble-click

What is the best way to incorporate multiple Bootstrap templates into an Angular project without causing conflicts between them?

When incorporating a bootstrap template into the admin interface, it is important to consider that its design may vary from the template used for visitors. Mixing multiple styles based on different templates can lead to conflicting styles and can potenti ...

javascriptcssangularbootstrap-4

Retrieve all tags that come after a specific <a> tag inside a <td> element using Scrapy

Looking to extract information from this specific webpage using Scrapy: My goal is to retrieve the summaries from the GeneCard, which are structured in HTML as follows: <td> <a name="summaries"></a> <br > <b>Entr ...

pythonhtmlscrapy

Tips for maintaining video height consistency while adjusting its attributes

When you click on a button, the video's poster and src attributes change. However, after clicking, the video height briefly becomes 0, causing an unsightly effect on the entire page. How can this be avoided? Please note - lorem.mp4 and ipsum.mp4 hav ...

javascripthtmljqueryvideo

What is the best way to show the selected values of dropdown and checkboxes on a redirected page for confirmation using PHP?

<form action="action.php" method="POST" target="_self"> <table class="main" border="1" height="100%" align="center">t; <h3> <p id="id1" style="background-color: #9FF" >Registration form</p></h3> <tr><t ...

phphtml

What is the best way to show a block of text when hovering over an image with a smooth easing effect

How can I make a block of text appear with ease when hovering over an image of a tree? The current setup works, but the transition effect is not as smooth as I want it to be: HTML: <p id="hover-text1" class="hover-text1"> Accomplished! </p> & ...

javascripthtmljquerycsshover

Issue with bootstrap: the navbar highlight and anchor href are not functioning as intended

I'm currently working on creating a Navbar and implementing the navbar highlighting feature using the active bootstrap class. Below is the code I have tried: <!DOCTYPE html> <html lang="en"> <head> <!-- Bootstrap CSS ...

htmlcssbootstrap-5

Display flex causing Mui LinearProgress Bar to disappear

Looking for a way to create a unique bullet graph using material UI? How about two MuiLinearProgress bars placed side by side with a vertical Divider in between them. Struggling to get them displayed next to each other? <div className={classes.bulletGra ...

cssreactjsflexboxmaterial-uiprogress-bar

Tips for combining or adding all of the values to a single variable during each iteration in jquery

In my sample json structure, I am using a each loop in jQuery within the success function of an ajax call to retrieve all values and display them in alerts. However, currently I am only receiving one value at a time and need to combine all values into a si ...

javascriptjqueryhtmlajax

Tips for making the cursor invisible when only the background is visible

I am trying to hide the cursor when only the background is displayed in HTML/CSS, but unfortunately, it is not working as expected and the cursor still appears over the background. Here is my code: body { background: url('https://miro.medium.c ...

htmlcsscursorbackground-image

Unusual limitation in jQuery/ASP.NET WebForms for text area character count

Utilizing www.lipsum.com to produce 2,000 characters, verifying the character count within the word and ensuring there are exactly 2,000 characters. Within ASP WebForms, I have the subsequent control: <asp:textbox runat="server" ID="txtComment" rows=" ...

javascriptjqueryhtmlasp.net

Activate the class when clicked

I am facing a minor issue with the JavaScript onClick function. I need a function that will target a specific class, like .modal. Currently, it looks like this <div class="modal" onclick="modalFix()"> <p>here is some text</p> </div> ...

javascriptjqueryhtml

Is it possible for Bootstrap 5 to extract data from an excel sheet and showcase it in an HTML table?

I have been scouring the depths of the internet with no success in finding a straightforward solution. I recently put together an HTML page that makes use of Bootstrap tables. Currently, my table contents are hardcoded directly into the HTML. I received a ...

htmlexcelbootstrap-4

Ways to display the main image on a blog post

This piece of code is designed for displaying the relevant post associated with wp_ai1ec_events function display_event($atts ) { global $wpdb; $event = $wpdb->get_results("SELECT * FROM wp_ai1ec_events ORDER BY start"); ...

phphtmlcsswordpress

Enhancing option lists with group options through JQuery

Here is an example of HTML code generated by Lotus Domino without closing tags on <\option>. <select name="Fault" class="textbox"> <option>Single Light Out <option>Light Dim <option>Light On In Daytime <option>Erra ...

jqueryasp.nethtmllotus-domino