What is the best way to align 3 boxes on the same line?

Below is the code that I have written:

<!-- Home Boxes Section2 -->
<?php
    for($bx=1; $bx<2; $bx++) { 
        if( get_theme_mod('page-setting'.$bx)) { 
            $bxquery = new WP_query('page_id='.get_theme_mod('page-setting'.$bx,true)); 
            while( $bxquery->have_posts() ) : $bxquery->the_post(); 
                ?>
                <div class="one_third <?php if($bx%3==0){ ?>last_column<?php } ?>">
                    <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?>
                        <h4><?php the_title(); ?></h4>
                        <?php echo fitnesslite_content(22); ?>
                        <span class="ReadMore"><?php _e('Read More','fitness-lite');?></span>
                    </a>
                </div>
                <?php
            endwhile;
        }
        else{?>
            <div class="one_third <?php if($bx%3==0){ ?>last_column<?php } ?>"><a href="#"><img src="<?php echo get_template_directory_uri(); ?>/images/thumb_02.jpg"><h4><?php _e('sadasdaPage Title','fitness-lite'); ?><?php echo $bx; ?></h4><p><?php _e('Phasellus viverra aliquet magna quis interduming. Sed quis fringilla massa. In ut porttitor felis necing iaculis mi. Proin tempo...','fitness-lite');?></p><span class="ReadMore"><?php _e('Read More','fitness-lite');?></span></a></div>                        
            <?php
        }
    }
?>
<!-- Home Boxes Section -->

My issue is how to display these boxes in the same line? I have repeated this code three times to create three boxes, but they are not aligning in the same line. How can I achieve this?

Answer №1

To ensure all boxes are on the same line when there is enough space, a straightforward solution is to apply float: left for each box.

Another option is to utilize display: flex;. More information about the flex property can be found at this resource.

If you're new to CSS, consider using a front-end framework like Bootstrap to gain insight into laying out pages with rows and columns. Once you grasp this concept, you'll be able to create your own CSS for any desired design.

Explore Bootstrap at http://getbootstrap.com/

Answer №2

To enhance your website design, consider utilizing bootstrap CSS as it provides a structured layout with rows and columns. In bootstrap, each row is divided into 12 columns, allowing for easy organization of content. Here's an example:

 <div class="row">
    <div class="col-lg-4">Box1</div>
    <div class="col-lg-4">Box2</div>
    <div class="col-lg-4">Box3</div>
</div>

The use of col-lg-4 three times in the above code snippet ensures that the row contains a total of 12 columns. Feel free to customize the styling further once you have integrated Bootstrap into your project. Make sure to get Bootstrap before proceeding.

Answer №3

To achieve this layout, you can utilize flexbox. Check out the browser support here.

.box-wrapper {
  display: flex;
  
  justify-content: space-around;
}
.box { 
  flex: 1;
  
  margin: 10px;
  padding: 10px;
  background: #aaa;
}
<div class="box-wrapper">
  <div class="box one">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec molestie aliquet nunc eget egestas. Suspendisse nisi felis, commodo volutpat orci suscipit, efficitur fermentum diam. Mauris posuere pellentesque fermentum. Aenean id rhoncus metus. Nullam ac urna sapien. Pellentesque vestibulum, ipsum ac vehicula imperdiet, eros ex elementum arcu .</div>
  <div class="box two">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec molestie aliquet nunc eget egestas. Suspendisse nisi felis, commodo volutpat orci suscipit, efficitur fermentum diam. Mauris posuere pellentesque fermentum. Aenean id rhoncus metus. Nullam ac urna sapien. Pellentesque vestibulum, ipsum ac vehicula imperdiet, eros ex elementum arcu, non fringilla risus dolor id eros. Nullam interdum mauris eu augue ornare facilisis. Curabitur purus libero, hendrerit ut diam id, facilisis mattis felis. Nulla facilisi.</div>
  <div class="box three">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec molestie aliquet nunc eget egestas. non fringilla risus dolor id eros. Nullam interdum mauris eu augue ornare facilisis. Curabitur purus libero, hendrerit ut diam id, facilisis mattis felis. Nulla facilisi.</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

Exchange content of div on click using AJAX technology

I'm looking to use AJAX to swap the content of two divs when a button is pressed. I created a simple jsfiddle to demonstrate what I mean. Essentially, I want to exchange A with B and B with A simultaneously (while keeping the red and green boxes in p ...

Discovering the power of jQuery: Calculating values based on selections from a multi-select dropdown and textbox

I need help with a HTML form that includes: 1 multi-select dropdown: Users select the name of an employee. 1 Textbox: Users input the total price. After entering the total price in the textbox, a small calculation sh ...

What is the best way to send data from jQuery to PHP?

Can anyone help me figure out how to retrieve the modified value of an input form using JQuery and submit it via a POST form to PHP for insertion into a MySQL database? Below is the form structure: `<fieldset> <input type="da ...

Are there methods to create a link that will open an application if it is already installed, or a website if it is not?

Similar Question: How can I check if a URL scheme is supported in JavaScript on iPhone Safari? Let's say my application is called "exapp" and I want to create a link on a website that can open the application if it is installed. If the user agen ...

Exploring scraping capabilities in Node.js

Currently, I am in the process of developing a scraping engine using Node.js to collect data for my currency exchange graphs. I am utilizing request and cheerio for this task. However, due to some bank websites not following standard HTML practices by not ...

What causes duplicate hyperlinks when adding padding to an anchor tag?

nav ul li a { display : block ; text-align : center; font-weight : 600; text-decoration : none; color:#fff; background-color : rgba(0,0,0,0.15); margin : .2em 0; padding: .2em 0; b ...

I am facing an issue with the DOM object in my ejs template when used under the script tag. How can I resolve this problem?

<%-include ("partials/header.ejs") %> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <header> <!--NAVIGATION BAR--> <img class="calender-pic" src="images/calendar.png ...

Setting the thumbnail image for an HTML5 video: A step-by-step guide

Is it possible to set a thumbnail image for an HTML5 video? I would like to display an image before the video starts playing. Here is my current code: <video width="470" height="255" controls> <source src="video.mp4" type="video/mp4"> ...

Include a lower border on the webview that's being shown

Currently, the webview I'm working with has horizontal scrolling similar to a book layout for displaying HTML content. To achieve this effect, I am utilizing the scroll function. My inquiry revolves around implementing a bottom border on each page usi ...

assign a key for browsing through results

I have an input field and I am using ajax to fetch results. Here is a simplified version of the code: <input placeholder="search here" id="search"></input> <div id="searchResults"> <a href="link">search result 1</a> ...

PHP/HTML Contact Form that sends messages to a designated email address depending on the option selected in

UPDATED: I recently created a contact form using HTML/PHP. I want to enhance user experience by allowing them to choose a specific department from a dropdown menu and have their email routed directly to that department's designated email address. My ...

The sticky positioning feature seems to be malfunctioning exclusively on mobile devices

I have encountered an unusual issue while working on my cafe-shop menu. Despite finding a solution in a standalone HTML file, the menu doesn't function properly when inserted into one of the pages of my WordPress theme - specifically, it only works on ...

Ensure that data is not cached after the page is refreshed at regular intervals of x seconds

In the process of developing a news app, I have implemented a feature where a div with the class .new_feed is refreshed every 10 seconds to fetch new updates. However, I encountered an issue where if a new feed appears in the .new_feed div and is not cli ...

CSS: What is causing my three columns to divide?

I am encountering CSS issues while attempting to develop a React app using Next.js. Here is the content of my home.module.css: .grid_container { /* display: grid; */ /* grid-template-columns: auto auto auto; */ /* column-count: 3; align-items: fle ...

Center-aligned Bootstrap column with a width of 50% and centered vertically

I am looking to have images and videos displayed side by side on my webpage. The code below functions properly, however there is an issue with the alignment. While the horizontal center alignment is correct, the video and images are not centered vertically ...

Is it possible for me to utilize a type of CSS variables?

Looking to organize all the CSS code on my website in a specific manner. I want to define the type with details such as size, weight, and color. For example: <h1 bold blue>Hello world</h1 blue bold> So essentially, the CSS file will include: ...

Selecting CSS tag excluding the first-child element

My goal is to use CSS to target the li elements in a list that do not have a description and are not the first-child with a b element. I want to apply padding-left to these specific li elements that do not have a title. <ul> <li><b>t ...

Unable to configure AngularJS inputs to have a blank default value

I am facing a peculiar issue where I am unable to initialize my input fields as blank/empty. Even after clearing the cache and performing a hard reload, Google Chrome seems to be auto-populating them with older cached values. Here is the current view: ht ...

Prevent draggable functionality of jQuery UI on elements with a specific class

I have created a dynamic cart feature where users can drag and drop items into the cart. However, once an item is placed in the cart, it should no longer be draggable (though still visible but faded). I attempted to achieve this by using the following code ...

What steps should I take with my Android PWA manifest and service workers?

I created a web application that I want to prompt Android users to download when they visit. To build my service workers and manifest, I utilized PWA Builder which can be found at Now that I have the manifest file ready, should I simply upload it to the r ...