Position two divs next to each other

Struggling to align two divs side by side and encountering issues. Despite researching similar problems on stack overflow, I can't seem to find a solution that works for me.

Can someone spot any errors in my code? The second div is not aligned properly with a gap between the two. Any help would be appreciated.

(I've tried with and without using vertical-align: top)

#parent {
  width: 96%;
}

#Div1 {
  float: left;
  width: 46%;
  left: 1%;
  border: 1px solid rgba(0, 0, 0, 1);
  vertical-align: top
}

#Div2 {
  float: left;
  width: 46%;
  left: 49%;
  border: 1px solid rgba(0, 0, 0, 1);
  vertical-align: top
}
<div id="parent">
  <div id="Div1">some text</div>
  <div id="Div2">some more text</div>
  <br style="clear: both;" />
</div>

htmlcss

Answer №1

It is highly recommended to utilize flexbox instead of relying on float: left or float: right. Flexbox simplifies the layout process and enhances efficiency!

Regarding your inquiry:

#container {
    display: flex;
    justify-content: space-between;
}

That's all there is to it! Flexbox truly streamlines the process, doesn't it?

Answer №2

Eliminate the left:% and the parent width%

#container {
}

#Box1 {
  float: left;
  width: 46%;
  border: 1px solid rgba(0, 0, 0, 1);
  vertical-align: top
}

#Box2 {
  float: left;
  width: 46%;
  border: 1px solid rgba(0, 0, 0, 1);
  vertical-align: top
}

https://jsfiddle.net/pzj7nop6/

Answer №3

Adjust both elements to have a style of display: inline-block;, remove the float property, and add a margin-right to the left element.

#container {
  width: 96%;
}

#Box1 {
  display: inline-block;
  width: 46%;
  border: 1px solid rgba(0, 0, 0, 1);
  margin-right: 10px;
}

#Box2 {
  display: inline-block;
  width: 46%;
  border: 1px solid rgba(0, 0, 0, 1);
}
<div id="container">
  <div id="Box1">some content</div>
  <div id="Box2">additional content</div>
</div>

Answer №4

#Container1 {
   box-sizing: border-box;
   float: left;
   width: 45%;
   border: 1px solid rgba(0, 0, 0, 1);
   vertical-align: top;
}

#Container2 {
    float: left;
    box-sizing: border-box;
    width: 45%;
    left: 5%;
    border: 1px solid rgba(0, 0, 0, 1);
    vertical-align: top;
    position: relative;
}

Answer №5

  1. Create a single common div for block1 and block 2
  2. Add CSS styles.

HTML:

<div class="main">
<div class="block1">---</div>
<div class="block2">---</div>
</div>

CSS:

.main
{
   width:set appropriate size (block1+block2) in pixels;
   margin:0 auto;
}
.block1
{
width:block1_width;
float:left;
}
.block2
{
width:block2_width;
float:right;
}

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

Use JavaScript to simulate a button click event when the button is clicked

Looking for assistance in triggering a button click event from another button click. I am currently using jquery fileuploader, but it doesn't match the design of my website, so I have hidden the file upload control and placed another button on top of ...

javascriptjqueryhtmlasp.net

Enhance the appearance of a dropdown selection using CSS

I am interested in customizing the appearance of the first option (Search Clubs) to be bold, while keeping the rest with normal font weight. Currently, I am able to make the first option bold, but it only appears that way after clicking the dropdown menu ...

cssdrop-down-menu

Retrieving a compilation of items found within text selected by the user on a website

Imagine a scenario in which a webpage contains the following structure: <p> <span class="1">Here's some text</span> <span class="2">that the user</span> <span class="3">could select.</span> </p> I ...

javascriptcsstextselection

Choosing from Select2 and Bootstrap: displaying chosen elements beyond the placeholder

I'm currently working on setting up a Select2 Placeholder with multiple options in a Bootstrap template. The issue I'm facing is that when I select all the options, they extend beyond the placeholder boundaries. Here's how it looks: https: ...

htmljquerybootstrap-4jquery-select2

Is there a Ruby solution for converting external CSS to inline CSS?

Exploring GoogleDocs, I noticed that it has limited CSS support. When uploading an MSWord .doc or HTML file and exporting it as HTML, all styles are applied inline. Although there is a style block in the HTML file, non-inline styles do not get applied when ...

cssgoogle-docshtml-parserinline-styles

What's the reason my JavaScript isn't functioning properly?

Brand new to coding and I'm delving into the world of Javascript for the first time. In my code, there's a checkbox nestled within an HTML table (as shown below). <td><input type="checkbox" id="check1"/> <label th:text="${item.co ...

javascriptjqueryhtmlcheckbox

The view of the Google map is filled with numerous rounded tiles

Map divided into 3x3 tiles I am looking to customize the appearance of my map and remove all spaces and rounded corners to create a seamless, undivided visual. Is there a way to modify a map tile attribute to achieve this effect? Below is the code snippet ...

javascriptcssgoogle-mapsmatrixgoogle-api

Locating HTML content using a regular expression and saving it in an array with PHP

I am looking to find specific strings in HTML code, such as: <div class="icon_star">&nbsp;</div> and <div class="icon_star"></div> or <div class="icon_star"> </div> The above strings need to be located within H ...

phphtmlregexpcre

Ways to adjust the height of one panel based on the height of surrounding panels

I have a layout with three panels: two on the left side and one on the right. <div class="row"> <div class="col s6"> <div class="panel"> content1 </div> <div class="panel"> ...

javascriptcsspanelmaterialize

the neighboring div sliding to the left causing the div not to expand with its content

I am trying to create a website similar to this one. When I click on the arrow, the left div collapses and the right one expands. However, the content of the right div does not expand as expected! Below is my HTML code: <div class="tools-bg"> & ...

jqueryhtmlcss

Is it possible to dynamically change HTML content by utilizing a JSON file?

Looking to implement a JavaScript loop (using jQuery) that can dynamically populate the HTML file with content from a JSON file based on matching <div> ids to the JSON "id" values. The solution should be scalable and able to handle any number of < ...

javascriptjqueryhtmljsonloops

A technique for horizontally centering an image while simultaneously ensuring that the bottom is pushed down, even at an unknown resolution, and maintaining center alignment if

Imagine a scenario where I have an image with unknown resolution. My goal is to horizontally center it, even if the window's width is smaller than the picture, while also adjusting the bottom of the window to match the height of this picture. Is ther ...

htmlimagecssbackground-position

The Jquery css on my website is not functioning properly

After creating a website feature where clicking on a specific div triggers an onclick event processing a chat_generate function, I encountered some issues. This funciton should insert HTML for the chat into a designated .open_div based on the id generated ...

javascriptphpjqueryhtmlcss

What is the best way to incorporate HTML styling into a PHP email tutorial focused on Swift Mail?

I recently created a competition page for a client, and they have requested that the email sent to customers be more visually appealing than just plain text. The tutorial I followed only included basic text within the 'send body message' section. ...

phphtmlemail

displaying the timestamp of the most recent reaction inserted

I am trying to figure out how to display the timestamp of the most recent 'reaction' that was added. I believe there is a straightforward PHP solution for this, but I haven't been able to find it yet. https://i.sstatic.net/siKUs.png As ind ...

phphtmlmysql

Tips for positioning an inline label and input field in an Angular application using CSS and HTML: How to align the label to the left and the input

I'm currently developing an Angular form with multiple label-input field combinations. I have managed to style the labels and input fields with inline block so that they appear on the same row. However, I am facing a challenge in aligning the label to ...

htmlcssangular

Organize three image links side by side using HTML layout

Hello there! I'm currently working on a website project and I'm struggling with arranging some image links in a specific layout. The grey rectangles you see represent where the images should be placed, all of them are uniform in size (275 x 186) ...

csshtml

What is the method for choosing outerHTML using Simple HTML DOM Parser?

Check out this code snippet: include('simple_html_dom.php'); // Creating a DOM from the specified URL $page = "http://indonesiax.co.id"; $html = new simple_html_dom(); $html->load_file($page); // Locating all images in the HTML $value = $htm ...

phphtmlsimple-html-dom

What are the common reasons for code malfunctions on JSFiddle?

I have compiled some code at https://codepen.io/fjenpen/pen/pROPov but for some reason, when I check it out on https://jsfiddle.net/z05d3ufq/, the #flexiselDemo3 element is breaking? $('#flexiselDemo3 a').click(function(e) { var target = $(this) ...

jqueryhtmlcss

Maintaining the gridview header position during scrolling

When I fixed the header of my GridView and scrolled down, the headers remained constant but were not displayed properly. All the column headers appeared shrinked and did not align with the respective columns. Despite trying various solutions, nothing seeme ...

c#javascriptasp.netcss