Ways to align three divs next to each other in an HTML structure?

I am currently working on a website layout that consists of three sections positioned horizontally. I am aiming for the left division to take up 25% of the width, the middle one to occupy 50% of the width, and the right division to fill 25% of the width so that all divisions collectively span across 100% of the horizontal space.

<html>
    <title>
    Website Title
    </title>

    <div id="container" style="height:100%; width:100%" >

        <div id="left" style="position: relative; width:25%; background-color:blue;">
            Left Side Menu
        </div>

        <div id="middle" style="position: relative; width:50%; background-color:green;">
            Random Content
        </div>

        <div id="right" style="position: relative; width:25%; background-color:yellow;">
            Right Side Menu
        </div>

    </div;
</html>;

https://i.sstatic.net/NZDJe.jpg

Upon testing this code, the divs stack on top of each other instead of appearing next to one another. How can I remedy this issue?

Answer №1

In my opinion, using floats for this sort of layout may not be ideal; I would prefer to utilize inline-block instead.

Here are some additional points to take into consideration:

  • Avoid inline styles as they can hinder maintainability
  • Try to avoid spaces in selector names
  • Ensure important HTML tags like <head> and <body> are included
  • Do not forget to include a

Below is an improved way to structure your document:

<!DOCTYPE html>
<html>
<head>
<title>Website Title</title>
<style type="text/css">
* {margin: 0; padding: 0;}
#container {height: 100%; width:100%; font-size: 0;}
#left, #middle, #right {display: inline-block; *display: inline; zoom: 1; vertical-align: top; font-size: 12px;}
#left {width: 25%; background: blue;}
#middle {width: 50%; background: green;}
#right {width: 25%; background: yellow;}
</style>
</head>
<body>
<div id="container">
    <div id="left">Left Side Menu</div>
    <div id="middle">Random Content</div>
    <div id="right">Right Side Menu</div>
</div>
</body>
</html>

For further demonstration, you can view a live example on jsFiddle.

Answer №2

This question may be dated, but I wanted to share my solution which utilizes FlexBox. Here is the code snippet:

#container {
  height: 100%;
  width: 100%;
  display: flex;
}
#leftThing {
  width: 25%;
  background-color: blue;
}
#content {
  width: 50%;
  background-color: green;
}
#rightThing {
  width: 25%;
  background-color: yellow;
}
<div id="container">

  <div id="leftThing">
    Left Side Menu
  </div>

  <div id="content">
    Random Content
  </div>

  <div id="rightThing">
    Right Side Menu
  </div>

</div>

All that was needed was adding display:flex to the container! No floats necessary.

Answer №3

To implement floating elements, you can follow this structure:

<div id="wrapper" style="height:100%; width:100%; overflow: hidden;">
    <div id="leftPanel" style="float: left; width:25%; background-color:blue;">Left Sidebar</div>
    <div id="mainContent" style="float: left; width:50%; background-color:green;">Main Content Area</div>
    <div id="rightPanel" style="float: left; width:25%; background-color:yellow;">Right Sidebar</div>
</div>

Make sure to include overflow: hidden; in the parent container to ensure it expands properly based on the child elements' dimensions, preventing a height of 0.

Answer №4

Simplest Method

I see that the question has been resolved, but I'm sharing this answer for those who may encounter the same issue in the future.


Avoid coding inline CSS and using IDs for inner div elements. It's best practice to utilize classes for styling. Inline CSS should be avoided if you aim to work as a professional web designer.

In your query, I have applied a wrapper class to the parent div and designated the inner divs as child divs in CSS by utilizing the nth-child selector.

Some key points to highlight:

  1. Avoid using inline CSS (it's not recommended)

  2. Opt for classes over IDs because an ID can only be used once, whereas a class can be reused multiple times for styling, resulting in cleaner code.


Find my solution on Codepen here:

https://codepen.io/feizel/pen/JELGyB


.wrapper {
  width: 100%;
}

.box {
  float: left;
  height: 100px;
}

.box:nth-child(1) {
  width: 25%;
  background-color: red;
}

.box:nth-child(2) {
  width: 50%;
  background-color: green;
}

.box:nth-child(3) {
  width: 25%;
  background-color: yellow;
}
<div class="wrapper">
  <div class="box">
    Left Side Menu
  </div>
  <div class="box">
    Random Content
  </div>
  <div class="box">
    Right Side Menu
  </div>
</div>


Answer №5

Make a simple adjustment by adding

float: left;

to the style of the 3 elements and ensure the parent container includes

overflow: hidden; position: relative;

This setup ensures that the floats occupy real space within the layout.

<html>
    <head>
        <title>Website Title </title>
    </head>
    <body>
        <div id="the-whole-thing" style="position: relative; overflow: hidden;">
            <div id="leftThing" style="position: relative; width: 25%; background-color: blue; float: left;">
                Left Side Menu
            </div>
            <div id="content" style="position: relative; width: 50%; background-color: green; float: left;">
                Random Content
            </div>
            <div id="rightThing" style="position: relative; width: 25%; background-color: yellow; float: left;">
                Right Side Menu
            </div>
        </div>
    </body>
</html>

Remember to remove the width: 100% and height: 100% from the container to prevent the last block from wrapping onto a new line.

Answer №6

Replace the position:relative; with float:left; and float:right;.

For a demonstration, check out this example on jsfiddle: http://jsfiddle.net/d9fHP/1/

        <html>
<title>
Website Title </title>
<div id="the whole thing" style="float:left; height:100%; width:100%">
    <div id="leftThing" style="float:left; width:25%; background-color:blue;">
         Left Side Menu
    </div>
    <div id="content" style="float:left; width:50%; background-color:green;">
         Random Content
    </div>
    <div id="rightThing" style="float:right; width:25%; background-color:yellow;">
         Right Side Menu
    </div>
</div>
</html>​

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

What is the best way to apply styles to a particular ul element without impacting the appearance of other lists on

I am facing an issue with the styling of ul elements on my web page. The latest ul I added is affecting the appearance of other lists on the page. How can I ensure that the styling for this ul only affects this specific one? I have attempted multiple solut ...

Trouble with launching Semantic UI modal

I have implemented a button using Semantic UI and set up a click event to open a modal when clicked, but nothing is happening. When I click on the link, there is no response. I'm unsure what the issue might be. Below is the code for the button: < ...

What is the reason for the absence of a shorthand property in CSS that combines width and height measurements?

Have you ever thought about using a shorter property for specifying an item's width and height in CSS? Currently, we have to write: selector {width: 100px; height: 250px;} While this is already pretty fast, wouldn't it be even quicker if we c ...

Tips for generating a <div> element with multiple children using a loop

section, I have configured a div element with a class named div class = "postWindow". When it comes to the HTML code, here is an example: <div class = "postWindow"> <div class = "userName">Initial Name</div> <div class = "p ...

Align images at the center of a division using the Bootstrap framework

I'm facing an issue with centering social network icons under a div in my login form while keeping it responsive. Can someone please assist me with this problem? Please help me!!. .row { background: #f8f9fa; margin-top: 20px; } .col { bor ...

Utilizing variable values in HTML and CSS to enhance a website's functionality

My current project involves modifying an HTML web resource for use in Dynamics 365. I need to replace a static URL with a dynamic value obtained via Javascript, specifically: var URL = Xrm.Page.context.getClientUrl(); There are multiple instances within ...

sending additional parameters within a URL query string

Is it even possible to include a URL with get parameters within another get parameter? For example, I'd like to pass http://example.com/return/?somevars=anothervar as the value for the "return" parameter as shown below: http://example.com/?param1=4&a ...

Shifting an HTML anchor to account for a stationary header - Safari compatibility with alternative CSS styling

I made adjustments to my HTML anchors by adding an offset in the CSS to accommodate for a fixed header in my theme: margin-top: -175px; padding-top: 175px; } /* Adjustments for screen sizes of 760px and smaller */ @media (max-width:760px){ #r ...

Turn off the custom CSS section in the WordPress Customizer for WordPress themes

Looking for assistance in locking or disabling the Appearance -> Customizer -> Additional CSS area on Wp-admin. https://i.sstatic.net/FXXSE.png I have referred to this codex: https://codex.wordpress.org/Theme_Customization_API. However, I couldn&ap ...

Have you ever created a CSS class that you've had to reuse multiple times?

They always told me to consolidate repeated properties in CSS into one rule, like the example below (please forgive the poor example). I typically see this: .button, .list, .items { color: #444; } Having multiple rules like this can create a lot of clut ...

Adjusting the line-height and baseline to accommodate various screen sizes on both mobile and desktop

This problem seems to keep coming back for me. I can't figure out what's causing it. Here are two images showing the issue: On desktops: https://i.sstatic.net/AAGbb.png On mobile devices: https://i.sstatic.net/Zk4pc.jpg As you can see, the ...

The program waited for 60 seconds for the element to become clickable in the Selenium webdriver, but it timed out

I am currently working on Selenium web driver and trying to locate the element with the ID visualizationId, but I keep encountering an error. Below is the code snippet where the error occurs: Actions actions1 = new Actions(driver); WebElement dBox1= ((new ...

Determine the size of a file in either megabytes or kiloby

I need to determine the size of a file in either megabytes if the value is greater than 1024 or kilobytes if less than 1024. $(document).ready(function() { $('input[type="file"]').change(function(event) { var _size = this.files[0].si ...

Guide on generating a video thumbnail using JavaScript Application

Searching for a way to easily create a thumbnail from a video for uploading alongside the video itself to a server? I've been looking for JavaScript libraries to simplify the process without much luck. The scenario involves the user selecting a video ...

"Implementing a search bar feature using HTML, CSS, and

My attempt to implement a search bar CSS from CodePen is not working properly in React. Even though I used the exact code provided, the search bar seems to be buggy. If you want to take a look at the code sandbox for better reference, you can visit: https ...

Attempting to align navigation bar in the middle of the page

I'm facing some issues with centering the navigation bar on my website. I attempted to use a wrapper div to center it, but unfortunately, it didn't work out as expected. The only thing that seems to be working within that div is adjusting the lef ...

Can a javascript code for "Infinite Scroll" be created to manage the back button?

Head over to this website: Experiment with the infinite scroll feature. You may notice that when you click a link and then press "back", there are some glitches. Therefore, I am considering developing my own version of an Infinite Scroll functionality. ...

Retrieve the API array index by checking the value of the 'Name' field

I am looking to compare the name of a button I click on with an array in order to find the matching name and then select the corresponding array number. Currently, I have a For loop that retrieves information from every team in the array, but I only requi ...

The extent of a nameless function when used as a parameter

I am currently developing a straightforward application. Whenever a user hovers over an item in the list (li), the text color changes to green, and reverts back to black when the mouse moves away. Is it possible to replace lis[i] with this keyword in the ...

Create an interactive quiz using JQuery that focuses on sorting and organizing

Hey there, I need some advice on creating a quiz for ordering and sorting in HTML5/JQuery. Basically, I want to display a random set of steps on the page that users have to organize correctly. I found an example using jQuery and jquery-ui-1.8.5.custom.min. ...