Prevent overlapping of text divs

I am facing an issue where two divs with text are supposed to sit below each other and adjust automatically to the height of the text. However, they are overlapping as if the text is ignoring the div structure. Here is my current setup:

https://i.sstatic.net/rts4N.png

This is my HTML code:

<div class="one_half_left"> 
   <div class="text1">Text</div>
   <div class="text2">XYZ</div>
</div>

And this is my CSS code:

.one_half_left { 
    margin: 40px 0 0px 40px; 
    float:left; 
    width:44%;
}

.text1{ 
    font-family:'NimbusSans', Helvetica, Arial; 
    text-transform:uppercase; 
    font-weight:800;    
    font-size:90px;
    color:#948e7d;
    min-height: 90px;
}

.text2{ 
    font-family:'NGBEC', Helvetica, Arial; 
    text-transform:uppercase; 
    font-weight:800;    
    font-size:140px;
    margin: 0 0 110px 0;
    color:#305d0b;
    min-height: 140px;
}

Any ideas on how I can resolve this problem would be greatly appreciated. Thank you in advance!

htmlcss

Answer №1

It seems like the issue may be related to your screen resolution or not viewing in fullscreen mode. Switching to a different browser could potentially resolve this.

Alternatively:

To keep the formatting consistent without adjusting CSS, I would recommend inserting a few <br> tags between the two divs.

Your updated code should now look like this:

<div class="one_half_left">
    <div class="text1">Text</div>
    <br>
    <br>
    <br>
    <div class="text2">XYZ</div>
</div>

Keep the CSS as is.

Answer №2

Make sure to include clear:both; in both the one_half_left and text classes:

.one_half_left { 
    margin: 40px 0 0px 40px; 
    float:left; 
    width:44%;
}

.text1{ 
    font-family:'NimbusSans', Helvetica, Arial; 
    text-transform:uppercase; 
    font-weight:800;    
    font-size:90px;
    color:#948e7d;
    min-height: 90px;
    ***clear:both;***
}

.text2{ 
    font-family:'NGBEC', Helvetica, Arial; 
    text-transform:uppercase; 
    font-weight:800;    
    font-size:140px;
    margin: 0 0 110px 0;
    color:#305d0b;
    min-height: 140px;
    ***clear:both;***
}

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 methods can be utilized to ensure that my wistia video player/playlist is responsive on different devices

I need some assistance with making my Wistia player responsive while using a playlist. I want the video player to adjust its size based on the screen size. Here is an example: My current code utilizes their iframe implementation: <div id="wistia_1n649 ...

javascriptjquerycsshtml5-videovideo-player

What is the best way to ensure my footer remains at the bottom of the page even when scrolled?

I'm struggling to get my footer to stay at the bottom of a page that requires scrolling. The code I have only seems to work on pages without scrolling, causing the footer to display in the middle of the page instead of at the bottom where it belongs. ...

htmlcss

Obtain the URL of the chosen file from the input file in an HTML/AngularJS framework

Currently, I am developing a web app in MVC-5 using AngularJS. Below is the structure of the div that I am working on: <div class="row form-clearify" style="margin-top:3px;"> <div class="col-md-6 col-sm-6 col-xs-12" style="background-color:w ...

jqueryhtmlangularjsfile

Reposition text below images in Meta Slider

I have a website where I am utilizing Meta Slider within Wordpress. I would like to position the captions below the images instead of on top of them. Meta Slider claims this feature is only available in the Pro version, but could it be achieved by adjustin ...

css

The alignment of my divs is all out of whack -

Currently, I have styled my website to work perfectly in Firefox, but it's not appearing correctly in Chrome. You can see the layout at . My goal is to maintain the layout as seen in Firefox while also making sure it displays properly in Chrome and IE ...

csshtml

Words displayed on top of a background featuring sql and php

How can I position my result text field on top of the image? https://i.sstatic.net/1BCc7.png This is the code I wrote: > echo "<img id='image' src='http://i.imgur.com/qqzaa4N.png'></a> <p id='text'>€ ...

phphtml

How can I access a nested FormArray in Angular?

I have a situation where I am trying to access the second FormArray inside another FormArray. Here is an excerpt from my component: registrationForm = new FormGroup({ registrations: new FormArray([this.patchRegistrationValues()]) }); patchRegistrati ...

javascripthtmlcssangulartypescript

Seeking a window-adjustable table with stationary headers

I have been searching high and low for a solution to my issue but have come up empty-handed. My goal is to create a table with fixed headers that remain visible while scrolling through the rest of the table. The catch is, I also need it to align properly w ...

javascriptjquerycsshtml-tablefixed-header-tables

Can a dropdown menu be incorporated into a list-group class div element?

I am currently using a list as a navigation menu for a page. My goal is to add dropdown options for quick-links and social-media. I really like the design of the list as a navigation menu. <div class="headBlock"> <h1>G A L L E ...

htmlcsstwitter-bootstrap

PHP persistent forms dropdowns and checkbox selection

I am currently working on a PHP form and I am facing an issue with the drop-down boxes and checkboxes. I want them to stay filled even if I don't select something, maintaining the previously entered details while leaving the unfilled parts empty. I ha ...

phphtmlcssformssticky

Hide and reveal images on hover by using multiple images or links on a single webpage

Despite my efforts, I haven't been able to find exactly what I'm looking for. My current setup involves an image/content slider powered by Awkward Showcase. Within each slide, I want to incorporate a mouse-in/mouse-out effect that switches and hi ...

javascriptjquerycssslider

Error: Wordpress is unable to load styles due to a failed request for resources. The server returned a 404 status code, indicating that the requested file was not found

I'm currently in the process of transforming a static HTML website into a WordPress site. However, I've hit a roadblock right at the beginning while attempting to load all my styles from the css folder in my function.php. <?php // Loading st ...

phphtmlcsswordpress

PHP combined with jQTouch

I have a form on an HTML page that is passed to a PHP script. The PHP works fine, but I am facing some issues in displaying the HTML content on the PHP page. When I use <?php echo $message; ?> in the body of the HTML, the variable displays properly. ...

phphtmlformssession-variablesjqtouch

How can we display the Recent Updates from our LinkedIn profile on our website using iframe or javascript?

Currently, I am in the process of developing a .NET web application for our company's website. We already maintain an active LinkedIn profile where we regularly post updates. https://i.stack.imgur.com/T2ziX.png My main query at this point is whether ...

javascripthtmliframelinkedin-api

Reduce multiple paragraphs in PHP to a more concise form

Is there a way to trim paragraph content to 100 characters, especially when dealing with multiple paragraphs? For example, consider the following HTML snippet: <div class="div-1"> <div class="section-1"> <p>"Lorem ipsum ...

phphtmlcss

Queueing up file downloads through a web browser

When trying to download multiple files from a server, I am required to queue them up instead of downloading in parallel. Unfortunately, I do not have access to the download server, so my only option is to work with the browser. Is there an API available t ...

javascripthtmlgoogle-chromebrowserdom-events

Anticipated scenarios when using selenium

How can I verify the presence of a br tag in HTML using expected conditions? Below is the snippet of HTML code: <br> <a href="member.php?u=12455" rel="nofollow">Smatta</a> <a>, </a> <a href="member.php?u=14305" rel="nofoll ...

pythonhtmlseleniumselenium-webdriverweb-scraping

The Cyrillic text displays uniquely across three different web browsers

On our company's website, I implemented a search function. You can input the minimum and maximum cc of the glass you're looking for, and it will filter the database to display relevant results. The issue I'm facing is that when viewing the r ...

phphtmlcyrillic

How can you effectively load shared header and panel HTML onto pages located in separate directories using jQuery Mobile?

I am currently developing a multi-page application utilizing jQuery Mobile and incorporating loadPage() to retrieve various pages. The overall structure is outlined below. landing.html /app-pages/page1.html /app-pages/page2.html /app-pages/page3.html ...

javascriptjqueryhtmljquery-mobilejquery-mobile-ajax

Methods for smoothly animating an image to move up and down using CSS

I'm new to CSS and I was wondering if it's possible to create a smooth vertical movement effect for an image using CSS. Something like shown in this link: .... ...

htmlcss