Is it possible to line up two divs perfectly?

Hey there, I'm still trying to get the hang of CSS and using Dreamweaver CS6's fluid grid layout. In my attempt to create a header with two divs inside it - headerleft for an image and headerright for text - I've run into some alignment issues. My main goal is to keep the text in line with the center of the image even when resizing due to the fluid layout.

I thought placing the headers within a container div would help me align them easily, but I'm struggling to make it work. Here's the code snippet I currently have for this part of the page:

EDIT: Updated Code (still not working):

.gridContainer {
    margin-left: auto;
    margin-right: auto;
    width: 90.5666%;
    padding-left: 0.2166%;
    padding-right: 0.2166%;
}
#headercontainer {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
    font-family: Arial, Helvetica, sans-serif;
    color: #FFF;
    text-align: left;
}
#headerleft {
    clear: both;
    float: left;
    margin-left: 0;
    width: 49.7607%;
}
#headerright {
    clear: none;
    margin-left: 0.4784%;
    width: 49.7607%;        
}

Here's how the HTML looks:

<div class="gridContainer clearfix">
  <div id="headercontainer">
    <div id="headerright">
      <h2>Support For All Your Gadgets &amp; Tech!</h2>
    </div>
    <div id="headerleft"><h2><img src="images/logo2.png" alt="alt" longdesc="desc"></h2>
    </div>
  </div>

Any suggestions or assistance would be greatly appreciated. Thank you!

Answer №1

Try removing the display:block; property from both your #headerleft and #headerright elements.

In addition, make sure to only apply the float:left; style to the headerleft id, and ensure that the headerright div appears before the left one in your HTML structure.

Answer №2

Here is a code snippet for you to try:

.gridContainer {
    margin-left: auto;
    margin-right: auto;
    width: auto;
    padding-left: 15px;
    padding-right: 15px;
}
#headercontainer {
    float: left;
    margin-left: 0;
    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
    color: #FFF;
    text-align: left;
    position:relative;
}
#headerleft {
    float: left;
    margin-left: 0;
    width: 50%;
}
#headerright {
    clear: none;
    margin-left: 50%;     
}


<div class="gridContainer clearfix">
  <div id="headercontainer">

    <div id="headerleft"><h2><img src="images/logo2.png" alt="alt" longdesc="desc"></h2>
    </div>
    <div id="headerright">
      <h2>Support For All Your Gadgets &amp; Tech!</h2>
    </div>
  </div>
</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

What is the best way to incorporate a unique font with special effects on a website?

Is there a way to achieve an Outer Glow effect for a non-standard font like Titillium on a website, even if not everyone has the font installed on their computer? I'm open to using Javascript (including jQuery) and CSS3 to achieve this effect. Any sug ...

Considering the development of a web application similar to Canva

I'm interested in creating an app similar to Canva, but I'm not sure where to begin. I have a solid understanding of HTML and CSS, but my JavaScript skills are basic. I'm curious about the technologies they use. Is there a way to save HTM ...

Embed a static label inside an input field that remains constant even while text is inputted, without using a placeholder. Crafted using HTML,

Take a look at the screenshot below - what you see on the left side is my current setup, while on the right side is the desired outcome achieved without any plugins or HTML5 attributes The left side scenario occurs when I have 2 input fields - one with th ...

Explore the functions of jQuery's .css() method and the implementation of

Could use some assistance with the .css() method in jQuery. Currently working on a mouseover css menu, and encountering an issue when trying to include this code: $(this).siblings().css({backgroundColor:"#eee"}); at the end of my script. It seems to int ...

Refresh the block's content seamlessly without the need for a page reload

Within the index.html page There exists a block called content that contains various content blocks. An additional navigation menu with numerous links is present. It is important that when you click on a menu link, the content within the content block re ...

How can I ensure that the height of my dropdown menu covers the entire screen without being limited by the page height

I'm trying to adjust a dropdown menu so that it fits perfectly within the screen size, covering the entire height without showing any content beneath or below it. Currently, the menu covers the screen on some pages but scrolls and appears too large du ...

The function of slidetoggle is malfunctioning when clicked

I currently have two dynamic containers with one displaying grouped boxes, quantities, and totals, while the other shows detailed information. Both container values are added dynamically at runtime. By default, the grouping container is displayed on the p ...

Creating a modal using JavaScript and CSS

When I click on the hello (plane geometry) as shown in the figure, a popup appears on the extreme left of the screen instead of appearing on the plane geometry box. Can someone please help me fix this issue? I have also included the code below: https://i. ...

Is there a way to grab code from a different HTML page using JavaScript and jQuery when the user clicks on something?

After testing various codes for the intended purpose mentioned in the title, I have observed a peculiar behavior. The code from settings.html appears briefly and then disappears rapidly. Javascript: function load() { $("#paste").load("settings.html") ...

Avoiding uib-popover from getting clipped by uib-carousel

I have a small widget with a popover that works fine when placed inside a div, but gets clipped when inserted into a carousel. Here's an example to illustrate what I mean: (The top image shows the widget in a div without clipping) https://i.sstatic. ...

Activating events with Jquery

Can anyone help me with this HTML and jQuery issue I'm facing? When I click on an image for the first time (when it has the class 'hide'), the first jQuery click function is executed. However, when I click on the image again, the second func ...

Exploring the functionality of CSS class selectors (.class-name) when used alongside CSS tag selectors (div, etc...)

I have designed my website with three distinct tables, each requiring unique styling. The general approach I take to apply styling to these tables is as follows: import './gameview.css' <div className="game-results"> <h ...

Having trouble with the JQuery scrollTop animation? Getting the error message "Cannot read property 'top' of undefined"?

I am having trouble with my jquery animation scrollTop function. Whenever I click on <a>, it takes me to the anchor without any animation. Can someone please provide a solution for this issue? Upon running the webpage, I encountered an error message ...

How to easily remove margin in a Bootstrap alert component

I'm having difficulty removing margins within a bootstrap alert component and I can't figure out why! https://codepen.io/weellydooh/pen/MWKKoqg <div class="alert alert-primary" role="alert"> <p>A simple primary alert—check it ...

Implementing jQuery in ASP.NET code-behind files

I am new to asp.net and trying to learn by experimenting with rendering aspx in only specific parts. I was able to make it work, but encountered an issue when trying to create a button, textbox, and label where the label would display the text from the tex ...

Is utilizing the bootstrap grid system to create nested rows a viable option?

Looking to feature 1 larger image alongside 4 smaller images in a 2x2 layout: I initially considered placing everything in one row, then dividing into two columns. In the second column, I would create two rows with two columns each to achieve the desired ...

Embed an external website within a div element

Is there a way to embed an entire external website onto another site, without scroll bars or borders? I attempted this method but the entire page did not load, and there were still scroll bars and borders present. <!DOCTYPE HTML> <html> <b ...

The CSS dropdown navigation bar designed for mobile devices functions properly, however, it is not visible on iPhones

After building this website from scratch using only HTML and CSS, I encountered an issue with the dropdown menu not appearing on iPhones. Despite testing it extensively across different browsers and devices, the problem persists on Apple products. While i ...

Tips for triggering animation only when the element is in the viewport

I'm currently developing in React and facing a challenge where I need to trigger a fade animation for an element only when it becomes visible on the screen. The issue is that right now, the animation plays as soon as the page loads, which defeats the ...

What are the methods for differentiating between a deliberate user click and a click triggered by JavaScript?

Social media platforms like Facebook and Twitter offer buttons such as Like and Follow to allow users to easily engage with content. For example, on Mashable.com, there is a Follow button that, when clicked, automatically makes the user follow Mashable&ap ...