What is the best way to vertically align two divs on the left and right?

Having trouble aligning my dropdown list vertically with my textarea on the left. It seems like they are clashing together for some reason.

UPDATE: Thank you for the assistance, I was able to make the necessary adjustments.

JSP:

.ExeDropdown{
  float:left;
    margin-left:50px;
}
div.txt1{
    float: left;
    margin-left:50px;
}
div.txt2{
    float:right;
    margin-right: 120px;
}
.txt3{
  float:right;
  margin-right: 120px;
}
#subBtn{
  position: absolute;
    bottom: 20%;
    left:47%;
}
<div class="ExeDropdown">
    Select an exercise: 
    <select name="ProgExe">
      <option value="exe1">Exercise 1</option>
      <option value="exe2">Exercise 2</option>
    </select>
</div>    
<div class="txt1" >
    <p>Write your source code here:</p>
    <textarea id="myTextArea" rows="5" cols="40" name="txtInput" >
    </textarea>
</div>

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

htmlcssjsp

Answer №1

Here is the code snippet for you:

HTML:

<div class="ExerciseDropdown">
Choose an exercise: 
<select name="ProgrammingExercise">
  <option value="exercise1">Exercise 1</option>
  <option value="exercise2">Exercise 2</option>
</select>
</div>    
<div class="clearfix"></div>
<div class="text1" >
<p>Enter your source code below:</p>
<textarea id="myTextArea" rows="5" cols="40" name="textInput" >
</textarea>
</div>

CSS:

.clearfix{clear:both;}

Answer №2

Remove the float:left; property from both .ExeDropdown and div.txt1 elements.

After making this adjustment, your code should function correctly.

Answer №3

Insert a line break prior to this:

Choose an activity: 
<br /> <!-- right here -->
<select name="ProgAct">

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

Is it possible to position the Sprite image to the right of the anchor tag?

I have a CSS sprite image that is functioning correctly, but I am encountering an issue where the image is displaying on the left side of the anchor tag's text instead of the right. You can view the sprite image here. Expected result: [Mylinktext]&l ...

csscss-sprites

tainted ajax outcome

Check out this HTML page I am using: <html> <head> <title>AJAX Example</title> <meta http-equiv="Content-Type" content="text/html"; charset="iso-8859-1"> </head> <script language="JavaScript" src="ajaxlib.js"> ...

phphtmlajax

Elements recognized worldwide, Typescript, and a glitch specific to Safari?

Consider a scenario where you have a select element structured like this: <select id="Stooge" name="Stooge"> <option value="0">Moe</option> <option value="1">Larry</option> <option value="2">Curly</option ...

javascripthtmldomsafaritypescript

Leverage CSS styling for database values within a PHP framework

How can I style MYSQL database values in HTML using CSS? My vegetarian database row has 'Y' for yes and 'N' for no. I want to apply different styles to these values using CSS as I display them on my PHP-based page. if ($result1->num_ ...

phphtmlcssmysqldatabase

Grant the "User" the ability to modify both images and prices

I'm currently working on an art website for a relative and I am looking to provide them with the ability to log in and easily update the images of their paintings as well as adjust the pricing. Is it possible to enable this functionality? My assumptio ...

javascriptphphtml

What is the best way to split two sets of radio buttons with the same name into distinct blocks in an HTML form?

For my project, I am working with two sets of radio buttons where the values are stored in a Database. Depending on another result in the HTML form, I need to display one set of radio buttons or the other. The issue arises when using the same name for all ...

javascriptjqueryhtml

What are some ways to optimize the use of the jquery.mCustomScrollbar.js script?

I have a myriad of inquiries and would greatly appreciate your assistance in addressing them. Despite spending countless hours attempting to solve the issue independently, I have been unsuccessful. One question that plagues me is why, when using Google Ch ...

javascriptjqueryhtmlcssscrollbar

Jekyll is not beginning line numbers from the first line as they should be

My website was put together using Jekyll, specifically with the Beatiful-Jekyll theme. To make syntax highlighting possible, I utilized Rouge. The issue arises when displaying line numbers alongside the code - sometimes they don't align properly or ar ...

cssjekyllblogsrouge

Is there a method to automatically execute an 'onchange' function whenever a value is updated due to an AJAX response?

Many drop down menus are present on my page; <... onchange="callthisfunction(...)"...> While a manual change easily triggers the function, using ajax to load saved data does not register the value as changed and the function is not triggered. Is th ...

htmlajaxonchange

Having trouble locating a method in $scope following angular $compile

Apologies for the simple question, I am a beginner in AngularJS and front-end development. I am attempting to create a modal using bootbox as shown below: In Service: function _modalData(){ let element = "<div onclick=\"saveSelecti ...

javascriptjqueryhtmlangularjs

Is there a method to retrieve all Class elements without using a for-loop?

I am trying to retrieve all elements with a specific class using document.getElementsByClassName(); <body> <div class="circle" id="red"></div> <div class="circle" id="blue"></div> <div class="circle" id="yell ...

javascripthtmlcssloopsdom

The Disabled element does not exhibit effective styling

When we include the disabled attribute in the text element, the style does not work. Can you explain why? <input pInputText [style]="{'padding-bottom':'10px','padding-top':'10px','width':'100%&apos ...

htmlcssangularinternet-explorertypescript

When moving to a different page, PHP seems to have a problem keeping the session values in place

As I work on my PHP application, I encounter an issue with maintaining session values. In this scenario, I have two files: 'sidebar.php' and 'home.php'. The sidebar is included on the home page, and it contains login controls. Logging i ...

phphtmlsession

Add to the end just before the final element when generating dynamically

var creatediv = document.createElement("div"); var text1 = '<input id="attribute1" type="text" placeholder="Attribute" /> $(creatediv).append(text1); var text3 = '<input id="attribute3" type="text" placeholder="Attribu ...

jqueryhtml

Prevent JavaScript from being entered into the form

I'm currently developing an "HTML editor" for one of my webpages. Right now, I want to ensure that the editor only allows input of HTML and CSS elements without any Javascript (or Jquery). I've been attempting to prevent the use of <script> ...

javascriptphpjqueryhtml

What is the best way to create a div that extends beyond the borders of the screen, but still allows only

I am currently working on a React project for a website. I am creating a category bar that should slide only the component in the mobile version, without moving the entire page. Check out the desired design here However, the current appearance is differe ...

javascripthtmlcssreactjsbootstrap-4

Unable to convert cursor to jpg format

I am facing an issue where I have a jpg file stored in the same folder as my styles.css, and I want to change the cursor on a webpage to this particular jpg file. Despite my efforts, it seems like the cursor is not changing as expected. Currently, I am us ...

htmlcss

What is the best way to enlarge a Material UI card?

Currently, I am utilizing Material UI version 4 on my website and integrating cards (for more details, click here). https://i.stack.imgur.com/dm2M2.png I am interested in enlarging the overall size of the card so that the image appears larger. As I am si ...

cssreactjsmaterial-ui

Determine if offcanvas element is visible upon initialization in Bootstrap 5 Offcanvas

I have a search-filter offcanvas div for location and property type on this webpage: On larger screens (desktop), the offcanvas is always visible, but on smaller screens (mobile), it is hidden and can be toggled with a button. This functionality works per ...

javascripthtmlbootstrap-5

Refresh the html page periodically by utilizing ajax every X seconds

Recently, I came across a post discussing the topic of automatically refreshing an HTML table every few seconds. The post can be found here. Currently, I am working with Rails and I want to achieve a similar functionality. However, I specifically want to ...

javascriptjqueryhtmlruby-on-railsajax