The combination of HTML tables and div elements

Question

The combination of HTML tables and div elements

I'm facing an issue where I have a table with fixed dimensions that needs to be centered on the page. To the right of the table, I want a div element that stretches from the table's right edge to the browser's left edge, but with the image inside the div cropped on the right side to match the div's width.

Similarly, on the left side of the table, I need the same setup but mirrored, as well as below the table.

For reference, here is an example of what I'm trying to achieve -

Any suggestions on how to accomplish this?

javascript html-table

Answer 1

Answer №1

To elaborate on the solution, create a simple layout using div elements:

<div id="wrapper">
    <div id="left-sidebar"></div>
    <div id="main-content"> <!-- Insert your content here --> </div>
    <div id="right-sidebar"></div>
</div>

Then, apply some CSS styling:

#main-content{
    float: left;
    width: 50%;
    height: 200px;
}

#left-sidebar{
    float: left;
    background: #3f3;
    width: 25%;
    height: 200px;
    background-position: right;
}

#right-sidebar{
    float: left;
    background: #f3f;
    width: 25%;
    height: 200px;
    background-position: left;
}

View the live demo here: http://jsfiddle.net/ycS2N/

Answer 2

To elaborate on the solution, create a simple layout using div elements:

<div id="wrapper">
    <div id="left-sidebar"></div>
    <div id="main-content"> <!-- Insert your content here --> </div>
    <div id="right-sidebar"></div>
</div>

Then, apply some CSS styling:

#main-content{
    float: left;
    width: 50%;
    height: 200px;
}

#left-sidebar{
    float: left;
    background: #3f3;
    width: 25%;
    height: 200px;
    background-position: right;
}

#right-sidebar{
    float: left;
    background: #f3f;
    width: 25%;
    height: 200px;
    background-position: left;
}

View the live demo here: http://jsfiddle.net/ycS2N/

The combination of HTML tables and div elements

Answer №1

Similar questions

What's the best way to incorporate necessary styles into text using particular fonts?

What causes the variance in the node_modules directory between a project being installed locally versus globally?

Tips for updating button appearance when clicked using React Bootstrap

Different approach for searching and modifying nested arrays within objects

Attempting to send an identification number as the form value through a form select element, all while displaying the name of the object

What is the best way to manage a group of checkboxes using EJS?

What is the best way to tally the frequency of words in a collection of URLs using JavaScript?

Implement dynamic options in dropdown menu using JQuery AJAX call to retrieve data in JSON format

Creating an overlay button within various containing divs requires setting the position of the button

employing JavaScript to present an image

What is the timing for the execution of top-level non-export code in TypeScript?

Incorporating user input into a div element

Sending user credentials to a new page in JavaScript

Update the default base URL configuration for Axios

Obtain the unique identifier for every row in a table using jQuery

Modify the colors of multiple texts using a concise code block of fewer than 20 lines

What is the procedure for extracting data from a JSON file within an HTML document?

Is it feasible to activate a Bootstrap Tooltip from a different element?

Avoid changing the regex pattern if it is surrounded by a specific character

sharing data between two node.js servers using http