Improper alignment of 2 divs floating to the right

I have a question about the layout of my divs. I want to float the last two divs to the left, next to the first one. However, the second div is floating after the third one. Can anyone explain why this is happening?

Thank you for your help!

This is the code I am using:

HTML

<div id="holder_idea"><h5>something</h5></div>
<div id="visual_holder_second">something2</div>
<div id="invest">
<h2>something3</h2></div>

CSS

#holder_idea{
width:200px;
padding-right:48px;
padding-left:32px;
padding-top:32px;
display:inline-block;
}

#visual_holder_second{
font-family: "Times New Roman";
font-size:7.5em;
text-transform:uppercase;
line-height:60%;
width:140px;
float:right;
padding-top:32px;
}

#invest{float:right;}
htmlcsslayoutcss-float

Answer №1

Why go right when you should be heading left? It's all about floating in the right direction.

To fix this issue, apply a left float to all three divs: http://jsfiddle.net/ngztf/

Your 140px width might be too narrow for your content, especially after reducing it to 3.5em for testing purposes.

div {
    float: left;
    border: 1px solid green;
}
#holder_idea {
    width:200px;
    padding-right:48px;
    padding-left:32px;
    padding-top:32px;
}
#visual_holder_second {
    font-family:"Times New Roman";
    font-size:3.5em;
    text-transform:uppercase;
    line-height:60%;
    width:140px;
    padding-top:32px;
}

Answer №2

Perhaps you are looking to achieve a layout similar to this:

 | box1 | box2|
 |      | box3|

If that is the case, please keep in mind that using float will move the div outside of the regular flow of elements, causing it to "stick" closely to the previous element on the specified side. It will only go to the next line if there is no more space in the current line. For an illustration, refer to this example:http://www.w3schools.com/css/tryit.asp?filename=trycss_image_gallery (Yes, I am aware of the reputation of w3schools) Observe how the positions adjust with changes in window size.

Answer №3

Consider switching the float: right; property to float: left; and eliminating the width: 140px declaration on #visual_holder_second.

Furthermore, if you're aiming for a multi-column design, don't hesitate to utilize traditional tables. Despite their tarnished reputation from overuse in the past, they still serve a purpose.

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

Nivoslider fails to display images when loaded in dynamic ajax content for the first time

Working on a website using jQuery and Ajax, I encountered an issue. When a page loads dynamically for the first time (before images are cached), the images do not display. However, when I reload the ajax load function, the pictures suddenly appear. $("#ov ...

javascriptjqueryhtmlajaxnivo-slider

Delete particular user inputs following a $.ajax request

I have created a search feature with inputs that allow users to search the database using ajax requests. Unfortunately, I am facing an issue where the response from the server includes the search inputs themselves. This is not what I want. Here's a ...

javascriptjqueryhtmlajax

Ways to update the select field without having to reload the entire page

I am working on a unique feature that involves two levels of drop down menus. When a user makes a selection in the first level, a corresponding set of options will appear in the second level. For example, I have 6 options in the first level, each with its ...

javascripthtmlselect

Ways to modify color while user moves the screen

I'm working with some jQuery code that changes the colors of elements as the user scrolls down, and I want it to revert back to the original color when scrolling back up. However, the script is not behaving as expected... Here is the original working ...

javascriptjqueryhtmlcss

I want to implement an onclick event for a table row that will change the background color of the row to red when the decline button is pressed

The provided code snippet is not functioning correctly. It involves using JSON to import data for a table displayed in HTML. Each table row contains a modal button that, when clicked, opens a modal view with two additional buttons (approve and disapprove). ...

javascripthtmlcssonclickmodal-dialog

Burger menu animation activated by a single click anywhere on the page

After following a tutorial on creating an animated menu burger, I encountered a few bugs. The animation is working as intended, but it triggers no matter where I click on the page. Here is the code snippet: const toggleMenu = document.querySelector( ...

javascripthtmlcss

A Python program utilizing Selenium webdriver for Chrome which attempts to retrieve and print out the elements inside a listbox, but encounters difficulties and is unable to

I'm currently executing the script shown below: #import necessary packages from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.support.ui import WebDriverWait from selenium.webdrive ...

pythonhtmlseleniumlistboxchrome-web-driver

The method used in Redux does not function properly with my sessionStorage

I am currently in the process of learning about Redux. One of my goals is to implement a favorites feature using Redux. To achieve this, I have created actions such as addFavoriteSPORTSs, SPORTSReducer reducers, and have dispatched them in tab-demo.js whil ...

javascripthtmlreactjsreduxmaterial-ui

What is the best way to format changing text within a paragraph?

If I needed to implement this functionality using JavaScript: ...... if (!isNaN(num)) document.getElementById("isNum").innerHTML = num +" is a number"; ...... Then in HTML : <div> <button onclick="checknum()">Enter any value : </b ...

javascripthtmlcss

Tips for consistently showing the addition symbol in my search bar

I created a code snippet that showcases a search box with CSS animations and jQuery toggling functionality. One issue I encountered is ensuring that the plus icon remains visible at all times, whether the search box is expanded or contracted. How can I ac ...

jqueryhtmlcsssearch

Ways to customize a webpage depending on a visitor's previous interactions with the website

I am new to the world of html/css and my knowledge of javascript is limited, so I'm unsure where to begin with this project. Please forgive me if I misuse any terms! I am currently developing a piece of interactive fiction using html/css, where users ...

javascripthtmlcss

When is it acceptable to use HTML within PHP without judgment?

Separating control logic from view logic is a common practice, but there are instances where using html templates can be faster and less complicated. I'm wondering where it is appropriate to use this approach. For example, functions that generate dy ...

phphtmlmodel-view-controllerstandardsconventions

Button for Selecting Colors

I love the color picker button on Google Keep, where a variety of colors pop up for selection. I'd like to add something similar to my website. What steps should I take to implement this feature? ...

htmlreactjs

Displaying a limited number of items from a large JSON Array in an HTML unordered list, showcasing only 20 data entries per

My JSON file has a specific format that includes key-value pairs for data entries. There are hundreds of these entries. I am currently working on: a. Loading these values onto an HTML page. b. Displaying only the first 20 entries. Below is the code snip ...

jqueryhtmlarraysjson

The HTML code is properly linked to the JavaScript file, but for some reason, it is still not

I'm facing an issue while trying to incorporate a js file into my html document. Even though I have linked the html file to the js file, it doesn't seem to be functioning properly. In the code snippet below, everything appears to be working fine ...

javascripthtmljquery

Incorporate external visuals into printed materials

When a page is printed, a heading should be accompanied by an image to the right. I have defined the following stylesheet: @media print { h1::after { content: url( IMAGE_URL_HERE ); position: absolute; top: 0; right: 0; } } The issue ...

cssprinting

Achieving bottom alignment for an element within a flex item: steps for success

I am dealing with a flex container that contains three flex items, each of which has a link that needs to be aligned at the bottom (all links should be bottom middle-aligned). The flex-items are stretched and do not have a fixed height, similar to the fle ...

htmlcssflexbox

How to boost -webkit-transform performance: helpful tips

Utilizing webkit-transform: translate3d and various other properties extensively on a mobile app designed for iPhone has greatly improved performance due to hardware acceleration. The majority of features are functioning at an optimal level, ensuring smoot ...

performanceiosanimationcss

What is the best way to duplicate a complete row?

I am looking to create a form that includes an "Add Row" button. When this button is clicked, a new row should be generated, identical to the last row. The rows contain dropdown values, and I want the new row to display the same dropdown options as the p ...

javascriptjqueryhtmlxmlxslt

Items positioned to the left will not overlap

Having trouble with floating elements? Need to ensure that box 3 aligns under box 1 when resizing the browser window? Use this HTML template: <div class="box"> <p>box 1</p> <p>box 1</p> <p>box 1</p> & ...

htmlcss