CSS table cell doesn't expand to the full width of the screen

I am experiencing an issue with the layout of my website. Here is the code snippet causing the problem:

<div class="xx-row">
    <div class="background-image" style="background-image: url('<?php echo theme('background_image', 'url'); ?>');">
        <div class="yy-column">

        </div>
    </div>  
</div>

.xx-row {
    display: table;
}

.yy-column {
    display: table-cell;
}

Despite setting the width to 100%, the columns do not fill the width of the page when viewed in full screen mode. Manually setting the width works, but I prefer not to do this. The desired look can be seen below:

https://i.sstatic.net/S7g6d.png

Upon inspecting the elements, the parent div and xx-row appear fine while the background image after xx-row stretches across the screen correctly. However, the issue lies with the columns as setting it to 100% causes the left column to take up approximately 80% of the screen.

htmlcss

Answer №1

There may be issues with the width of a parent element affecting your .row class. Take a close look at all parent elements to identify the culprit. Additionally, consider checking the .column and .row classes in the console for any conflicts with other CSS frameworks. Make sure to include width: 100%; for your table element.

UPDATE

The mistake was that the direct parent of .column was not .row, but rather .background-image. I adjusted the code to use display: table and display: table-cell correctly, ensuring that the elements are direct relatives.

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.xx-row {
  display: block;
  width: 100%;
  height: 100%;
}
.background-image {
  display: table;
  width: 100%;
  height: 100%;
}

.yy-column {
  display: table-cell;
}

.one {
  background: #333;
}

.two {
  background: #000;
}
<div class="xx-row">
    <div class="background-image" style="background-image: url('<?php echo theme('background_image', 'url'); ?>');">
        <div class="yy-column one">

        </div>
        <div class="yy-column two">

        </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

What is the best way to dynamically adjust the size of a Google map on my website automatically

I need assistance with placing a Google map on a webpage along with textboxes in the div below it: <div id="map_area"> <div id="map_canvas"></div> </div> <div id="date_range"> <input type="text" id= ...

csshtmlheight

RStudio Connect now automatically inserts CSS code into cells when updating

My current project involves creating an app for holiday requests. The main page of the app is displayed like this: https://i.sstatic.net/z2qma.png At the bottom right corner, you'll notice a column labeled "Accepted?" which displays either "OK" or " ...

cssrshinyrsconnect

Is there a way to separate a string similar to the way bbcode does?

$answer = "This is simply a placeholder text example. WOW! Check out this link [link=http://www.yahoo.com] yahoo yahoo[/link]"; Hey there, I am developing a discussion platform, and my goal is to allow users to use specific tags like [link=*link*]*text*[/ ...

phphtmlforum

Display additional information from a JSON file after choosing an ID with AngularJS Select

After saving a JSON file filled with information, I managed to successfully populate a select menu with the names of each element from the JSON data using this code snippet: <select ng-model="car.marca" ng-options="item.brakeId as item.name for item in ...

javascripthtmlangularjsformsmodel-view-controller

Utilizing a percentage for the border-width property

I want to remove a triangle from the bottom of a div using a CSS trick involving borders. This involves creating a border with one transparent side and coloring the other sides to create the triangle effect. The issue I'm facing is that the div has a ...

htmlcssresponsive-design

Decrease the rate of scrolling

Hey there, I'm having trouble finding information on this topic. I understand that it's not ideal to alter the scroll speed of a website, but I need to do so for a site that is more like a game than a typical website. Is there anyone who can gu ...

jqueryhtmlcssscroll

How can you use JavaScript to create a JSON object using values from an HTML form textarea and then send

I need to create an HTML form that will send specific information in the Http-request body. { “info” : { “id” : “123” “text1” : <data from html text-box> } Therefore, my goal is to convert the provided data into a JavaScri ...

javascripthtmljson

How to style the videojs chapter menu with CSS to extend the box to the full length of the line

I am currently working on customizing the videojs CSS for the ChapterButton menu in order to make it expand to accommodate varying line lengths without wrapping. Even though I can set it to a fixed width, I require it to be able to adjust to different line ...

cssvideo.js

toggleClass is failing to animate

For optimal viewing, try on mobile size by using Google inspect to simulate an iPhone 6. This content may not display until it reaches a certain breakpoint. I have applied a max-height to one class and then used .toggleClass to add another class with a la ...

jqueryhtmlcss

Updating an image source using JavaScript without relying on a default image source specified in the HTML code

Struggling to change the image source path using JavaScript? Want to change the page color randomly after each load? I created SVGs in different color types - blue, red, yellow... but can't get it to work. The path seems correct when tested normally i ...

javascripthtmljqueryimagebackend

Guide for positioning the p-checkbox label to the left of the checkbox using PrimeNG

<p-checkbox name="group1" [value]="true" label="Outsourcing" style="margin: 0 25px"></p-checkbox> I am looking to change the position of the label from the right to the left ...

htmlangularprimeng

Issues with hover effects not applying to background colors (ReactJS)

React Component: import React from "react" const Category = () => { return ( <table cellSpacing={25}> <tr> <td id="fruits">Fruits & Vegetables</td> ...

javascripthtmlcssreactjs

The divs descend one after another with no problems related to margins or padding

Having some trouble creating a unique WordPress theme with Bootstrap3. I can't seem to get my divs to behave properly and I've tried everything from display: inline, vertical-align: top, floats, clears, etc... but nothing seems to work. Here is ...

htmlcsswordpress

What is the process for customizing the color of a w3.css button?

<link type="text/css" href=" https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"> <div class="w3-bar w3-red"> <a class="w3-bar-item w3-button w3-hover-blue">Button</a> </div> I am looking to implement a funct ...

javascriptjqueryhtmlw3.css

Transform the HTML content into a JSON format file

I'm currently developing an online marketplace and trying to convert all product information like name, price, and description into json format. I have a sample code featuring a selection of products displayed in rows. <div class='cakes'& ...

javascripthtmlcssjsone-commerce

Is it unnecessary to use both "width: inherit" and "float: none

When learning about responsive design, one pattern that is frequently seen is: @media screen and (max-width: 480px){ .class1{ width: inherit; float: none; } .class2{ width: inherit; float: none; } f ...

htmlcssresponsive-design

Validating forms with pure JavaScript

Hello, I am currently working on my very first contact form using HTML, Bootstrap, and JavaScript. While I have managed to prevent the form from submission when any input is missing, I am facing an issue with allowing the form submission once all inputs ...

javascripthtmlbootstrap-4

What methods can be used to incorporate animation when the display attribute transitions to none?

Is there a way to add animation in a Vue app when replacing elements? I would like the transition from, for example, clicking on a div with 'Num 1' to the divs with class 'showing' not disappear abruptly but smoothly, such as moving to ...

javascriptcssvue.js

ASP.NET Expandable Navigation Bar

I'm struggling to create a collapsible navigation bar for my website that works well on mobile devices. Here's the code for my navigation bar: <div style="padding-bottom: 50px;"> <header id="main-header"> <div ...

htmlcssasp.nettwitter-bootstrap

jQuery - final slide not triggering interval, causing animation malfunction

I am working on creating a slider using multiple divs instead of images. I have a total of 3 divs, and while the first two transition smoothly as intended, the third div seems to fly away too quickly - it briefly appears and then snaps back to the first di ...

javascriptjqueryhtml