Looking for assistance with positioning elements in CSS?

Just starting out with CSS design and looking to create a page similar to the example below.

I've managed to separate the images using a span attribute, but I'm struggling with aligning the text and button in a single row.

This is what I have so far:

<div align="center">
    <span style="border:1px solid #ECECEC;margin: 10px">
     <img src="http://t2.gstatic.com/images?q=tbn:qaieI53CLSGGaM:http://img.directindustry.com/images_di/photo-pp/rf-anechoic-test-chamber-206872.gif"/>
    </span>
    <span style="border:1px solid #ECECEC;margin: 10px">
     <img alt="" src="http://t2.gstatic.com/images?q=tbn:qaieI53CLSGGaM:http://img.directindustry.com/images_di/photo-pp/rf-anechoic-test-chamber-206872.gif"/>
    </span>
    <span style="border:1px solid #ECECEC;margin: 10px">
     <img alt="" src="http://t2.gstatic.com/images?q=tbn:qaieI53CLSGGaM:http://img.directindustry.com/images_di/photo-pp/rf-anechoic-test-chamber-206872.gif"/>
    </span>
    <span style="border:1px solid #ECECEC;margin: 10px">
     <img alt="" src="http://t2.gstatic.com/images?q=tbn:qaieI53CLSGGaM:http://img.directindustry.com/images_di/photo-pp/rf-anechoic-test-chamber-206872.gif"/>
    </span>
    <span style="border:1px solid #ECECEC;margin: 10px">
     <img alt="" src="http://t2.gstatic.com/images?q=tbn:qaieI53CLSGGaM:http://img.directindustry.com/images_di/photo-pp/rf-anechoic-test-chamber-206872.gif"/>
    </span>
    <span style="border:1px solid #ECECEC;margin: 10px">
        <span>some text here</span>
        <button>XYZ</button>
    </span>
   </div>

However, my last div containing "some text here" and buttons is appearing at the bottom. I understand that I can achieve this layout using tables, but I'm hesitant to use a div tag inside a span tag.

Any tips or suggestions would be greatly appreciated.

htmlcss

Answer №1

A "div" element is considered a block-level element, meaning it will always be displayed on a new line by default. However, you can use the CSS property "float: left" to override this behavior:

<div align="center">

    <div style="border:1px solid #ECECEC;margin: 10px; width: 100px; height: 100px; float: left">
     <img src="http://t2.gstatic.com/images?q=tbn:qaieI53CLSGGaM:http://img.directindustry.com/images_di/photo-pp/rf-anechoic-test-chamber-206872.gif"/>
    </div>
    <div style="border:1px solid #ECECEC;margin: 10px; width: 100px; height: 100px; float: left">
     <img alt="" src="http://t2.gstatic.com/images?q=tbn:qaieI53CLSGGaM:http://img.directindustry.com/images_di/photo-pp/rf-anechoic-test-chamber-206872.gif"/>
    </div>
    <div style="border:1px solid #ECECEC;margin: 10px; width: 100px; height: 100px; float: left">
     <img alt="" src="http://t2.gstatic.com/images?q=tbn:qaieI53CLSGGaM:http://img.directindustry.com/images_di/photo-pp/rf-anechoic-test-chamber-206872.gif"/>
    </div>
    <div style="border:1px solid #ECECEC;margin: 10px; width: 100px; height: 100px; float: left">
     <img alt="" src="http://t2.gstatic.com/images?q=tbn:qaieI53CLSGGaM:http://img.directindustry.com/images_di/photo-pp/rf-anechoic-test-chamber-206872.gif"/>
    </div>
    <div style="border:1px solid #ECECEC;margin: 10px; width: 100px; height: 100px; float: left">
     <img alt="" src="http://t2.gstatic.com/images?q=tbn:qaieI53CLSGGaM:http://img.directindustry.com/images_di/photo-pp/rf-anechoic-test-chamber-206872.gif"/>
    </div>
    <div style="border:1px solid #ECECEC;margin: 10px; width: 100px; height: 100px; float: left">
        some text here<br /><br />
        <button>XYZ</button>
    </div>

</div>

Keep in mind that the "div" elements should have width and height attributes specified.

Answer №2

Experiment with using float:left or a comparable technique to achieve the desired outcome.

Answer №3

In my opinion, implementing display:inline on the div element would fulfill your requirements perfectly.

Answer №4

To resolve such issues, it is recommended to consistently employ the float:left property. By doing so, you can effectively prevent the div tag from creating a new line and unlock a range of powerful functionalities.

Answer №5

It seems like you have a good gut feeling about this. I recall reading somewhere that the W3C advises against using block elements (like div) within inline elements (such as span). It does seem strange from a semantic standpoint, almost like having a paragraph inside a sentence.

I believe switching that div to a span might give you the desired outcome. Alternatively, using <label> could be more semantically appropriate depending on the purpose of that final text.

<span>some example text here</span>

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

jQuery can be used to relocate buttons on a webpage

When the Contact button is clicked, how can I move the Close button below #panel? It's currently fixed in position. Here's my demonstration: https://jsfiddle.net/25u78gff/ https://i.sstatic.net/qDad9.png jQuery('.sub-menu').addClass( ...

javascriptjqueryhtmlcss

The dropdown height feature is experiencing issues in the Chrome browser

3 radio buttons and a single select box are displayed on the page. When clicking on the first radio button, the select box should show contents related to the first radio button. However, when selecting the second or third radio buttons, the select box hei ...

javascriptjqueryhtmlcss

Fluid image background failing to display properly in Firefox browser due to CSS compatibility issues

I'm currently working on implementing a fluid image background for one of my webpages. It's functioning perfectly in Chrome, but I can't seem to get it to work in Firefox. The goal is to have two squares with PNG images that resize proportio ...

htmlcssflexboxfluid-images

Integrating objects into the <select> element through the combination of C#, JavaScript, and HTML connected to a SQL

Can someone assist me in resolving this issue? I am trying to populate an HTML element with database fields using C# and JavaScript, but so far my code is not producing any output. I have also attempted to include a button that calls the "loadGrp" function ...

javascriptc#htmlsql-server

using mathematical calculations to determine opacity levels in a set of rules

I'm attempting to multiply opacity values. I have experimented with the following: calc(@opacity * 100) @opacity-ruleset { filter:alpha(opacity= (@opacity * 100)); -moz-opacity:@opacity; opacity: @opacity; -webkit-opacity: @opacity; } Is there a wa ...

cssless

Launching a webpage programmatically

I have developed a Windows C# script that automatically generates HTML files and constructs a webpage with links to those files. The variable reportName holds the path and name of the final webpage. This script is triggered from a webpage, and once the re ...

c#html

Discovering the maximum font size that can be displayed on a single line in CSS

I am working with a wrapper div tag that has the capability of adjusting its dimensions. <div class="wrapper"> <p class="inside-text">Some text</p> </div> How can I use CSS to set the font-size of inside-text to be as large as ...

htmlcss

Customizing the Steps Component in Ant Design

Currently, I am utilizing the Steps component from Ant Design. My goal is to enhance its functionality by adding additional components, like a button placed next to each step's description to make it more interactive. Furthermore, I am looking to inc ...

javascripthtmlreactjsantd

jQuery class does not apply correctly in IE9

Currently, I'm designing a menu for a WordPress theme and facing a styling issue. I aim to differentiate between menu items with submenus and those without by applying different styles on hover. Here's the jQuery code snippet I am using: $(docum ...

jquerycssmenudrop-down-menu

Styling columns to be inline-flex without taking up the full height

I'm currently working on a project similar to "Trello" or "Zenhub," using a Kanban board with 4 columns placed in a div#board. The columns are set to display: inline flex, creating a neat horizontal alignment. However, I encountered an issue where eac ...

jqueryhtmlcssflexboxmaterialize

Spinning and disappearing gradually over a set period of time

Could someone please help me with creating an animation for one of my CSS DIVs? I want it to have an exit/entry effect with rotation/fadeout and then rotation/fadein, with a 10-minute delay between each iteration. I'm not sure if this can be achieved ...

htmljquerycssanimationcss-animations

Hosting services for forms and JSON data

I have recently completed the development of my website using HTML, CSS3, jQuery, and JavaScript. Like many others, it includes a form for clients to submit their projects via email. After some research, I came across suggestions to use NodeJS for server-s ...

javascriptjsonnode.jshtmlweb-hosting

When I try to expand the width of a div, the display property set to inline

Visit my website At the moment, my website features the following code snippet: <div class="main-sale"> <div class="time-left">Sale Ends in: </div> <div class="sale-item"> //Highlighted Sale it ...

jqueryhtmlcss

Show a grid layout featuring varying heights using HTML

I am trying to create a grid view for displaying images in an HTML document. I want each li tag to have a different height, but currently they are all the same height. Below is my HTML code: <div class="blog_main_midd_section"><ul> ...

htmlcssgridviewgallery

displaying a pair of inputs next to each other

Is it possible to display two input fields side by side? I am using Angular's matInput forms, but struggling to position the second input next to the first. What I would like to achieve is to have "input1 , input2" on the same line. Here is my code: ...

javascriptcsshtmlangular

What is the best way to transfer the value of a <span> element to a different <div> using jQuery or JavaScript

Is there a way to move or copy the price and insert it into the <div class="info"> using jQuery? The code I'm currently using is returning an unexpected result of "102030". jQuery(document).ready(function($) { $(document).ready ...

javascripthtmljquery

utilizing ellipses within a data chart

I am facing a dilemma with conflicting arguments while working on a table that is using an ellipsis. The situation involves a table with a tr tag and 2 td's. I require the first td to be the width of the text ( border-collapse: collapse ) which is ach ...

csscss-tables

How can we retrieve the value from a textBox using JavaScript in Selenium WebDriver?

https://i.sstatic.net/6ni0f.pngTrying to extract text from an input tag that is missing in the HTML code, leading to the need for JavaScript to retrieve the value. Unfortunately, running the code in Eclipse returns null as the result. The HTML and Seleni ...

javascriptjavahtmlseleniumselenium-webdriver

Tips for centering div content using bootstrap

https://i.sstatic.net/GtIi0.pngI am trying to align 3 divs in a row at the center of the page. <div class="row"> <div class="center"> <div class="col-sm-4" id="ph-container"></div> <div class="col-sm-4" id="do-contai ...

javascriptjquerycsstwitter-bootstrap

Create a Bootstrap modal that includes an object tag to embed a PDF file

I'm currently working on displaying a PDF file within a Bootstrap modal using the "object" HTML tag. However, I am facing an issue where the PDF file is not showing up. To demonstrate this problem, I have created a jsFiddle (http://jsfiddle.net/mV6jJ ...

javascriptjqueryhtmlcsstwitter-bootstrap