css, predetermined dimensions

I am looking to create three tables within divs. The left and right sides should each take up 50% of the available window space. The center table should remain fixed.

Everything appears to be working correctly, except the content on the right side is overflowing off the table.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<style type="text/css">
body{
    margin:0;
    padding:0;
}
#left{
    float: left;
    width: 50%;
    background: #FDA02E;
    margin-left: -300px;
}
#center{
    float: left;
    width: 600px;
    margin-right: 300px;
    background: #C8FF98;
}
#right{
    float: left;
    width: 50%;
    margin-left: -300px;
    background: #FDE95E;
}
</style>
</head>
<body>
<div id="pag">
    <div id="left">
        Left
    </div>
    <div id="center">   
        Center
    </div>
    <div id="right">
        Right
    </div>
</div>
</body>
</html>
csshtml

Answer №1

I'm not quite sure about the concept here, but I have a functional version:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<style type="text/css">
body{
    margin:0;
    padding:0;
}
#left{
    float: left;
    width: 50%;
    background: #FDA02E;
}
#center{
    position: absolute;
    width: 600px;
    left: 50%;
    margin-left: -300px;
    background: #C8FF98;
}
#right{
    float: right;
    width: 50%;
    margin-left: -300px;
    background: #FDE95E;
}
</style>
</head>
<body>
<div id="pag">
    <div id="left">
        Left
    </div>
        <div id="center">   
        Center
    </div>
    <div id="right">
        Right
    </div>
</div>
</body>
</html>

Answer №2

This solution ensures zero overlap in content by using borders on the side columns.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<style type="text/css">
body{
    margin:0;
    padding:0;
}
#left-wrapper{
    width: 50%;
    float: left;
    margin-right: -600px;
    padding-right: 300px;
}
#left {
    margin-right: 300px;
    background: #FDA02E;
    border: 1px solid black;
}
#center{
    float: left;
    width: 600px;
    margin-right: -300px;
    background: #C8FF98;
}
#right-wrapper{
    width: 50%;
    float: left;
}
#right {
    margin-left: 300px;
    background: #FDE95E;
    border: 1px solid black;
}
</style>
</head>
<body>
<div id="pag">
    <div id="left-wrapper">
        <div id="left">
            Left<br><br>
        </div>
    </div>
    <div id="center">   
        Center<br><br><br><br><br><br><br><br><br><br><br><br>
    </div>
    <div id="right-wrapper">
        <div id="right">
            Right<br><br><br><br>
        </div>
    </div>
</div>
</body>
</html>

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

Removing a background by linking a CSS file

Issue Resolved: I have found the solution. The problem was that the css document still contained html tags. Thank you to everyone who provided assistance. While designing a website using css, I encountered a situation where the site worked perfectly when ...

htmlcssfilehyperlinkinclude

JQuery - stylish vertical accordion navigation menu

I'm currently working on a vertical accordion-style sidebar navigation system. Everything seems to be functioning properly, but I've encountered some issues with the icons that I'm using from Twitter Bootstrap 3. You can view the code on th ...

javascriptjqueryhtmlcsstwitter-bootstrap

Secure the anchor ahead of the table row

Currently, I am generating my code dynamically using PHP and assigning the ID attribute from the database to the anchor href. This is how it looks: PHP <table> <tr><th>ID</th></tr> <?php if ($stmt = $mysqli->prepare("S ...

phphtml

Changing an element's color dynamically does not affect the color of the bullet point

When using Chrome (Version 45.0.2454.101 m), I noticed that when I add a class to a list element to change its color, the bullet point color is only updated when the window is resized or repainted. $("#a").click(function() { $("#a").addClass(&apo ...

jquerycssgoogle-chrome

When scrolling, the text or logo inside the navbar seems to dance with a slight wiggling or

I recently implemented a code to create a logo animation inside my navigation bar that expands and contracts as I scroll, inspired by the functionality of the Wall Street Journal website. However, this implementation has caused some unintended side effects ...

javascriptjqueryhtmlcss

Modify the background color of the entire page when the main div is clicked

I am attempting to alter the background color of my entire page when the div with id main is clicked. You can view the code here: $(document).ready(function() { var color = 1; $('#main').click(function(){ if (colo ...

javascriptjqueryhtmlcss

Error: Codeigniter AJAX endpoint cannot be located

While working on an ajax call in CodeIgniter using the .ajax function, I encountered a problem. My controller is named Control and it has a function called Login. When I try to execute this code: $.ajax({ url: "Connection/Login", type: " ...

jqueryhtmlajaxcodeigniter

Obtain all the data in the table cells using Jquery

I've been tasked with a unique challenge. There's a table with a form inside it, and I'm using Jquery to handle the form. Is there a way to retrieve the data from the <td></td> element without any specific id or class? The situa ...

jqueryhtmlforms

Is there a way to set the focus on a text box automatically when a page is loaded, even without support for JavaScript?

On my form, I have a few text fields and I am looking to automatically set the cursor (auto focus) on the first text field when the page loads. I aim to accomplish this without relying on javascript. ...

csshtml

BEM Methodology: Ensuring the CSS value in one block takes precedence over property definitions in another block

I'm facing a challenge with BEM as I try to make properties from one block take precedence over styles in another. Some might suggest adding a modifier for .button, but in some cases, specific properties need to be applied only on certain pages withou ...

csssassoverridingbem

Stylish CSS Effects on Hover

I'm currently in the process of developing a website and I would like to enhance my buttons with a hover effect that involves loading another image or button with a slightly different color scheme. These new images have been created in Photoshop. How ...

htmlcsshovereffects

Retrieving information from a database using PHP PDO to populate a dropdown list

On my HTML page, I have a form that allows users to insert data into the database. Some fields in the form require dropdown lists, and I want to populate these dropdowns with data from the database. Previously, I had hardcoded the dropdown options like th ...

phphtmlpdo

The links are displaying on separate lines instead of being inline

There is a tags section on the blog detail page. The html code for it is as follows: <td class="tags"> <a href="">tag1></a>, <a href="">tag2</a> </td> However, the tags are appearing on separate lines instead of in ...

htmlcss

Looking to style a <p> element with CSS?

In the div class index, there are two additional divs without any class or id names, along with two <p> tags. My goal is to style these two <p> tags. <div class="doubt"> <div> <p>Hello world</p> <div> ...

htmlcssstyles

Handling overlapping elements with pointer events

Suppose I have two overlapping divs, along with the following jQuery code snippet: $( "#div1" ).click(function() { console.log('click on div1'); }); $( "#div2" ).mousemove(function() { console.log('mousemove on div2'); }); From w ...

javascriptjqueryhtmlcss

Transfer data from a div to JavaScript

Within a php file, there is a div in which an id and some data are returned. Take a look at the code: <div id="dom-target" style="display: none;" data-stuff="2017, 8, 20, 0, 0"></div> So, I am trying to retrieve the value of data-stuff and pa ...

jqueryhtml

Using JQuery to search for and remove the id number that has been clicked from a specific value

I am in need of assistance with deleting the clicked id number from an input value using jQuery. I am unsure of how to proceed with this task and would appreciate some guidance. To simplify my request, let me explain what I am trying to accomplish. Take ...

javascriptjqueryhtml

Strange occurrences observed in the functionality of Angular Material Version 16

Encountered a strange bug recently. Whenever the page height exceeds the viewport due to mat-form-fields, I'm facing an issue where some elements, particularly those from Angular Material, fail to load. Here's a GIF demonstrating the problem: GI ...

htmlangulartypescriptangular-material

Two tables arranged in a nested grid layout

Picture a bootstrap grid setup with an 8:4 layout. <div class="container"> <div class="row"> <div class="col-md-8"> </div> <div class="col-md-4"> </div> </div> </div> ...

htmlcssbootstrap-4grid-layout

Guide on loading a div with a flash object without showing it on the screen (element is loaded but remains hidden)

Is there a way to achieve an effect that is somewhere between using display: none and visibility: hidden? Specifically, I am trying to have a div element (containing flash content) loaded but not displayed on the page. Just for clarification: I have embed ...

javascripthtmlcssflashswfobject