Creating a 2-column layout in HTML

What is the best way to vertically arrange two divisions? Below is my code for the divisions:

.containerLeft {
  width: 50%;
  float: left;
}

.containerRight {
  width: 50%;
  background-color: skyblue;
}
<div class="containerLeft">
  <input type="text" id="mytext" />
  <select id="myList" multiple="multiple"/>
</div>
<div class="containerRight">
  <input type="button" class="myButton" value="A"></input>
  <input type="button" class="myButton" value="B"></input>
  <input type="button" class="myButton" value="C"></input>
</div>

I want the first div container to take up 50% of the screen and have the second div container with buttons take up the remaining 50%. Both containers should be displayed side by side.

Any assistance on achieving this layout would be greatly appreciated. I am new to HTML, so please correct me if this approach is not the right way to position two panels next to each other.

htmlcss

Answer №1

From what I gather, it seems like this could be the answer:

.rightContainer {
   float:right;
   width: 50%;
   background-color: lightblue;
}

Answer №2

It has been noted by others that there are several issues with your HTML code. I have made the necessary corrections.

Your CSS styling is almost perfect, just remember to include float: left for the other div as well.

.containerLeft {
  background-color: red;
  float: left;
  width: 50%;
}

.containerRight {
  background-color: skyblue;
  float:left;
  width: 50%;
}

To see the solution in action, check out this fiddle: https://fiddle.jshell.net/a9t2ygsa/1/

Answer №3

Take note of the corrections I made to your HTML code. It seems like this is what you are looking for.

.containerLeft {
  width: 50%;
  height: 100vh;
  float: left;
}

.containerRight {
  width: 50%;
  height: 100vh;
  float: left;
  background-color: skyblue;
}
<div class="containerLeft">
  <input type="text" id="mytext" />
  <select id="myList" multiple="multiple"></select>
</div>
<div class="containerRight">
  <input type="button" class="myButton" value="A" />
  <input type="button" class="myButton" value="B" />
  <input type="button" class="myButton" value="C" />
</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

Issue with focus transition animation not functioning properly when unfocusing an HTML input field

Hey there! I'm currently working on styling a basic input, and I'm having trouble getting the unfocus animation to work properly. Can anyone help me figure out what's going wrong? I've tried commenting out the all: unset line and expl ...

htmlcssvue.jscss-transitions

Creating a countdown clock with JavaScript

I am looking to create a timer using JavaScript that will decrement at different intervals based on the level. For example, if my timer starts at 500, I want it to decrement as follows: 1. The first level timer should decrement by 1 with a slow speed. ...

javascripthtmltimercountdown

Continuously updating C# HTML parsing

I am facing a challenge with my webpage that is using AJAX queries to display data, as I need to parse this data in a C# program. The issue arises when I try to view the source code of my webpage, which does not show the data due to it being automatically ...

c#htmlajaxweb-scraping

Using a for loop to add a nested div inside another div

Hey there, I've got a question about the loop that's currently in my code. Right now, I'm doing it manually and it seems to be working that way. $( '<div id="demo1" > <span class="value"></span> </div> ...

javascriptjqueryhtml

Transitioning to a bootstrap or fluid design from a foundation of simple HTML and CSS

Although I am not a web designer by trade, I have a background in statistics and am currently working on building a website. I have sketched out the layout structure I desire using basic html and simple css to kick things off. However, upon further explora ...

jqueryhtmlcsstwitter-bootstraptwitter-bootstrap-3

Preventing placeholder from reverting back on transition (CSS)

My goal was to create an input field with a transition effect on the placeholder text. To achieve this, I utilized a <span> tag to hold the placeholder and applied a transition using the :focus CSS selector. The implementation works smoothly, but the ...

htmlcssdebuggingcss-transitionsplaceholder

What is the method to adjust line spacing of hyperlinks in JavaFX?

I am setting up a vbox and inserting hyperlinks into it. Hyperlink clickableString; clickableString = new Hyperlink(); clickableString.setStyle("-fx-text-fill: black;-fx-padding: 0; -fx-line-spacing: 0em;"); //setting the hyperlink color to black. clicka ...

csshyperlinkjavafxspacing

Utilizing AngularJS to submit a form with dynamic fields

Challenge: I encounter an issue while trying to submit data in form B. The main obstacle is that all the fields within form B are displayed in a loop, making it difficult to assign specific names to each field. Snippet of HTML Code for form B <form id ...

htmlangularjsformsangularjs-ng-repeat

Tips for arranging divs in a row to switch to stacking when the screen size decreases

Sorry if this question seems repetitive, but as a newbie, deciphering posts from others has been overwhelming! I have two divs placed side by side within a wrapper, but I need them to stack on top of each other when viewed on a tablet or phone. Below is t ...

htmlcss

Clicking on the current component should trigger the removal of CSS classes on its sibling components in React/JSX

Currently, I am working on creating a navigation bar using React. This navigation bar consists of multiple navigation items. The requirement is that when a user clicks on a particular navigation item, the class 'active' should be applied to that ...

javascriptjquerycssreactjs

CrispyForms: FormHelper - Easily move the </form> tag to a different location and manage multiple forms from a single model

When utilizing FormHelper and invoking the Form using {% crispy form %}, it generates a Form wrapped within <form> tags. However, my Template is structured into two columns. The first column displays the dynamically generated {% crispy form %}. The ...

pythonhtmldjangodjango-formsdjango-crispy-forms

Using the ol tag in Google Chrome browser

I'm dealing with an issue regarding a simple ol list in a div: <div class="one">Title<hr width="200px"> <ol> <li>One</li> <li>Two</li> <li>Three</li> </ol> </div> Here's the CSS ...

htmlcssgoogle-chrome

Steps to assign a value to a variable upon clicking on text

Struggling to create a form using HTML, CSS, and PHP. The concept involves selecting an option from a dropdown menu and picking a date on a calendar. However, the challenge lies in sending a value to a variable in PHP upon clicking a day. Once the value ...

phphtml

What causes the disparity in the rendering of iframe content height when using "src" compared to "srcdoc"?

After comparing the behaviors of iframes with src and srcdoc, I stumbled upon a puzzling difference: a div set to 100% height renders as the full height of the iframe when using src=[data uri], but not with srcdoc. The issue can be easily replicated with ...

htmlcssiframe

Bootstrap - labels with several words may split into separate lines

When I create a form with input fields and labels in an ASP.NET view, I notice that labels with multiple words break into separate lines at full scale. I would like to keep these labels on one line for better aesthetics. Here's an example: @using (Ht ...

htmlcssbootstrap-4

What is preventing my video from filling the entire screen?

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=d ...

javascripthtmlcsssass

What is the best way to align dynamically generated divs seamlessly together?

After creating a function that generates a grid of divs placed in a container div upon document load or user reset, I noticed a gap between each row of divs. I aim for a flawless grid where each square aligns perfectly with the next. Despite trying vario ...

javascriptjquerycss

Exploring Angular 5: Unleashing the Potential of Component Tags

I have created a unique custom modal for my Angular 5 application, and now I am looking for a way to customize the content within it. For example, here is a snippet of code I have used: <app-modal> <p>Some Text!</p> </app-modal> ...

htmlangularangular5

Using jQuery to retrieve the domain extension from a URL

Seeking assistance with extracting domain extensions from various URLs using jQuery. Uncertain how to account for all possible scenarios. Here are the parts of the URL that need to be extracted: https://www.amazon.**com**/dp/067144901X https://www.amazon. ...

javascriptjqueryhtmlurl

Load the div iframe when it is clicked

I'm looking for a way to optimize the loading of div elements on my website. Currently, when the page is loaded, all divs are also loaded but remain hidden until clicked. Is there a method to delay loading the content of a specific div until it's ...

htmliframe