Expanding two div elements to fill the entire width of the page

I currently have the code in this fiddle:

HTML

    <div class="stats-box">
        <div class="stats-title">Stats</div>
        <div class="stats-group">
            <div class="stats-team red"><div class="stats-amount">367</div></div>
            <div class="stats-team yellow"><div class="stats-amount">412</div></div>
        </div>
    </div>

SCSS No fancy SCSS, just nesting and variables, so basically ordinary CSS :-)

$red:       #e74c3c;
$yellow:    #f1c40f;
$white:     #ecf0f1;
.stats-box {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    font-weight: normal;
    color: white;
    background-color: $white;

    .stats-title {
        color: black;
        font-weight: 700;
        text-align: center;
    }

    .stats-group {
        padding: 10px 0px;

        .stats-team {
            display: inline-block;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            padding: 10px;
            width: 50%;

            .stats-amount {
                background: rgba(0,0,0,0.13);
                -webkit-border-radius: 4px;
                -moz-border-radius: 4px;
                border-radius: 4px;
                padding: 7px 0px 11px 0px;
                width: 100%;
                height: 16px;
                text-align: center;
                margin: 0 auto;
            }
        }
    }

}

.red {
    color: $white;
    background-color: $red;
}

.yellow {
    color: $white;
    background-color: $yellow;

}

I am trying to achieve making the red and yellow boxes cover exactly 50% of the screen and be positioned side by side. I want them to keep their 10px padding as well, but I am facing difficulty with this task. Whenever I set the width to above 48%, the yellow box shifts down to the next line (which might vary based on screen resolution).

The issue seems to be centered around this specific section, but I haven't been able to find a workaround yet.

.stats-team {
    padding: 10px;
}

Am I missing something obvious here or am I simply asking for too much?

htmlcsssass

Answer №1

To ensure that the red and yellow divs have a width of 50% and can handle any amount of padding, simply add box-sizing: border-box;. Also, include float: left; to align the elements next to each other.

.stats-team {
  box-sizing: border-box;
}

Check out this FIDDLE for reference.

Answer №2

One way to accomplish this using only CSS is:

HTML

<div class="left">LEFT DIV</div>
<div class="right">RIGHT DIV</div>

CSS

.left,
.right{
    float:left;
    height:100px;
    width:50%;
    padding:10px;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
}
.left{
    background:#58c;
}
.right{
    background:#b00;
}

http://jsfiddle.net/T23Bf/

Understanding BOX-SIZING property

content-box (Default value)

With this value, the specified width and height apply to the content box of the element, with padding and border outside that size.

border-box

Padding and Borders are included in specified width/height.

By using this value, the specified width and height include the padding and border, resulting in the content area being calculated based on the total dimensions of the element. This helps in more accurate control over sizing the elements.

Answer №3

Check out the visual representation here: http://codepen.io/anon/pen/KuJzs

If you want to achieve this effect, remember that using box-sizing: border-box; is crucial.

This is how the HTML structure should look like:

<div class="stats-box">
    <div class="stats-title">Stats</div>
    <div class="stats-group">
        <div class="stats-team red"><div class="stats-amount">367</div></div>
        <div class="stats-team yellow"><div class="stats-amount">412</div></div>
    </div>
</div>

And here's the corresponding CSS:

.stats-box > div {
  width: 50%;
  float: left;
  padding: 25px;

  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box; 
}

Answer №4

Embracing the power of flexbox as the ultimate solution for layouts...

I strongly believe in maintaining a clear division between layout elements and content elements - it ensures reliability, ease of maintenance, and preserves the integrity of your grid and content.

CSS

/* styling for layout elements */
.row { clear:both; }
.row:after { clear:both; height:0; visibility:hidden; content:"." }
.col { float:left; width:50% }

/* styling for content elements */
.content { margin:10px; padding:10px; 
    /* customize padding and positioning as needed */ }

HTML

<div class="row">
  <div class="col">
    <div class="content"> <p> insert text and adjust paddings here </p> </div>
  </div>
  <div class="col">
    <div class="content"> <p> add more text and paddings here </p> </div>
  </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

Fixed width div displaying too large on iPad screens

Seeking to enhance the performance of a specific webpage on iPad, I have conducted a test. To view the test-page, please click on this link: The page includes a black box with a width set at 800px. However, upon viewing it on my iPad and taking a screensh ...

htmlcssipad

Calculating the discrepancy in offsetTop values

Having trouble understanding offsetTop differences? When I input individual values for i and n, the output is correct. Any ideas where I might be going wrong? <html> <body> <div class="names" style="position: absolute; left: 13px; top: ...

javascripthtmlloopsdom

The site cache appears to be deactivated, but the source of the deactivation remains unclear. Can you help identify the issue?

On my PHP website, the <head> tag in the HTML includes: <meta http-equiv="Cache-Control" content="max-age=300"/> However, when checking the headers, it shows: Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre- ch ...

phphtmlcaching

Center text vertically within a Bootstrap anchor element (button)

I am facing difficulty in vertically aligning text within a Bootstrap (3) <a> element while it works fine in a <button> Here is the HTML : <button class="btn">some text<span class="glyphicon glyphicon-play pull-right"></span> ...

csstwitter-bootstraptwitter-bootstrap-3

Using JavaScript, what is the best way to change the x/y position of an element?

https://i.sstatic.net/5jUa4.png I have included an image to illustrate my request. In the setup, there is a container with a yellow border and content enclosed in a red border. My goal is to have the content scroll left by the width of one container when t ...

javascripthtmlcss

Displaying a variety of images in an HTML document can be achieved without the need to manually write out a separate tag

As a newcomer to HTML, I find myself faced with a challenge. I have a folder containing 100 images, all sharing a common prefix in their names but differing in the second part. For instance, some examples include: "content_diffusion_delay_AthfT@jurEYTgf" a ...

htmlimageautomation

My flexbox doesn't seem to be working properly. I'm attempting to utilize the column layout on a form element

my desired output looks like: ┌─────┐┌─────┐ │ A ││ │ └─────┘│ │ ┌─────┐│ B │ │ C ││ │ └─────┘│ │ └─────┘ this i ...

htmlcssflexbox

Disable Jquery function upon user hovering over a specific div element

I am working on a jQuery AJAX function that retrieves data from a PHP backend script. Here is the code snippet: function fetchPosts() { postFunction = $.ajax({ url: 'backend/posts.php', success: function(data) { $( ...

phpjqueryhtmlajax

The best approach to incorporating interactive animation in next.js

My vision is to develop a character creation application using next js. The app should empower users to customize the character using sliders and gender selection buttons. The ultimate goal is to have a 2D animated version of the character that dynamicall ...

javascriptcssnext.jsfrontendcss-animations

Execute the button click function repeatedly at specific time intervals using Javascript

I have a submit button on my page that uses the POST method to send a value. <button id="log" class="btn bg-purple" formmethod=post value="2" name="start" formaction=start_server.php>Get Log</button> Clicking this button retrieves a log file ...

javascriptphpjqueryhtml

blurring out of an input field and a division element

I am currently working on creating a dropdown suggestion box that hides when the input field and dropdown box are no longer in focus. My HTML code: <input type="text" id="user_address"> <div id="user_address_sg">SUGGESTION</div> <di ...

javascriptjqueryhtmlcss

Learn how to incorporate a vertical divider pipe into your website using Bootstrap

Hello, I'm having trouble adding a separator between nav-links that actually works. I tried adding the following code snippet: nav-link:after { content:"|"; } But unfortunately, it's either not working at all or appearing on the left side of th ...

cssbootstrap-4

Display the div without using javascript/jquery if the radio button is chosen

Could someone help me find a solution similar to the one mentioned here: If Radio Button is Selected Show Div I am specifically looking for a way to achieve this using only HTML and CSS, without involving JavaScript or jQuery. Any suggestions would be gre ...

htmlcss

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

Tips for adjusting column width with flexbox intersections

I am currently working on a React web application that has minimal styling. I have divided the content into 3 columns, with the leftWrap being col-3, rightWrap being col-4, and the remaining width is for centerWrap. I want to apply flex ...

javascriptcssreactjsbootstrap-4less

Customizing Bootstrap navbar classes - ineffective

Having trouble overriding some of Bootstrap's navbar classes. I've tried using !important, but would prefer to avoid it if possible. This is the HTML I'm working with: <nav class="navbar navbar-default" role="navigation"> <ul cl ...

htmlcssbootstrap-4

Tips for displaying neatly formatted raw HTML code within an editable DIV element:

I am encountering an issue while attempting to display raw HTML within an editable DIV, as the <div> element is being turned into a comment. Here is the HTML I want to display (including the ``) : \`<div class="flexContainer">HE ...

javascripthtmlpretty-print

Maintain the image's aspect ratio by setting the width equal to the height when the height is

I am uncertain if achieving this purely with CSS is possible, but it would be ideal. I currently have an image: <img src="#" class="article-thumb"> CSS: .article-thumb { height: 55%; } Is there a way to set the width equal to the height? My g ...

htmlcss

Incorporating mat-icons within a dropdown menu in Angular 6

I am looking to enhance a select element by inserting mat-icons representing different fruit statuses instead of displaying their names or ids. Despite my efforts, I have been unable to substitute the text with icons successfully. Methods I have attempted ...

angularhtmltypescriptangular6

Different ways to position 3 images side by side and ensure they are centered on the

I am struggling to center 3 images horizontally on my webpage. Despite aligning them in a row, I cannot seem to achieve the desired centering effect. I have tried various methods to center the images, but nothing seems to work effectively. My goal is to ...

htmlcss