Relocate a table beside an image

Check out the layout of my webpage:

-------------
-------------   
 Image here     
-------------
-------------
Table1 here
Table2 here
Table3 here

My goal is to redesign it to look like this:

-------------
-------------   
 Image here     Table1 here
-------------
-------------
Table2 here     Table3 here

Here's the HTML code snippet:

   <img class="image" src="somesrc"> 
   <table id="table-1">
       <tbody>
         <tr class="row-1">
           <td class="column-1">something</td><td class="column-2">something</td>
         </tr>
         <tr class="row-2">
           <td class="column-1">something</td><td class="column-2">something</td>
        </tr>
Repeat for other 2 tables with different IDs

Here is the CSS snippet:

.image {
 height: auto;
 width: 250px;
}

#table-1, #table-2, #table-3 {
    width: 40%;
    font-weight: bold;
}

#table-1 .column-1, #table-2 .column-1, #table-3 .column-1 {
    background-color: #000000;
    color: #fff;
    width: 40%;
}

I'm struggling to figure out how to position table1 as desired. Each table also has a heading above it.

htmlcss

Answer №1

Here is a code snippet for you to try:

    <div class="image">
   <img src="somesrc"> 
   </div>
   <table id="table-1">
       <tbody>
         <tr class="row-1">
           <td class="column-1">something</td><td class="column-2">something</td>
         </tr>
         <tr class="row-2">
           <td class="column-1">something</td><td class="column-2">something</td>
        </tr>

Here is the CSS code:

.image {
 height: auto;
 width: 250px;
 float:right;
}

#table-1, #table-2, #table-3 {
    width: 40%;
    font-weight: bold;

}

#table-1 .column-1, #table-2 .column-1, #table-3 .column-1 {
    background-color: #000000;
    color: #fff;
    width: 40%;
    float:left;
}

I have included a div with the class image and removed the class from the <img> tag. I have also added float:right to the image div and float:left to the table. You can view the result in this JSFiddle link.

Answer №2

To arrange your elements properly, you should use the float property. Here is a sample code snippet that demonstrates how to do this:

table {
  width: 40%;
  margin: 10px;
  border-collapse: collapse;
}
table,
th,
td {
  border: 1px solid black;
}
.image {
  height: 100px;
  border: 1px solid;
  margin: 10px;
  width: 40%;
}
.pull-left {
  float: left;
}
.clearfix {
  clear: both;  
}
<div class="image pull-left">IMAGE</div>
<table class="pull-left">
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
  </tr>
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
  </tr>
</table>
<div class="clearfix"></div>
<table class="pull-left">
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
  </tr>
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
  </tr>
</table>
<table class="pull-left">
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
  </tr>
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
  </tr>
</table>

Answer №3

When it comes to the visual spacing between an image and a table, there are various ways to accomplish it. One common method is to use a grid system to layout the elements on a page. This can be achieved by creating a grid using CSS frameworks such as Bootstrap, Skeleton, or Foundation.

Basic CSS code for creating a grid: 

* {
  box-sizing: border-box;
}
table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #ccc;
}
.row {
  margin-left: -10px;
  margin-right: -10px;
  overflow: hidden; /* cheap clearfix - should use: http://nicolasgallagher.com/micro-clearfix-hack/ */
}
[class^="col-"] {
  float: left;
  padding-left: 10px;
  padding-right: 10px;
}
.col-half {
  width: 50%;
}
<div class="row">

  <div class="col-half">
    <img src="http://placehold.it/250x175/ffcc00/?text=example">
  </div>

  <div class="col-half">

    <h2>Table 1</h2>

    <table>
      <tr>
        <td>1</td>
        <td>2</td>
      </tr>
      <tr>
        <td>3</td>
        <td>4</td>
      </tr>
    </table>

  </div>

</div>

<div class="row">

  <div class="col-half">

    <h2>Table 2</h2>

    <table>
      <tr>
        <td>1</td>
        <td>2</td>
      </tr>
      <tr>
        <td>3</td>
        <td>4</td>
      </tr>
    </table>

  </div>

  <div class="col-half">

    <h2>Table 3</h2>

    <table>
      <tr>
        <td>1</td>
        <td>2</td>
      </tr>
      <tr>
        <td>3</td>
        <td>4</td>
      </tr>
    </table>

  </div>

</div>

Answer №4

Enclose the image and a table within one element (such as <section>), and the remaining two tables in another block element ( <section>). Then wrap everything in a separate element (<main>). Utilize display: table-* CSS properties on each container according to the example in the Snippet.

#main {
  display: table;
  table-layout: fixed;
  width: 100vw;
  height: 100vh;
}
section {
  display: table-row;
}
figure,
table {
  width: 50%;
  height: 100%;
  display: table-cell;
  border: 2px dashed red;
}
td {
  width: 25%;
  border: 1px solid black;
}
img {
  max-width: 100%;
  margin-bottom: calc(50% - 25vh);
}
figcaption {
  text-align: center;
  margin: 0 0 5px 0;
  border: 1px solid blue;
}
<main id='main'>
  <section>
    <figure>
      <figcaption>IMAGE</figcaption>
      <img src='https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png'>
    </figure>
    <table>
      <caption>TABLE1</caption>
      <tbody>
        <tr>
          <td>TD</td>
          <td>TD</td>
          <td>TD</td>
          <td>Tables will stretch with their content accordingly.</td>
        </tr>
        <tr>
          <td>TD</td>
          <td>This content is added just to fill out the rest of the dead space.</td>
          <td>TD</td>
          <td>TD</td>
        </tr>
        <tr>
          <td>This content is added just to fill out the rest of the dead space.</td>
          <td>TD</td>
          <td>TD</td>
          <td>TD</td>
        </tr>
      </tbody>
    </table>
  </section>
  <section>
    <table>
      <caption>TABLE2</caption>
      <tbody>
        <tr>
          <td>TD</td>
          <td>TD</td>
          <td>TD</td>
          <td>This content is added just to fill out the rest of the dead space.</td>
        </tr>
        <tr>
          <td>TD</td>
          <td>The maximum width of each table is 50% of viewport</td>
          <td>TD</td>
          <td>TD</td>
        </tr>
        <tr>
          <td>This content is added just to fill out the rest of the dead space.</td>
          <td>TD</td>
          <td>TD</td>
          <td>TD</td>
        </tr>
      </tbody>
    </table>
    <table>
      <caption>TABLE3</caption>
      <tbody>
        <tr>
          <td>TD</td>
          <td>TD</td>
          <td>TD</td>
          <td>This content is added just to fill out the rest of the dead space.</td>
        </tr>
        <tr>
          <td>TD</td>
          <td>This content is added just to fill out the rest of the dead space.</td>
          <td>TD</td>
          <td>TD</td>
        </tr>
        <tr>
          <td>TD</td>
          <td>TD</td>
          <td>TD</td>
          <td>This content is added just to fill out the rest of the dead space.</td>
        </tr>
      </tbody>
    </table>
  </section>
</main>

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

Grid alignment issue with images on Bootstrap 4.0 - resolution needed

Currently, I am working on a mini project that involves recreating a website using Bootstrap 4. I am at a stage where I need to display three images in a grid format with two on the top and one on the bottom. The challenge is to make the top two images eve ...

csstwitter-bootstrapbootstrap-4

Floating image along with accompanying text; CSS styles have not been incorporated

As I work on developing my web application and utilize a bootstrap template, I encountered a situation where I needed to include an inline image with text, with the image floating to the left and the text positioned to the right. The paragraph element in ...

htmlcss

Looking for assistance in creating an html page with a rotating CSS div containing unordered lists and list items

I am sharing the HTML content of my test page that I am looking to customize similar to some websites I have come across. My goal is to create a rotating div with an unordered list (ul li), where only three divs are displayed at a time while the rest remai ...

javascripthtmlcss

Tips for creating a fixed element with ScrollTrigger and GSAP

How can I prevent the right div from jumping on top of the left div when using a scroll trigger to make the left div's position fixed? gsap.registerPlugin(ScrollTrigger); const tlfour = gsap.timeline({ scrollTrigger: { trigger: ".ma ...

javascripthtmlcssgsapscrolltrigger

Tips for preventing breaks in typography

I have implemented a material ui Typography component, but it's causing a line break even though there is enough space. Here is the code snippet: <Box flexDirection="row"> <Typography> Gender: <RadioGroup row ...

javascriptcssreactjsmaterial-ui

What is the best way to ensure that the text within Span children is properly laid out to match the width of the parent div tag?

This particular instance involves setting the width of the div tag to 200px and organizing all the span children to occupy the entire width of the parent div tag. If the first row is filled, the span tags should then flow into a second row. My attempt at ...

htmlcss

Creating a page turn effect during the loading of a page within an iframe

Is there a way to create a page turn effect similar to reading a book for an iframe that is loading dynamic content? Any suggestions would be greatly appreciated. Link: ...

jqueryhtmlcss

Alter the Color of the 'div' According to the Background

At the bottom right of my website, there is a black chatbot icon. The web footer also has a black background. To create a clear contrast, I have decided to change the color of the chatbot to white as users scroll to the bottom of the page. I implemented t ...

javascriptcssangularsassfrontend

I am unable to make any changes to the CSS in the WordPress code that is already integrated

I have created a static web page to serve as my primary homepage. The page is built using HTML and CSS, with some PHP code pulled from My WordPress integrated into it. One of the functionalities I've added is to display the three most recent posts on ...

htmlcsswordpress

Using JQuery to extract the unique identifiers of nodes within a tree view format for the purpose of storing data according to these identifiers

Using Angular to display data in the view, I have a sample code here. When a specific age group category is clicked, I want to populate a form with data and save the entire dataset, including the parent node IDs. I am facing an issue with fetching the pa ...

javascriptjqueryangularjshtmldom

JQuery Reveals AJAX Request with Malfunctioning HTML Markup

I have been working on parsing an XML file and displaying the output in a div. However, I've encountered an issue where the .append() function is not generating the expected HTML output. Below is the JQuery code snippet I am using: var container = $ ...

jqueryhtmlajaxappend

Images of varying sizes aligned at the bottom of cards, organized in rows with pure CSS styling

I am working on a layout that involves a container with "cards": images positioned above with related text below. Here's an example: <div class = "cards"> <div class = "card"> <div class = "image-wrap"> <img src= "im ...

htmlcssflexboxcss-grid

Changing the image's flex-grow property will take precedence over the flex settings of other child

This is the error code I am encountering, where "text1" seems to be overridden <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <!--mobile friendly--> <meta name="view ...

javascripthtmlcss

Display website when clicked

When creating a website similar to , one issue that I am facing is the ability to scroll down before clicking the "proceed as anticipated" button. This feature seems to defeat the purpose of having the button trigger an automated scrolling effect if users ...

javascriptjqueryhtmlcssshow-hide

Managing the Response from Google Geocode API in a Vue JS Component

I am facing an interesting challenge. I have a scenario where users can choose between two options - using their current location or entering a zip code. When a user inputs a zip code, I need to make a call to the Google geocode API to retrieve the central ...

javascripthtmlvue.js

Superior method to ensure the child element's border overlaps with that of the parent

I am currently working on a project that requires a unique CSS effect: Let me explain exactly what I am trying to achieve: The main element (referred to as the title) has padding and a 2px bottom border. Inside this, there is a child element (known as ti ...

jqueryhtmlcssfrontend

Tips for changing form field values using jQuery

Is there a way to use jQuery to retrieve the values of multiple checkboxes and insert them into a hidden form field? Here is how my checkboxes are structured: <form> <input type="checkbox" name="chicken" id="chicken" />Chicken <in ...

jqueryhtml

Can the w3 validator be configured to disregard PHP tags?

I am facing issues with the online validator flagging errors for my php tags. To validate my HTML, I currently have to manually remove all the php inserts which is quite time-consuming. Is there a more efficient way to handle this problem? Below is an e ...

phphtmlw3c-validation

Form comments in Bootstrap are causing rows to shift

Currently, I am working on an Angular-powered horizontal form that utilizes various bootstrap components. However, I have encountered an issue with a "Comment field" that is causing the adjacent columns to shift downwards. I initially suspected the problem ...

htmlangularjstwitter-bootstraptwitter-bootstrap-3

Switching Div Elements Created by PHP

Utilizing MySQL, I am fetching data to dynamically generate nested div tags in a hierarchical structure. This structure consists of div tags within div tags within div tags, all uniquely identified through PHP-generated ids: <div class="holder"> ...

javascriptphpjqueryhtmlcss