What is the best way to align div elements in HTML5?

I've spent countless hours trying to properly display and align multiple divs. Despite extensive research, I just can't seem to get it right.

What I'm aiming for is to have the title of a section in the top left corner, an info box to the left of the title, and below both of those elements, a table within that section.

Right now, my main priority is creating a basic webpage where I can develop the layout before integrating it into WordPress.

|-----------------------------------------|-------------------------------------------| |.......................Title......................|...........................Info.....................| |-----------------------------------------|-------------------------------------------| |..........................................................................................................| |.................................................Table.................................................| |..........................................................................................................| |-------------------------------------------------------------------------------------|

It's frustrating how challenging this seemingly simple task has become.

Another issue I'm facing is ensuring the layout appears consistently across different browsers and devices, including desktop computers, tablets, and phones. Achieving this may require some extra effort, but I wanted to address it nonetheless.

The PHP-generated HTML code is as follows:

<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Knights Tour</title>
<link rel="stylesheet" type="text/css" href="http://bmfmain/kt/game.css">
<script src="http://bmfmain/kt/jquery.min.js"></script>
</head>
<body>
<div id="header">
    <div id="title">
        <h1>Knight's Tour</h1>
    </div>

    <div id="info">
        <p>adsf</p>
    </div>
</div>

<div id="section">

    <table id="game">
       <!-- Table rows and cells here -->
    </table>

</div>
<script src="http://bmfmain/kt/game.js"></script>
</body>
</html>

Please excuse the slight formatting discrepancies caused by copying and pasting.

Current CSS being utilized (subject to change):

html, body 
{
margin: 0;
padding: 0;
}
#header
{
width: 800px;
margin: 0 auto;
float: top;
padding: 5px;

}
#title
{
width: 400px;
text-align: center;
float: left;
position: absolute;
}
#info
{
width: 400px;
text-align: center;
float: right;
position: absolute;
}
#section
{
width: 800px;
height: 800px;
margin: 0 auto;
float: bottom;

}
table 
{
width: 100%;
height: 100%;
}
table, th, td 
{
border: 1px solid #0000cc;
border-spacing: 0.0rem;
}
th, td 
{
width: 8%;
height: 8%;
text-align: center;
background-color: transparent;
}

The questions at hand are: - How can I achieve the desired appearance of the divs as shown in the diagram? - How can I ensure consistent display on various platforms such as computers, tablets, and phones?

Thank you.

Link to current live example

Answer №1

Arranging the elements on a webpage in columns can pose a challenge. Two popular solutions to this issue are utilizing bootstrap and flexbox.
I prefer using Bootstrap due to my familiarity with it; it's essentially the go-to framework for HTML/CSS/JS. To effectively work with the resource I'll be referring you to, you'll need a basic understanding of Bootstrap. Investing time in learning this will greatly simplify your life. Here is a guide on utilizing the Bootstrap grid system http://getbootstrap.com/examples/grid/. Additionally, consider checking out tutorial videos on YouTube and resources on lynda.com.

Edit: This is how I would recommend approaching it. Begin by adding Bootstrap to your website, which can easily be done using a CDN by including a link at the top of your page (although not always the optimal method). There are numerous online guides on adding Bootstrap.

Below is the HTML code to kickstart your project (this code will function once Bootstrap is added):

<div class="row">
    <div class="col-xs-6" id="title">
        <h1>Knight's Tour</h1>
    </div>

    <div class="col-xs-6" id="info">
        <p>adssdfksdafhsadkhfkashdfksahdkfhakdshfkasdhfkhaskf</p>
    </div>
</div>
<div class="row">
    <div class="col-xs-12" id="table">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
</div>

It's important to note that Bootstrap takes care of responsiveness across various screen sizes.

Answer №2

I successfully implemented my desired layout using the following combination of HTML and Bootstrap elements.

echo '
<body>
    <div class="container gamepage">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-4 ">
                <br><p><img style="float: left;" class"gamepics" src="' . $url . '/pics/Knight.png"' . ' alt="Knight"><h1 style="float: right;" >Knight\'s Tour</h1></p>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-4 visible-lg">
                <h3 class="infobox" name="infobox"><p>text</p><p>text</p></h3>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-4">
                <p></p>
                <p>
                    Knight\'s Tour is a game of a traveling chess piece. The Knight moves in "L" shaped patterns across the board, and the purpose of this game is to find each and every square of the board with the Knight using each square only once.
                </p>
                <p>
                    The Knight can move one space over and two up or two spaces over and one up. The piece can move in any direction, in the one and two pattern. You can start anywhere. Just click a board square. Good Luck!
                </p>
                <p>
                    <input class="resetboard" type="button" value="Reset Board" />&nbsp;&nbsp;&nbsp;<input class="backmove" type="button" value="Back One" />
                </p>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-4 hidden-lg">
                <h3 class="infobox" name="infobox"><p>text</p><p>text</p></h3>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-8">
                <table id="game" class="gametable">';

The use of various col classes from Bootstrap has effectively organized my content for different screen sizes, including mobile devices.

Helpful Bootstrap Grid System Overview

Comprehensive Bootstrap CSS Guide

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

Tips for Maintaining the Execution of a JavaScript Function Within a Class until the Browser Window is Closed (Web Development)

The title might be a little confusing, so let me clarify here: I have implemented a popup that appears in the bottom right corner of a specific page on my website. The popup is working as intended (it shows up when the page is initially opened and can be ...

In Python 2.7, we can utilize scraping techniques along with the 're' library to extract float numbers from a given string. By using the '

I just scraped this content import re import urllib from BeautifulSoup import BeautifulSoup After scraping, I have results like this (printed numbers_in_mill.text): 9.27[7] 9.25[8] 10.17[9] 10.72[10] How can I modify these results to get: 9. ...

Leveraging createMuiTheme to customize default styles for divs, paragraphs, and the body element

Seeking guidance on customizing a Material UI Theme I aim to modify the default styles for elements like <body>. Currently, at the root of my React tree: import theme from './mui-theme' ReactDOM.render( <Router> <ThemePr ...

When hovering over an element, I must utilize a selector and reference a variable that was defined outside of the hover state in order to

Explaining this code may be a challenge, but I'll give it my best shot. Here's the code snippet: $('#navibar a').hover(function(){ var position = $(this).position(); var width = $(this).width(); $('#underliner'). ...

Creating Canvas dimensions to match the dimensions of a rectangle specified by the user

When the code below runs, it correctly generates a rectangle the same size as the canvas on start-up. However, an issue arises when the user clicks the button to generate a new canvas - the rectangle does not appear. Can someone please provide assistance ...

Adjust the color of the label when the checkbox is marked, and make it red when the checkbox is left

Looking to create a customized checkbox due to challenges in styling the default HTML checkbox, I have attempted the following code. The checkbox functions properly when clicking on the label, but I am unable to change the border color of the label based o ...

New feature in Chrome allows credit card suggestions to be displayed in the name input field

On one specific page of my angular app, I have an input field for a name that is showing credit card suggestions. When I disable the autofill for credit cards in Chrome settings, it then shows suggestions for names instead. However, on another page with ...

Can a low-opacity gradient be merged with a solid background color?

Can anyone help with this code snippet? Here's the link table { height: 200px; width: 200px; background-color: #444557; /* seems to be hidden by the gradient */ /* Here is the CSS for a gradient background */ /* Source: http://colorzilla ...

Font rendering issue in Chrome extension

I have been diligently following various tutorials on incorporating a webfont into my Chrome extension, but unfortunately, none of them seem to be working for me. Despite all my efforts, the font remains unchanged and still appears as the default ugly font ...

Iterate through an HTML table and transfer matching items along with their corresponding calculated amounts to a separate table

<html> <body> <div> <table border="1" id="topTable"> <thead> <th>Item</th> <th>Sold</th> </thead> <tbody id="topTableBody"> <tr> ...

Issue with Swiper JS: The buttons on pages three and beyond are unresponsive

I'm having trouble with the functionality of the "Back" button on pages 2 and 3 of my website. Can anyone help me figure out why it's not working? My goal is to create a website that resembles a game menu, similar to Deus Ex The Fall. I'm u ...

Aligning Text at the Center in Your React Native Application

I'm facing a few issues with my visualization: Despite aligning it to the center, the text on my first button is positioned at the right end of the button. How can I move the text 'login' to the center? Currently, the 'Sign Up Her ...

Transitioning from a CSS box-shadow effect to an inset-box shadow on hover

Have you ever encountered the challenge of transitioning from a normal box-shadow to an inset box-shadow? I'm curious if this is the reason why my transition isn't working, or if there's another issue with my code. What steps should I take i ...

Exploring the world of XML parsing with iText

I am curious to learn whether it is feasible to modify the font, color, and size while converting HTML to PDF using xmlWorker.parser. Thus far, I have successfully parsed the input as is, but now I am seeking ways to customize the font, size, color, and ...

Struggling to forward JSON data via AJAX to Django without relying on jQuery

My goal is to utilize AJAX in conjunction with Django, but I want to achieve this without relying on jQuery. So far, I have made progress in sending URL encoded data from AJAX to Django successfully. However, I am currently facing an issue where I am unabl ...

What is the best method for positioning 2 buttons at the bottom of a card using Bootstrap?

I need help with adjusting the position of two buttons in my bootstrap design. I would like both buttons to be located at the bottom of the card and have a slight gap between them, perhaps around 5 pixels. Below is the snippet of code: <div class=" ...

Fixed-positioned left column in a styled table

Struggling to implement the solution provided in this popular topic on Stack Overflow about creating an HTML table with a fixed left column and scrollable body. The issue arises from my use of the thead and tbody tags, which are not addressed in the exampl ...

Error in Jquery click function not being triggered

I'm in the process of developing an eCommerce platform where users can choose options and have their shopping carts automatically updated using jQuery. Users will be presented with a few radio buttons to select from, and as they make their choice, th ...

Is it possible to shift the image within the <canvas> element without having to redraw the entire canvas?

I created a game board and I am trying to implement drag-and-drop functionality for my pieces, which are in .gif format. However, I am struggling with finding a solution that allows me to move the pieces without constantly redrawing the entire board. Cur ...

Adjusting the opacity of the background image in the section - focus solely on the background

This section is what I'm working on. <section ID="Cover"> <div id="searchEngine">hello</div> </section> I am trying to achieve a fade in/out effect specifically for the background image of the Cover section. T ...