What is the best way to position two divs side by side on the left and right?

I am working on arranging <div id="box"> to the left and <div id="box2"> to the right inside the container of <div id="content">. It's important that they are not set to position:absolute; as it causes issues with the height. I have found that using position:absolute; results in the div floating above other content.

If you'd like to see the issue in action, you can view a direct link here. Please note that this is a purely CSS layout with PHP as the backbone.

Click Here to See the Issue

<div id="content">
    <div id="box1">
        <h2>Company Information</h2>
        <img src="images/photo-about.jpg" alt="" width="177" height="117" class="aboutus-img" />
        <p color="FF6600">
            some content here
        </p>
    </div>
    <div id="clear"></div>
    <div id="box" style="width:350px;">
        <h2>Availability</h2>
        <p>
            some more content here
        </p>
    </div>
    <div id="clear"></div>
    <div id="box2" style="width:350px;float:left;overflow: auto;">
        <h2>Our Commitment</h2>
        <p> 
            some content here
        </p>
    </div>
</div>

Answer №1

Using the float property will shift your element to the left side of its containing div, prioritizing placement over other inline elements on the page. Originally designed for aligning images with text for wrapping purposes.

To have two elements float next to each other, apply float:left; and float:right;, enclosing them in another div to prevent interference from surrounding elements (or ensure the following element includes clear:both;). To contain these floated elements within a parent div, use overflow:auto for automatic sizing. Be sure to assign a width to the floating divs to control their expansion within the parent container.

Answer №2

To make your divs "float," specify a width for each one and float them either to the left or right. Make sure to clear after them to prevent unintentional overlap with other elements. Include code like the examples below in your CSS classes/IDs.

float:left;
width:SPECIFICpx;

...

float:right;
width:SPECIFICpx;

...

clear:both;

Answer №3

If you're striving for a three-column layout, it's not as straightforward as you might anticipate. While a basic example may seem simple, complications arise when incorporating headers or footers and ensuring columns expand with content.

For inspiration and guidance, I recommend checking out this article.

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

Error encountered: string literal not closed while attempting to load text using ajax

It appears that many programmers from various languages have encountered this issue. I am using jQuery to fetch AJAX text onto a screen, but firebug is indicating an unterminated string literal with an unhelpful example : $("#content").html("<div cla ...

Steps for accessing a particular tab on a separate webpage

I am working on a home page that includes an IFrame displaying a separate HTML page. Within the embedded page, there is a link that, when clicked, should open another page in the same IFrame with a specified tab displayed. This new page contains 3 tabs, ...

Interactive data visualization with hover-over details

I am utilizing datamaps to showcase the countries of the world, however, I want the graph to be centered. The issue arises when I hover over a country and the pop up appears all the way to the left, aligned with where the country would be if it wasn't ...

Here is a unique version: "Guidelines for changing the default text " - " inside a button class='btn'> " - "< once the element is hovered over:after"

When hovering, the output always displays as "1IPSUM". However, adding a ':before' element with 'content:"1"' results in the output before hover being "11" The desired output is: while hovering, display "IPSUM" Fiddle Link: https://j ...

How can an input field with a checkbox type be properly placed within a table data tag in a table nested within an AngularJS modal?

Below is the code for my modal: <!-- modal for viewing permissions --> <div id="modal-user-permissions" class="modal"> <div class="modal-content"> <h4 id= ...

How to optimize a WordPress page template with static HTML content for improved search visibility

I recently created a unique Wordpress page template by embedding static HTML code within a PHP file located in my child theme folder. I specified the template name within a comment block, added the desired HTML content, and then assigned this template to a ...

PHP login page without database connection

I created a login page in PHP without using a database. However, the code doesn't display an "incorrect login" message as intended. Instead, upon entering correct login details, it redirects to another page. Below are the codes for phplogin.php and ph ...

Angular input field for numbers does not display default values

In my stock-status.component.ts file, I have the code snippet below: @Component({ selector: 'app-stock-status', template:` <input type="number" value='0' min='0' required [(ngModel)]='updatedStockValue& ...

Sticky full-height slider with horizontal scrolling

I've been working on creating a horizontal slider animation that smoothly scrolls, inspired by the one showcased on The slider on weltio remains sticky as you scroll, showcasing images and content within. On my page, I have a lot of content and my g ...

Event listener added for a specific class, with certain individuals within the class not impacted

I've created a grid to serve as a menu, with a top row consisting of an unordered list (ul) containing three list items (li). Each of these li elements contains another ul with four li items inside. I've added an event listener that triggers when ...

When `focus` is bound to a jQuery event handler, the behavior of the select element becomes erratic on

What causes the odd behavior where users need to click twice on a select-option for it to drop down/up after binding an eventhandler to the focus event using jQuery? $('input, select, textarea').focus(function() { $(this).addClass('input_ ...

function for clicking on mobile navigation bars

I could use a bit of assistance with understanding this JavaScript function. I am trying to create an onclick function for the mobile navigation "li" that will cause it to slide up. Can someone help me figure this out? Thank you. <!-- /#js --> < ...

Customizing the DatePicker with a unique button in material-ui

For my current project, I am utilizing a Datepicker component. I am looking to incorporate a custom information button in the upper right corner of the calendar layout, similar to the example image provided below: https://i.stack.imgur.com/fHMbn.png Unfo ...

Incorporate a pair of additional columns and showcase the outcome within a third column within an HTML

function = () => { var info1 = parseInt(document.getElementById("info1").value); var info2 = parseInt(document.getElementById("info2").value); var res = Number(info1.value + info2.value); var info3 = document.getElementById("info3"); ...

What is the best way to retrieve multiple image file names using JavaScript?

I attempted to use the code snippet below to retrieve the names of all the images I selected, however when I used 'alert', I only received one name even though I selected multiple. My goal is to have all the names of the selected photos saved in ...

Updating the Progress Bar in Shopify when the "Add to Cart" button is clicked: A step-by

I'm currently working on implementing a shipping progress bar on my Shopify Theme. However, I've encountered an issue where the progress bar does not update correctly unless I refresh the page along with the content text. Can anyone provide guid ...

What is the information stored inside the div element?

How can I extract the contents of a div using bs4? >>> Doc <div class="document"> <p>Text.</p> <p>More text</p> </div> >>> type(Doc) bs4.element.Tag I am looking to retrieve: <p>Text.</p> ...

Having trouble accessing the information stored in the Firebase Database?

As a newcomer to Firebase and JS, I am attempting to showcase user information on a webpage that is stored within the Firebase database. The data format resembles the image linked here I have written this Javascript code based on various tutorials. Howev ...

Problem encountered when utilizing Bootstrap's display classes d-none, d-md-block, and d-flex

When using the bootstrap classes d-none d-md-block in the following code block, they seem to cancel out the d-flex class. I want this block to be hidden on viewports smaller than md, but I also need to apply the d-flex class for the align-self-end class ...

Creating a JavaScript function that converts data from JSP to JavaScript using single

I am struggling to pass a string into a JavaScript function successfully. Despite trying multiple approaches, I have not been able to make it work. <a href="javascript:goFac('<%=name%>')"><%=name%></a> The variable "name ...