Tips for displaying two div elements side by side on the same line

Two div elements are structured like this:

<div class="pdetails">

    <div class="contact_details">
    text
    </div>

    <div class="clear"></div>

    <div id="contact_area_form_" class="tform_wrapper">
    text
    </div>

    </div>

The parent div is pdetails and it contains two child divs (contact_details, tform_wrapper). The issue I'm facing is that the contact_details div appears at the top while the tform_wrapper div displays at the bottom.

How can I align these two divs on the same line?

CSS code:

.tform_wrapper {
    float: left !important;
    padding-top: 10px;
    width: 510px;
}

.pdetails {
    color: #000000;
    font-family: tahoma;
    font-size: 12px;
    line-height: 18px;
    margin-top: 20px;
    min-height: 360px;
    text-align: justify;
}

.contact_details {
    float: right;
}
htmlcss

Answer №1

Get rid of any divs with the "clear" class, or simply hide them by setting display:none.

<div class="pdetails">
    <div class="contact_details"> text </div>
    <div id="contact_area_form_" class="tform_wrapper"> text </div>
</div>

Alternatively, you can specify the width using a percentage value.

.tform_wrapper {
    float: left !important;
    padding-top: 10px;
    width: 80%;
}

Answer №2

In my experience, these elements appear in a single line unless the window size is too small to accommodate both of them. In that case, they will be displayed vertically. To prevent this issue, you could assign a fixed width to the parent div. This way, if the window size is too small, a scrollbar will appear instead.

Answer №3

If I were to design this, it would look something like this: http://jsfiddle.net/Ewyzt/

The "clear" property in between the elements prevents them from stacking on the same line and pushes the following box down. To ensure proper layout, you should clear after the last box so that you can build below the first two boxes without any floating issues.

.tform_wrapper {
padding-top: 10px;
width: 510px;
background: red;

}

.pdetails {
color: #000000;
font-family: tahoma;
font-size: 12px;
line-height: 18px;
margin-top: 20px;
min-height: 360px;
text-align: justify;

}

.contact_details {
float:left;

}

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

Why is the event handler producing no value?

Imagine if I tried to attach a jQuery click event handler to one of the functions in my objects, but for some reason it keeps returning undefined on my properties. Why is this happening? var buttonView = { label : 'underscore', ...

javascripthtmljquerydomjquery-events

The dropdown list is nowhere to be found in the page source when using Selenium

Currently, I am engaged in web scraping using Selenium. Successfully locating the input box and entering ID numbers is no issue. Yet, a roadblock presents itself - there is no submit button linked to the search bar. Once the numbers are inputted, the box a ...

pythonhtmlseleniumweb-scrapingmicrosoft-edge

Prevent incomplete date input in Html5 date input field

Is it possible to make an input type="date" field, which is not required, treat partially completed dates entered by the user (e.g. month and day without year) as invalid rather than silently accepting them? I would like to alert the user in this scenari ...

angularjshtmltwitter-bootstrap-3

Two servers, each with its own designated form, and a singular database

Hello, I'm managing two servers. One of them has a form and MySQL database where I input data. The other server only includes a form where I want the data filled in to be sent securely to the first server's database. What is the best method for i ...

javascriptphphtmljsonajax

Challenge of Bootstrap 5 navigation bar not collapsing

Issue with responsive navigation bar not collapsing All necessary libraries already included <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent"> <ul class="navbar-nav mb-2 mb-lg-0&qu ...

htmlcssbootstrap-4navbar

Utilizing values from .properties files in Java with Spring for internationalization: A straightforward approach to handle Strings

Here is the code snippet I am using: @Value("${app.user.root}") private String userRoot; This code helps me to fetch a constant value from my application.properties file. Within my GetMapping method, I need to redirect to the error page and pass a S ...

javahtmlspringspring-mvc

The functionality of the code in a stack snippet may differ from that in a standalone HTML file

My code works perfectly on a stack snippet, but when I insert it into my server or an .html file, the refresh button shrinks! I have copied and pasted the code exactly as it is. Are there any specific snippet features that need to be added for it to work, ...

javascriptjqueryhtmljquery-bootgrid

Ways to get rid of the white horizontal line generated by bootstrap framework?

I'm currently working on a responsive navbar design and I want it to appear transparent over a background image. However, my front-end knowledge is limited as I've only been learning for a week. Can anyone advise me on how to remove the white bar ...

htmlcsstwitter-bootstrapbootstrap-5

Updating the font style in MUI with React 18

I attempted to create a new theme in order to replace the default font family of MUI but unfortunately, it was not successful. This is what my theme component looks like: import { createTheme } from "@mui/material/styles"; const theme = createT ...

cssreactjsmaterial-uifont-family

Issue with scrolling to the bottom of collapsed sections in Bootstrap

I have a bootstrap collapse panel and I've added a toggle link at the bottom to allow users to expand and collapse the content with a click. The Issue My problem arises when the menu expands, causing it to scroll all the way to the bottom of the pag ...

javascriptjqueryhtmlcsstwitter-bootstrap

Is there a way to change HTML retrieved from an AJAX request before inserting it into the document?

I am utilizing an ajax call to retrieve an HTML page from the server; the ajax call is structured as follows: function loadHtml() { $.ajax({ type : 'GET', async : false, url : &apos ...

javascriptjqueryhtmlajax

What is the best way to create this design with solely CSS, HTML, and Bootstrap (complete with check icon)?

I am eager to create this specific layout using only CSS, HTML, and Bootstrap. https://i.sstatic.net/ceyIv.png The green circle should contain a check mark symbol (although I couldn't manage to draw it in Paint). Pay attention to the text inside the ...

htmlcssbootstrap-4

Enable hyperlink to open in a new browser tab after user clicks on button embedded inside an iFrame

<head> </head> <div> <iframe src="https://....."></iframe> </div> https://i.sstatic.net/dk21i.png I'm looking for a way to open the link in a new tab when clicking on this button. Currently, the page loads wi ...

javascripthtmlvue.js

How to customize CSS based on the specific Django app you are using

I am new to Django and currently customizing the admin section. I want to change the CSS based on the app I am working with. Is this possible? I've noticed that the system uses the CSS from the first static folder it finds. Is there a workaround for t ...

cssdjangodjango-admindjango-apps

Issue with changing the opacity of a Javascript button style is not functioning correctly

The button's opacity used to change gradually in increments of 0.1 every 500 milliseconds, but now it instantly changes to 0.9 without the delay. Issue: Despite being placed within a window load handler and all elements loading properly, the loop is ...

javascriptcsshtml

Extracting a parameter from a URL using C#

Imagine having a URL such as http://google.com/index.php?first=asd&second=mnb&third=lkj What is the method to extract the second value (mnb) using C#? ...

c#htmlurlbrowser

When XML is accessed through an iframe, it is interpreted as HTML

In my endeavor to display an xml file within an HTML page using an iframe and altering the content through jQuery by manipulating the source attribute, I encountered a curious issue. When I viewed the xml file directly in my browser (Firefox/Chrome/IE8), i ...

javascriptjqueryhtmlxmliframe

CSS Tricks: Placing a Panel Just Off the Page Edge

Having difficulty adjusting a panel slightly off the page like this: click here for image Attempted using width: 120% While it does work, resizing causes the image to move from its original position. I want it to remain consistent on different screens. ...

htmlcssbootstrap-4bootstrap-grid

Is there a way to create a multi-page website simulation using jQuery?

My current project involves creating a single page website, but I am looking to give the illusion of a multi-page site by using CSS/jQuery to hide and reveal different sections when specific links in the navigation menu are clicked. Here is the code snipp ...

javascriptjqueryhtmlcss

Bootstrap is an outdated page template that lacks responsiveness

My code below features a page designed using Bootstrap HTML and CSS, but it doesn't look right on all devices. For example, on mobile devices, the grid appears zoomed in and unresponsive. I tried removing grid-template-columns: auto auto;, which fixed ...

htmlcssbootstrap-4