What could be causing my floated DIVS to not align properly?

After spending hours coding a page from scratch, I'm struggling to get three divs to align next to each other with a 13px margin between them. The last two float correctly, but the first one is causing problems. Any suggestions would be greatly appreciated.

You can view the page and see the three white divs with blue hyperlink titles at the bottom here:

Here is my CSS code:

.box1 {
   width:285px;
   height:141px;
   float:-left;
   background-image:url('/resource/uploads_scope/issues/images/at_A_glance_bottomBox.png');
}

.box2 {
   width:285px;
   height:141px;
   float:right;
   margin-left:13px;
   background-image:url('/resource/uploads_scope/issues/images/at_A_glance_bottomBox.png');
}

.box3 {
   width:285px;
   height:141px;
   float:right;
   margin-left:13px;
   background-image:url('/resource/uploads_scope/issues/images/at_A_glance_bottomBox.png');
}

Your assistance is highly appreciated :-)

Answer №1

It seems there may have been a mistake here, as I believe the correct syntax in box1 should be float:left instead of float: -left.

Answer №2

Opting for display:inline-block over floats could be a beneficial choice.

Answer №3

Absolutely, I concur. It appears that float: -left is causing the issue. Additionally, it is important to be cautious when determining the width of your containers. If you have three boxes enclosed within a larger div, then the width of the larger div should be greater than or equal to (285*3) + (13*2). The number 13 represents the left margin on two of the divs.

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

How can you make the border of a table thinner using CSS?

<table width='100%' cellpadding='0' border= '1' cellspacing='0' > I have designed a table with the specified attributes. The border width appears thicker than expected and I am unable to set it at 0.5px or an ...

Display an element that has been tucked away, and then bring it to life

Is there a way to implement an animation that causes the hidden form to slide from right to left after the .button class is hidden? I have been able to achieve similar effects individually, but struggle with synchronizing their animations. When the butt ...

When running Javascript, the code is displayed rather than being executed

I have a current MVC - C# application that generates various "popup" screens containing necessary information. I wanted to apply the same method to create a popup displaying a version history (listing the Versions with their corresponding changes). Howeve ...

"Maximize user experience: Eliminate the "#" in your URL by utilizing anchor tags for one-page navigation in

I've created a website with menu tabs including Home, About, Work, and Contact. To make navigation easier, I've used anchor tags for this one-page layout. However, I'm concerned about the URLs updating when clicking on the tabs. I prefer to ...

If no content is present in a cell of an HTML table, alter the row

I am attempting to create a CSS table that changes the row color if any cell in the row is empty. Here's what I have so far: <style type="text/css"> td:empty { background-color: red; } </style> Is there a way to change th ...

My goal is to dynamically adjust the height of this section based on its content

I experimented with this code snippet: <section class="unique"> <div class="this d-flex pt-5"> <div class="leftside2 w-50 h-100"> <img src="images/twowomen.jpg" alt=" ...

Struggling to grasp the concept of fit-content? Let me

For my personal project, I am creating a simple react webpage. To incorporate zoom capabilities, I decided to use the library called React-zoom-pan-pinch. Initially, without implementing this library, my SVG element filled the screen in red, which was the ...

Conceal/Inactivate element when scrolling, and once scrolling comes to a halt, reveal it once more

I have been working on creating a div tag to overlay an embed tag and added some javascript to prevent users from right-clicking to download the pdf inside the embed tag (even though it may seem unnecessary, it was requested by my customer). Here is the ma ...

What are the steps to add a background image in Chrome?

Is there a way to set a background image using CSS and HTML that is compatible with Chrome? The code below works in Internet Explorer, but not chrome. Any suggestions? body { background-repeat: no-repeat; background-color: transparent; back ...

The HTML dropdown menu becomes crowded with numerous <li menu items, leading to it wrapping

One issue arises when the number of menu items exceeds the capacity to fit on a single line, causing them not to wrap from left to right onto the second line. The desired outcome is for the second line of the menu to start on the left just like the first l ...

How can you tell if a contenteditable div is currently in focus?

Essentially, my setup consists of: HTML: <div class="div1"> <div class="as-text-box" contenteditable="true"></div> </div> CSS: .div1{ position:absolute; height:50px; width:200px; background:white; border:1px solid #c ...

Adjusting dimensions using CSS

I am facing an issue where my tab names are displaying too large and I would like them to be default size. I have placed the following script in the <head>. <style type="text/css"> { font-family: Verdana; font-size:40%; } ...

Tips for properly sizing 13 images in Next.js

I've been facing some challenges while working on a responsive website, particularly with getting the sizing right. When viewing my image on mobile, everything looks good: https://i.sstatic.net/gNm14.png However, when I switch over to desktop view, ...

In Bootstrap 5 navbar, a distinct white underline is displayed beneath the dropdown menu in the

When designing my website with Bootstrap 5, I utilized the framework to create the navbar. Incorporating my own CSS, I enabled the services dropdown to open on hover. However, upon testing, I observed an unexpected white underline appearing under the servi ...

The jQuery slider comes to a gradual halt

I can't figure out why my jQuery slider doesn't stop right away after a mouseover event. There seems to be a delay that I can't resolve on my own. Can someone lend a hand with this problem? Here is the code I'm working with: https://js ...

clear background with logo embossed

I have encountered an issue while trying to place my logo on a black background with transparency. Instead of the background being transparent, now my logo is also becoming transparent which was not my intention. Does anyone have any suggestions or ideas ...

Relocate the number of records displayed per page next to the pagination controls in datatables

Currently, I am utilizing datatables to create tables effectively using their provided example. However, I am encountering difficulty in moving the "records per page" element, which is contained within a "span6" class of bootstrap. I understand that this ...

A guide to implementing hover and mouse click effects on ImageList using Material UI version 5.11.11

I have successfully created a list of images using MaterialUI, but now I would like to enhance the user experience by adding a mouse hover effect to highlight the image under the cursor. Below is the code snippet for my image list. How can I accomplish t ...

Center text within a span element

I'm struggling to set up arrow navigation with both next and previous buttons that need to function in Internet Explorer 7 and newer versions. For the next button, I want the background image to appear to the right of the text. As for the previous bu ...

Marquee is experiencing issues with incomplete scrolling

Hello everyone, I have been trying to implement a stock market ticker on my website. Initially, I used the marquee tag and it worked fine. Then I tried using simple scroll within the PHP UserCake user management system, but unfortunately, it is not working ...