Having trouble making my divs float in opposite directions - one left and the other right

Just getting started with HTML and CSS, I'm working through my Web Design courses and running into an issue on one of my pages. I want to float two divs side by side, with one floating left and the other floating right. However, no matter what I try, the first div won't float left and the second div ends up underneath it when floated right. It seems like such a simple thing, but I can't seem to figure out what's going wrong.

#services {
  float: left;
}
#contact {
  float: right;
  font-weight: bold;
  font-style: italic;
}
<main>
  <div id="services">
    <h2>Services</h2>

    <p>Lorem ipsum dolor sit amet, natoque pharetra... (content continues)

Any help would be greatly appreciated!

htmlcss

Answer №1

To align the two divs side by side, adjust the width of the first div (#services) to be less than 100% so that the second div can fit on the same row. Otherwise, the entire row will be taken up by the first div itself. These changes were made solely in the CSS file.
View the modified code here: https://jsfiddle.net/admL7ss3/

#services {
  float: left;
  width:50%;
  valign:top;
}
#contact {
  font-weight: bold;
  font-style: italic;
}
h2{
  margin-top:0px;  
}

Answer №2

To ensure proper alignment, it is essential to specify the width of each floated div so that their combined width adds up to 100%. To prevent excessive stretching, utilize the max-width property.

The floated div elements should not have margins but can be given padding. If employing the border property for any of them, remember to include box-sizing:border-box; to prevent layout issues. The demonstration below illustrates this concept:

#services{
  float:left;
  width:70%;
  margin:0;
  padding:10px;
  border:1px solid red;
  box-sizing:border-box;
}
#contact{
  float: right;
  font-weight: bold;
  font-style: italic;
  width:30%;
  margin:0;
  padding:10px;
  border:1px solid green;
  box-sizing:border-box;
}
<main>
           <div id="services">
                <h2>Services</h2>

                <p>Lorem ipsum dolor sit amet...</p>

                <ul>
                    <li>Item 1</li>
                    <li>Item 2</li>
                    <li>Item 3</li>
                    <li>Item 4</li>
                </ul>
            </div>


            <div id="contact">

                <h2>Contact Us</h2>

                <p>Contact Name<br>
                Line 1<br>
                Line 2<br>
                Post Code<br>
                <a id="mobile"...</a>
                <span id="desktop"...<br>
                <a href="mailto:...</a>
                </p><br>
            </div>
        </main>

Answer №3

The service and contact div should be positioned in a single row directly under the main area. Be sure to prioritize this arrangement before adjusting the float left or right attribute accordingly.

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

What is the best way to directly serve a static html file from a server using React and Express?

I recently downloaded a visually appealing HTML page with links to necessary CSS and JS files from a website builder. My intention is to use this page as the landing page for my React application. However, I'm unsure of the best approach to achieve th ...

htmlreactjsexpressreact-router

Issue with PHP and HTML Character Interactions

My variable looks like this: $name=' 18 " LCD TV '; When attempting to use it in an HTML input, the characters after the " do not display. Any suggestions on how to fix this issue? ...

phphtml

Designing a menu inspired by the layout of Google Plus

I am attempting to create a responsive menu that behaves similarly to the one on Google Plus. In this menu, main options are either added to or removed from the "more" dropdown as the window is resized. Here is the current appearance of my menu: Below is ...

javascriptjquerycssresponsive-design

What could be the reason for the empty space between the upper and middle cuts?

I am working on these two web pages: http://slacklog.heroku.com/ http://slacklog.heroku.com/signup/date As you can see, there is a gap between the top and middle images as well as the bottom and middle images on both pages. Below is my HTML code: <d ...

htmlcss

Using the val() function on a select element can occasionally result in a null value

Having an issue with my select. For some reason, when I use $(".test").val(), it sporadically returns null. Can't seem to figure out what's causing this inconsistency. console.log($('.test').val()); <script src="https://ajax.googl ...

javascriptjqueryhtmlselect

Scrolling vertically using window.open functionality

I am trying to open a pop-up window using window.open. I would like the scrollbars to appear only if necessary. Unfortunately, in Safari, the scrollbars do not show up unless I include scrollbars=1 in the code. However, this also causes horizontal scrollb ...

javascriptcsspopup

JS on-click function is not functioning

Here is the HTML code I have for my navigation menu: <nav role="navigation" class="nav"> <ul class="nav-items"> <li class="nav-item"> <a href="#" class="nav-link"><span>About Us</span></a> ...

javascriptjqueryhtmlcssonclick

Strange Behavior of HTML5 Audio Elements

I'm currently in the process of designing a shop website with a nostalgic Windows98 theme. On the product's page, I want to include a preview of audio. Here is the CSS code that I have used for the HTML5 audio element: audio::-webkit-media-contr ...

htmlcssaudio

Unleashing the full potential of Bootstrap 4: Expanding rows horizontally in a container

section, there seems to be an issue with the second div that displays the table headers. It is not stretching as much as the one above it, and both are contained within a container-fluid. I've experimented with using d-flex and flex-grow-1, but it app ...

htmlcssbootstrap-4

Tips for closing a sidecart by clicking outside of it

I am currently exploring how to implement the functionality of closing my sidecart when I click outside of it. Below is the script I am using: const toggler = document.getElementById('menu-toggle'); const cartWrapper = document.getElementById( ...

javascripthtmlcssbootstrap-4e-commerce

Resources for Vue.js stylesheets

Vue.js is my latest discovery and I have been experimenting with the single file component architecture. A small issue I encountered was that all of my components' styles were being loaded on the page, even if they weren't currently active. Is t ...

javascriptcssvue.js

What is the method to close the picker when using type="datetime-local"?

Currently, I am utilizing Vue with the "datetime-local" type for input. While I can successfully select the date and time, my goal is to have the picker close automatically after a selection has been made. I've experimented with adding an onchange ev ...

javascripthtmlvue.js

Having difficulty uploading files to my website [PHP]

I'm having trouble with a PHP tutorial I followed for uploading an image. Despite my best efforts, the upload always fails and I can't figure out why. I've rewritten the code multiple times but the problem persists. The goal of this code is ...

phphtml

Unable to show inline form within a ul element

I had a ul list with regular text inside the li tag. When I attempted to show it inline, it worked perfectly. However, as soon as I replaced that text with a form, I could no longer get it to display inline. This was my HTML code: <ul class='tes ...

htmlcss

Generating a highchart visualizing a pie chart using data from a local JSON file (OBJECT)

This is the JSON data from my JSON file {"diskspace":100,"diskspace.free":50,"time":8,"time.played":2,"controllers":25,"controllers.used":3, "controllers.new":10, "controllers.broken":12} I want to represent this JSON data in various forms of pie cha ...

javascripthtmlangularjsjsonhighcharts

What are some methods for converting data from data tables into alternative formats?

I need assistance exporting data from data tables in various formats such as Copy, CSV, Excel, PDF, and Print. Can someone show me how to do this for the example provided below? <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.4 ...

jqueryhtml

Bootstrap 3.2 Toggle button refuses to collapse as expected

I'm having an issue with the mobile navigation on my Bootstrap website. Despite running version 3.2 and trying various solutions, the nav bar refuses to collapse. Strangely, other sites I've created using Bootstrap are working perfectly fine. Wha ...

jqueryhtmltwitter-bootstrap-3

Styling a Form Submission with CSS

I am currently working on a website that contains the following PHP code: echo "<form action='choice.php' method='post'>"; echo "<input type='submit' name='choice' value='left' /> "; As I am i ...

phpcsstwitter-bootstrap

How to match Slick Slider slide width with Bootstrap container width

Utilizing the slick slider from http://kenwheeler.github.io/slick/ to showcase 3 slides side by side with the center slide displayed in the middle. This website is built on Bootstrap 4 framework and I want the slides to have the same width as the Bootstra ...

javascriptjquerycssbootstrap-4slick.js

Does the XMLHttpRequests have a NavigationTiming interface that can be utilized?

While the window.performance object offers insights into the performance of the browser's last page load, such as DNS lookup times, I have not come across a similar feature for Ajax calls. The overarching issue I am aiming to address is the ability t ...

javascriptajaxhtmlgoogle-analyticsxmlhttprequest