Positioning of textarea in CSS

As a CSS beginner, I am struggling to position the textarea on the right and the map on the left without the box covering the map. Here is the CSS I currently have:

#CoordData {
    font-family: Arial, Helvetica, sans-serif;
    font-size: .9em;
   // position: absolute;
    left: 10px;
    right: 10px;
}
 #wrapper { 
                    position: absolute; 
                    left: 400px; 
                   // right: 10px; 
                    top: 10px; 
                    bottom: 10px; 
                } 
.Button {
    font-family: Arial, Helvetica, sans-serif;
    font-size: .6em;
  //  position: absolute;
    left: 200px;
    // right: 10px;
}

If anyone could offer some assistance, I would greatly appreciate it.

For reference, here is my code and you can view it in full screen here.

Answer №1

If you want to modify your jsfiddle, simply adjust the position of your wrapper like this:

Try changing the absolute positioning of your #wrapper as shown below:

 #wrapper { 
                position: absolute; 
                //left: 400px; 
                right: 20%; 
                top: 1px; 
                bottom: 10px; 
            } 

Answer №2

To align elements in a webpage, you can utilize the .pull-left and .pull-right classes from the Twitter Bootstrap UI framework. Additionally, the bootstrap framework offers a grid system with 12 columns, allowing you to allocate 6 columns for a map and 6 columns for text.

For more information on grids, you can visit: http://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp

If you want to learn about using the pull-left class, check out this resource:

I hope this information proves useful to you.

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

Seeking a solution for resizing the Facebook plugin comments (fb-comments) using Angular when the window is resized

Is it possible to dynamically resize a Facebook plugin comment based on the window or browser size? I want the fb-comment div to automatically adjust its size to match the parent element when the browser window is resized. <div id="socialDiv" class="c ...

The website content is not visible on Internet Explorer version 10

Issue with Internet Explorer 10 I recently completed a new website for our company: . However, I am encountering some challenges with the site when viewed on IE 10 on Windows 7. For some reason, a large portion of the text is not displaying properly in IE ...

Adjust the pagination page size based on the value in the Angular scope dynamically

My goal is to provide the user with the ability to adjust the number of rows displayed in a table. This feature is crucial for our web app, as it needs to be accessible on various devices and should allow users to customize their viewing experience to redu ...

Tips for aligning the list style icon perfectly with the text

I need help aligning text in the center of a customer list style image for an LI element. I've attempted using margins and paddings, but it hasn't worked. Here's the code and screenshot: HTML: <ul class="homeList"> <li>Over ...

Unable to make a POST request using axios

I'm having trouble populating a table using vue.js and axios in my visual studio project. Every time I run the solution, I see an empty table with just the heading Title. I experimented with another POST request method but unfortunately, it didn&apos ...

Seamless Gradient Transition Effect on SVG Hover

I am facing an issue with the transition of a linear gradient in an SVG hover effect. The gradient itself is working fine, but I'm struggling to apply a smooth transition to my path. PS: I would like to achieve this effect using only one path, withou ...

Issue with PHP Form data not syncing with MySQL Database

I have been attempting to create a form and upload it into my database, but unfortunately, it is not functioning properly. Here is the HTML code I am using: <form name="Form-Request" method="post" action ="icn/form.php"> <div> ...

Make sure to include the !important declaration when setting the fill property for

When attempting to apply !important to the fill property of an SVG file, I'm encountering issues with the syntax. Despite my efforts, the !important directive is not being correctly applied to the fill property, resulting in the circle element renderi ...

Use JavaScript to convert only the initial letter to uppercase

Once again, I am in the process of learning! Apologies for the simple questions, but learning is key... Attempting to implement a trick I found online to change all letters to uppercase, I am now trying to adjust it to only capitalize the first letters. T ...

How to strip HTML tags from a string in PHP while still showing them?

Let's explore the functionality of strip_tags(). strip_tags("<b>TEXT</b>"); The result will be: TEXT But what if I want to keep the tags visible without their effect? The output would look like this: <b>TEXT</b> Is i ...

Utilizing CSS for customizing selectors in a Moodle form

In my Moodle 3.0 form (using formlib.php in Moodle), I have created a selector that I would like to customize with different colors. Here is an example of the selector code: $mform->addElement('header', 'ChartOptions', get_string(&a ...

Conceal Tooltips with Materialize CSS

I'm trying to figure out how to hide the tooltip that appears when hovering over this element using Materialize CSS. <li><a class="btn-floating green" onclick="window.print();return false;"><i class="material-icons tooltipped" data-pos ...

What is the best way to stop event bubbling in react-router-dom when using the <Link> component?

Hey there! I have a situation that I need help with. I tried putting the Link around the whole post so that I could prevent bubbling for individual buttons, but for some reason stopPropagation() is not working as intended. Following advice from another s ...

Disable reloading when submitting and reset input fields after submission

I am working on developing a website where users can post things and comments without the need to refresh the page. I have encountered some issues while implementing this feature and need some assistance with it. My goal is to allow users to submit comment ...

JavaScript is currently only being applied to sort the first table

I am having an issue with sorting three tables on my page based on a value (year in this case). <table id="table1"> <tr> <th>Name</th> <th>Surname</th> <th>Year</th> </tr> <tr> ...

Creating a sticky footer with an additional element using CSS

As I work on building my own website for showcasing my art portfolio, I came across a helpful resource at . However, I am facing some challenges when trying to incorporate an additional element into it. The current HTML structure looks like this: <htm ...

What is the best way to reset the size of an element in webkit back to its original dimensions?

I am having an issue with an element that changes to display absolute and covers its parent element on focus via javascript. However, when it goes back to its default state on blur, it does not return to its original position. This problem seems to only o ...

Issue with modal window not displaying upon click

I am currently navigating my way through Bootstrap and jQuery as a newbie, attempting to incorporate a modal window into my sales website. To visualize how it would appear in my project, I took the modal code from https://getbootstrap.com/docs/4.3/componen ...

The hamburger menu appears to be missing when viewing in Safari, while it functions properly on both Chrome and Firefox browsers

My website has a responsive menu that functions perfectly in Chrome and Firefox, but encounters issues in Safari on mobile devices. The site is built using Elementor WordPress and I believe adding some -webkit- properties could solve the problem, but I&apo ...

Consolidate all CSS links into a single line

Within my HTML document, I currently have the following CSS links: myPage.html <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family ...