positioning two text sections on the left side of an image

I am attempting to create a page layout with text that should look like this:

Team Name                                            My Team Name +-------------+
Division                                             Team Division|             |
Current Ranking                                                  5| Team Logo   |
Event                                          Event name and date| Here        |
Event Wins : 5        Event Scored : 16        Event Conceded : 13|             |
Match 1                Team 1 - team 1 score team 2 score - Team 2|             |
Match 2                Team 1 - team 1 score team 2 score - Team 2+-------------+
Etc

However, the result I am getting is different:

Team Name             event wins : 5                 My Team Name +-------------+
Division              event scored : 16              Team Division|             |
Current Ranking       Event                            event     5| Team Logo   |
conceded : 3                                   Event name and date| Here        |
                                                                  |             |
                                                                  +-------------+
Etc

I have experimented with various float/clear settings on different elements, but I am struggling to identify the issue. Could someone please provide guidance on what is wrong with my HTML/CSS code? I would also appreciate an explanation of why it is incorrect so I can better understand floats and prevent similar issues in the future. Thank you.

Here is the JSFiddle link:

http://jsfiddle.net/LEaa9/1/

And here are the fullscreen results:

http://jsfiddle.net/LEaa9/1/embedded/result/

htmlcss

Answer №1

The reason why the text at the bottom is appearing at the top is due to a gap between your two floated elements. Text wraps around floated elements when there is enough space. A simple solution would be to set both elements to 50% width. It is also recommended that floated elements have a specified width.

Another solution is to add clear: both; in the style of the bottom text wrapper like this:

<div style="clear: both;">
  <div>event wins : 5</div>
  <div>event scored : 16</div>
  <div>event conceded : 3</div>
</div>

This will ensure that the div does not align with any floated elements but instead appears below them.

For safety measures, it is advisable to implement both solutions mentioned above.

Answer №2

Initially: Excessive <div> elements can overwhelm the code.

Secondly: Adjusting properties like float:left, float:right, display:block, and width can help achieve the desired layout.

I have made some modifications to your code to display it as requested. Feel free to use it, but I recommend customizing it to fully understand its functions:

<div style="background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(137,137,137,0.5) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(137,137,137,0.5))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(137,137,137,0.5) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(137,137,137,0.5) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(137,137,137,0.5) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(137,137,137,0.5) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff',    endColorstr='#80898989',GradientType=0 ); /* IE6-9 */">
<div style="margin-left:5px; display:block; width:900px;">
    <img src="/images/teams/logos/nexus.png" alt="Team Logo" style="float:right;width:239px;height:100%">
    <div style="background-color:red; float:left;width:600px;">
        <div style="display:block; float:left;">Team Name</div>
        <div style="display:block; float:right;">My Team</div>
    </div>
    <div style="background-color:green; float:left;width:600px;">
        <div style="display:block; float:left;">Division</div>
        <div style="display:block; float:right;">Elite Division</div>
    </div>
    <div style="background-color:blue; float:left;width:600px;">
        <div style="display:block; float:left;">Current Ranking</div>
        <div style="display:block; float:right;">1</div>
    </div>
    <div style="background-color:yellow; float:left;width:600px;">
        <div style="display:block; float:left;">Event</div>
        <div style="display:block; float:right;">CPPS Round 2     12/05/2013</div>
    </div>
    <div style="background-color:pink; float:left;width:600px;">
        <div style="display:block; float:left;width:200px; text-align:left;">event wins : 5</div>
        <div style="display:block; float:left;width:200px; text-align:center;">event scored : 16</div>
        <div style="display:block; float:left;width:200px; text-align:right;">event conceded : 3</div>
    </div>
</div>

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

Attempting to integrate the Angular2 module text-mask-addon into the project

Currently, I am in the process of integrating text-mask-addons into my Angular application. You can find more information at https://github.com/text-mask/text-mask/tree/master/addons Despite attempting to follow the npm links suggestion, I am encountering ...

javascripthtmlnode.jsangularnpm

Personalized AWS Cognito: Strategies for Tailoring Input Field Designs

MY CURRENT CHALLENGE: Within my Vue application, I am utilizing the AWS authenticator for managing login and signup processes. However, customizing its style has proven to be difficult due to the structure being built with shadow DOM elements. https://i. ...

javascriptcssamazon-web-servicesvue.jsamazon-cognito

numerous requirements for formatting utilizing Css modules

Can someone help me figure out how to set multiple conditions using a ternary operator to style an element with Css modules? I'm struggling to find the right syntax. Is it even possible? import style from './styles.module.sass' const Slider ...

cssreactjsnext.jsjsxcss-modules

Pressing a button through xpath

I am attempting to click on the button below: <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix"> <div class="ui-dialog-buttonset"> <button class="ui-button ui-widget ui-state-default ...

pythonhtmlseleniumxpath

Customizing the attribute of an HTML tag using EJS or jQuery

Within my express server, I am rendering a page with the following data: app.get('/people/:personID', function (req, res) { res.render("people/profile", {person: req.person }); }); Inside my profile.ejs file, I can display the data within an ...

javascriptjqueryhtmlexpressejs

Utilize Bootstrap's toggle button in the navigation bar to smoothly shift the content to the left

Recently, I encountered an issue with the navbar on my website. In the mobile version, whenever the toggle button in the navbar is clicked, it results in the website shifting to the left and causing the content to be off-center. However, when I view the w ...

cssbootstrap-5

Revamp the layout of the lower HTML video menu

Here is my code: <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> video { width: 100%; height: auto; } </style> </head> <body> <video width="400" controls> ...

javascripthtmlcssvideohtml5-video

What steps can I take to prevent BeautifulSoup from interpreting commas as tab characters?

My recent project involved creating a web scraping code to extract information from a local news website. However, I have encountered two issues with the current code. One problem is that when the code retrieves paragraph data and saves it to a CSV file ...

pythonhtmlcsvweb-scrapingbeautifulsoup

Using `href="#"` may not function as expected when it is generated by a PHP AJAX function

I am facing an issue with loading html content into a div after the page has loaded using an ajax call. The setup involves a php function fetching data from the database and echoing it as html code to be placed inside the specified div. Here is my current ...

javascriptphphtmlajax

What is the best way to showcase the following values using Vue.js?

{"status":true,"data":[{"ref_id":"22","agent_id":"68","p_id":"84","description":"i am interested"},{"ref_id":"24","agent_id":"68","p_id":"84","description":"For more information about Bootstrap and Bootstrap Glyphicons, visit our Bootstrap Tutorial.For mor ...

javascriptphphtmlvue.js

Prevent PHP from redirecting during an HTML file upload

Is there a way to prevent the page from redirecting to the upload php file when the upload button is clicked? I'm looking for a solution within the code below. <form id="myForm" action="http://example/DB_1/AccessWeb/file_upload.php" method="post ...

phphtml

A guide on extracting checkbox value from a database in PHP through the use of the explode function

I have a form with three checkboxes where some people select all subjects and others select only two. I need to retrieve the checkbox values from the database. Below is my current code. If anyone knows the solution, please share. <?php $connection = ...

phphtml

Seeking help on modfiying div content with AJAX - any tips for showing navigation using hash or anchor?

Looking to create a dynamic page that updates content within a div asynchronously while also providing users with direct access to specific content within the div by using anchors (e.g. www.website.co.uk/#page1). I've successfully implemented the upd ...

javascriptjqueryhtmlajax

What is the best way to arrange two divs inside a main div so they remain fixed in place at all times?

Struggling with aligning two smaller divs within a main wrapper for my website. Despite confining them to the main div, they don't stay fixed or aligned properly. How can this issue persist even when contained within a main div? I've attempted s ...

htmlcssalignmentwrapper

What is the most effective way to implement multiple ng-models within a single function?

Hello everyone! Currently, I am working on developing a database using indexed db in AngularJS. My main task is to save data into the database and I have a query - Can we utilize multiple ng-models in a single function? Let me provide you with a snippet of ...

javascripthtmlangularjsindexeddb

JavaScript vs. markup: deciding between generating an extensive list of options or including them directly in

Recently, I encountered an issue with a .NET page that included a large number of identical dropdown lists within a repeater. Unfortunately, the rendering performance of the website was below expectations. In an attempt to improve the performance, I exper ...

javascripthtml

Ionic 2 hides the form input area within its input component

I set up a login page, but the input fields are not showing up on the form. Here is my current code: <ion-list> <ion-item> <ion-label fixed>Username</ion-label> <ion-i ...

htmlangularionic2

What is the most efficient method for incorporating CSS styles? What are the advantages of using @

I am curious about the benefits and reasons for using @import to bring stylesheets into a pre-existing stylesheet, as opposed to simply including another... <<link rel="stylesheet" type="text/css" href="" /> in the head of the webpage? ...

htmlcss

The issue persists with Angular's overflow hidden not functioning properly, and similarly, the show password button is

I created a login page using Angular Material, but I'm facing some issues. The problem is that when I set the style overflow: hidden, the show password button stops working. Additionally, if I click the button twice, the webpage refreshes, which shoul ...

htmlcssangularflexbox

Tips for recalling the display and concealment of a div element using cookies

My HTML code looks like this: <div id='mainleft-content'>content is visible</div> <div id="expand-hidden">Button Expand +</div> To show/hide the divs, I am using JQuery as shown below: $(document).ready(function () { ...

javascriptjqueryhtmlcsscookies