Design of web pages, Cascading Style Sheets

I want to add another table next to my dataGrid, floating to the left of it. Like this representation in the main div:

|     |      |
|  A  |   B  |
|     |      |

Here, A represents the current dataGrid containing all user information, and B will be the new content. I attempted to create a table inside the main div with two columns (for left and right parts), but B extended beyond the boundaries of the main div. I also tried using CSS for the left and right columns and added two additional divs, but the desired layout was not achieved. B still appeared below A. Any advice on how to accomplish this would be greatly appreciated. Below is the source code of the page.

The structure of my page is as follows:

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui"
    xmlns:c="http://java.sun.com/jsp/jstl/core">

<ui:composition template="/WEB-INF/templates/BasicTemplate.xhtml">

    <ui:define name="content">
        <div id="container" style="min-height: 100%; position: relative;">
            <div id="left"
                style="background-image: url('#{resource['images/left.png']}'); background-repeat: repeat-y; height: 1800px; width: 163px; float: left;">
                <br />
            </div>
            <div id="main" style="width: 920px; float: left;">
                <f:view>

                    <h:form rendered="#{not empty loginBean.name}">

                        <h:outputStylesheet library="css" name="css.css" />
                        <center>
                            <h2>My Profile</h2>
                        </center>

                        <p:dataGrid var="user" value="#{profileBean.userList}">
                            <p:panelGrid columns="2">
                                <f:facet name="header">
                                    <p:graphicImage value="#{profileBean.image}" alt="${user.name}"
                                        width="150px" height="150px">

                                        <f:param name="userId" value="#{user.id}" />
                                    </p:graphicImage>
                                </f:facet>

                                <h:outputText value="Name: " />
                                <h:inputText value="#{user.name}" />

                                <h:outputText value="Phone: " />
                                <h:inputText value="#{user.phone}" required="true">
                                    <f:validateRegex pattern="[0-9]+" />
                                </h:inputText>


                                <h:outputText value="Role: " />
                                <h:outputText value="#{user.userRole.roleName}">
                                </h:outputText>

                                <f:facet name="footer">
                                    <h:panelGroup style="display:block; text-align:center">
                                        <p:commandButton id="submit" value="Save changes"
                                            actionListener="#{profileBean.editUser()}" >

                                <f:attribute name="profileBean.selectedUser" value="#{user}" />
                                            </p:commandButton>
                                    </h:panelGroup>
                                </f:facet>


                            </p:panelGrid>
                        </p:dataGrid>
                        <hr />
                    </h:form>
                </f:view>
            </div>
        </div>

        <div id="right"
            style="background-image: url('#{resource['images/right.png']}'); background-repeat: repeat-y; height: 1800px; width: 150px; float: right;">
            <br />
        </div>
    </ui:define>
</ui:composition>
</html>

Answer №1

Perhaps utilizing display:table and display:table-cell could be beneficial for your situation

Take a look at this DEMO

Code Snippet:

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
</div>

CSS Styles:

.container {
    display:table;
    border:1px solid #000;
}
.left {
    display:table-cell;
    width:100px;
    height:100px;
    background-color:green;
}
.right {
    display:table-cell;
    width:100px;
    height:100px;
    background-color:Blue;
}

Outcome:

Answer №2

To ensure that "right" and "left" fit within the screen width, adjust their widths accordingly. This can be accomplished by specifying the divs' widths as a percentage. For example, set the width to 25%.

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

JavaScript's connection to the CSS property visibility seems to be causing some issues

The Javascript code seems to be ignoring the CSS display property, even though it's set in the style sheet. I added a debugger statement and noticed that the display value was empty. I've been staring at this for some time now, so I must be overl ...

Is there a way to adjust the width of the datepicker on my device?

I've been attempting to adjust the width of the date picker, but I'm having trouble achieving it. Below is my code: import React from "react"; import ReactDOM from "react-dom"; import { DatePicker, RangeDatePicker } from &qu ...

What is the procedure for modifying the height of a button in HTML?

I wanted to add a flashing "Contact Us" button to the menu bar of my website to immediately attract people's attention when they visit. Here is the javascript code I used: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&g ...

Is there a way to replicate a DIV and its contents in ASP.NET using C#?

I am looking to create a form that can duplicate or clone itself when the CPF/CNPJ (Brazilian personal identification) onchange. Below is the current code I have: <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" r ...

HELP! Imagemaps are being ruined by overlapping DIVs!

I encountered a minor issue. In summary, I have a container div that displays rotating images and image maps with clickable links within each image setup like a gallery with built-in navigation. Recently, I was tasked with adding simple animations to the i ...

Having trouble receiving a complete response when making an ajax request to fetch an entire webpage

Currently, I am experimenting with J-Query Ajax functionality. My goal is to send a request in order to retrieve the entire HTML data of a page that I have hosted on bitbaysolutions.com. The issue arises when I load this URL and execute document.getElement ...

Tips for properly aligning an image within an HTML iframe

I've been working on positioning an image inside an iframe, but so far my research hasn't yielded the results I need. Here's what my code looks like: The HTML <div class="modal-body description"> <div class="modal ...

What is the best way to locate a subnode in XML using XSLT?

I've recently taken over a project that involves using xslt to transform certain html elements. I have been able to successfully match with '/', but I'm encountering issues when trying to run it on a subnode. While searching for soluti ...

iOS 8 requires the use of a numeric keyboard for entering passwords

Is there a way to ensure that iOS displays a numeric keyboard for my password field? Currently, I am utilizing the following code: <input type="password" pattern="\d*" name="pass"/> This method was effective in iOS7, however, it seems that the ...

The HTML generated by Selenium using Javascript is still missing some elements, despite accessing the document.body.innerHTML

Attempting to retrieve the HTML from a webpage that undergoes modification by JavaScript post-loading. Followed directions in this guide, executing the command below in my Python script after initial page load: html = browser.execute_script("return docume ...

How can you determine the dimensions of an image in HTML using Python?

Is there a way to extract image size information from source code using Python? tree = etree.HTML(source_page_text) image_list = tree.xpath('//img[@src]') The 'img' tags with 'src' attributes can be found using xpath as show ...

How to utilize jQuery to eliminate HTML onchange code

This block of code features an HTML onchange attribute as well as the use of jQuery's change event on an input text. I want only the jQuery change event to take precedence. I have attempted to use both unbind and off without success. Can someone prov ...

Position items within the dynamically generated div without appending them

Utilizing JavaScript, I dynamically generate a line but struggle to position two balls at both the 1/3 mark from the beginning and end. For reference, please view the image below. I aim to have two balls appear upon pressing enter in the input box. Despite ...

Building a unique mobile number input box with country code in HTML

Struggling to design a unique mobile input box that separates the mobile number and country code with a divider. Need some assistance in creating this custom input field. Design https://i.sstatic.net/M0Wvs.png Current Implementation <div cla ...

What is the process for obtaining an HTML form, running it through a Python script, and then showcasing it on the screen

I am inquiring about the functionality of html and py script. .... The user enters 3 values for trapezoidal data from the html form: height, length of side 1, and length of side 2, then clicks submit. The entered values are then sent to be calculated using ...

Auto-collapse sidebar upon clicking anywhere on the page

I have a dynamic sidebar that appears when the user clicks on a hamburger button. Here is the layout: $('#nav-toggle').click(function() { if($('#nav-toggle').hasClass('active')){ $('.menu').animate({ r ...

Overlapping Bootstrap columns detected when viewing on smaller screens

In an attempt to create a user-friendly layout, I developed two columns: one for the title and another for projects, with the latter being scrollable. The design functions as intended on desktop view but encounters an issue when the viewport is reduced to ...

Encountering an error while trying to execute `$(document).ready(function() {}

Recently, I delved into the world of JavaScript, particularly Jquery. As I encountered the $(document).ready(function() {}); statement and added it to my code, I faced an issue when placing it within the header tag of my HTML. The script tag would display ...

Align the Vuetify v-btn to the right in a horizontal layout

I'm having trouble aligning a v-btn to the right side. Despite trying various options, I can't seem to get it to work. I just want to know the simplest way to ensure that the register button is positioned at the very right of the column. For the ...

Overflow of Div Content

I need a way to showcase a collection of around 30 links in a horizontal layout without the links wrapping to a new line if they exceed the width of the parent container. A horizontal scroll should appear for users to navigate through the overflowing links ...