What is the best way to showcase a Table and an Image side by side in HTML using inline

Can someone help me figure out how to align my image and table on the same level? I've been struggling to get "inline-block" to work. :(

<p id="play"> 
hey 
</p> 
<div id="menu"> 
<table> 
<tr> 
<td>Models</td> 
</tr> 
<tr> 
<td>Cars</td> 
</tr> 
<tr> 
<td>Modern Houses</td> 
</tr> 
<tr> 
<td>Vacation Spots</td> 
</tr> 
<tr> 
<td>Sports and Outdoors</td> 
</tr> 
<tr> 
<td>Books</td> 
</tr> 
<tr> 
<td>Abandoned Houses</td> 
</tr> 
<tr> 
<td>Summer Wear</td> 
</tr> 
<td>Makeups</td> 
</tr> 
<td id="site">Site Info</td> 
</tr> 
</table> 
</div> 
<img src="C:\Users\Elexie\Documents\Downloads\faki2.jpg"/> 

body { 
background: #181818; 
margin: 0; 
padding: 0; 
} 

/* set body display to inline-table*/ 
#play { 
background: black; 
color: white; 
margin: 0; 
padding: 0; 
height: 35px; 
} 

table,td { 
color: white; 
border: 1px solid white; 
border-collapse: collapse; 
width: 160px; 
padding: 10px; 
font-family: ; 
} 

table { 

} 

#site { 
height: 350px; 
} 

img { 
float: right; 
} 

I've updated the image, but it's a similar size http://jsfiddle.net/w6d5g/

Answer №2

Take a look at this code snippet: http://jsfiddle.net/Mohamed_nabil/F8MKp/

/*******Customized Styles******/
img
{
    /*165px represents the width of your Menu including borders*/
    max-width: calc(100% - 165px);
    /*For compatibility across different browsers*/
    -webkit-max-width: calc(100% - 165px);
    -moz-max-width: calc(100% - 165px);
    -o-max-width: calc(100% - 165px);
    -ms-max-width: calc(100% - 165px);
    display: inline-block;
    vertical-align: top;/* Can also be set to middle or bottom */
}
#menu{
    display: inline-block;
}

Answer №3

To start, enclose your image tag within a div element. Give this div any name you desire. Let's call it "image-container".

<div class="image-container">
  <img src="(URL for IMAGE)">
</div>

Now, suppose you want your table to occupy 50% of the width and your image to occupy the other 50%. We will float these divs to remove them from the document flow.

#table{
  float:left;
  width:50%;
}
.image-container{
  float:left;
  width:50%;
}

If you notice that your image exceeds the size of the containing div, it's a good idea to set a maximum width for all images to prevent any issues in the future.

img {
  max-width:100%;
}

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

Instructions on creating a simple text-based menu and sub-menu without any images or graphics

I'm currently working on implementing a drop-down menu for my website, which can be found at The menu I am trying to create should appear under the Health & Fitness and Gaming sections as a text-only drop-down. I've been experimenting with s ...

Having trouble selecting content in an HTML document using Xpath and response.css with Scrapy?

Something is quite puzzling me and I've been pondering over it for almost a week now. Perhaps the solution is staring right at me and I just can't see it clearly... Any hints for alternative approaches would be greatly appreciated. I have n ...

Show only half of the Google Charts

I have a code snippet that displays a chart with dimensions of 500x500. However, I only want to show half of the chart, like 500x250. But whenever I adjust the values in the div, it resizes the entire chart instead of just showing half. My goal is to hide ...

Compiling SCSS to CSS in Vue.js is a breeze

I am working on a vue js project that includes scss files. My goal is to compile these scss files into css and store them in the public folder. How can I achieve this? Should I make changes to the vue.config.js file? const path = require('path'); ...

Utilize AJAX, PHP, and MySQL to create a search functionality that retrieves data from a MySQL database based on a dynamically generated variable

I'm in the process of creating a custom part builder and am working on implementing a search function within MySQL Database based on the Part Number generated. The goal is to display the price in a table cell. However, I'm encountering difficulty ...

Looking to extract data from a Json object and add it into a table

<!DOCTYPE html> <html> <head> <script type="text/javascript"> function displayJsonData() { var jsonData = { "cars": [ '{"model":"Sentra", "doors":4, "features":["hi"," ...

The correct way to write media queries in CSS for the iPhone

After successfully formatting a website for various devices using an online responsive design tester and CSS declarations like @media only screen and (max-width: 480px), I encountered an issue during testing on an actual iPhone. The browser was not computi ...

Tips for inserting a rotated image using CSS

I've created the following code snippet. However, there is a new requirement stating that the image needs to be rotated by 180 degrees. How can I make this happen? #cell { background-image: url("../images/logo.PNG"); background-attachment: fixed; b ...

Using Angular and ASP.NET for image uploading functionality

Trying to source the image from the PC and upload it into the database as "Images/aaa.jpg". I am relatively new to Angular and have attempted an example that did not work for me. I have been stuck on this issue for almost 3 days trying to find a solution. ...

Unable to retrieve the following element in a JavaScript array

I am a beginner in JavaScript and I am attempting to access the next element of an array using an onclick function but so far I have not been successful. var i, len; function quiz() { var quiz_questions = [ "who is the founder of Fa ...

Remove the bootstrap styling from a section of the webpage

I am in the process of setting up a preview box for an HTML editor on one of my pages. I created a basic <div id="preview"></div> style container where I occasionally input my HTML source, which is working adequately. The issue arises when Boo ...

What methods can be used to pause a jQuery function when hovering and resume it when the mouse leaves?

I'm currently working on a jQuery function that operates on the mousemove event. The goal is to have two images - one main image and one shadow image, with the shadow image reflecting movement based on mouse position. While everything is functioning p ...

Resolving issues with CSS placement and resizing

I have been considering developing a UI toolkit that offers an intuitive and powerful way of setting the position and size of elements/widgets. Here are some examples of how it could be used (although they are not currently implemented): ui("Panel").size( ...

Saving game data from local storage to populate the player leaderboard

I have successfully developed a game in which users can play and their scores are stored locally. However, I am facing a challenge in figuring out how to showcase the scores of all users in a table on the Rankings page. Player Ranking Page <?php inclu ...

Guide for using two Async Pipe functions in Angular 7

Two different functions are in place to check a specific condition, and the requirement is for both of them to be true simultaneously. How can *ngIf be utilized to achieve this? Currently, setting just one of them works, but the aim is to have both. HTML ...

An unusual CSS phenomenon with z-index

I've encountered a peculiar issue with my z-indexing. I have an image positioned relatively with a z-index of 1, and it should be above my navigation that is positioned absolutely with a z-index of -1. The problem is that upon page load, the image ap ...

JavaScript - Modify the proposed content prior to inserting it into the input field

In my current project, I have implemented a feature using jQuery UI - v1.11.4, where an HTML textbox utilizes a JavaScript autocomplete functionality. The suggested string for the textbox is created by concatenating several columns (patient_no, patient_nam ...

Image background is not showing up in the input field

It seems like I've hit a roadblock with this issue. Despite my best efforts, I can't seem to find a solution. You can view the problem LIVE HERE. The banner's two input boxes should have background images displayed, but they are not showin ...

When the container size increases, elements may overflow and be pushed outside the boundaries

After adjusting the CSS in ".container" from "width:800px" to "width:1900px", all the elements become misaligned. The orange box is no longer centered and instead leans towards the left side. I'm curious if anyone knows why this is happening? A friend ...

Adding a unique component to a Spring Boot application with Thymeleaf integration

My navigation bar includes a list with a dropdown feature. When the user clicks on the dropdown entry, I want to display a snippet of another HTML page within the project. The navigation bar HTML code is as follows: <div th:fragment="navbar"& ...