When a sibling div element contains only <a href> tags, the HTML div element does not create a new line

I am just starting to learn HTML and CSS.

In my first div, I want to display different elements, and in the second div, I would like to have text displayed over a background image. However, currently the text is appearing on top of the image. I want the text to be displayed first and then have the background image below it. How can I achieve this?

Below is the code I am using:

.navbar {
  width: 100%;
}

.nav-left {
  float: right;
  width: 25%;
  position: absolute;
  padding-top: 14px;
}

.feature {
  border: 2px solid black;
  padding: 25px;
  background: url(https://static3.depositphotos.com/1005590/206/i/950/depositphotos_2068887-stock-photo-lightbulb.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.navbar-Logo {
  float: right;
  color: #dd845a;
  text-decoration: none;
}
<div class="navbar">
  <div class="nav-left">
    <a class="navbar-Logo" href="#">LOGO</a>
  </div>
</div>
<div class="feature">
  <h1> Sample Text</h1>
  <p>Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text.</p>
  <p><a href="#">Engage Now</a></p>
</div>

htmlcss

Answer №1

It appears that you may need some clarification on the CSS you have implemented:

  • To correct the issue, remove the float properties and replace float:right with text-align: right in the .nav-left class.
  • Additionally, remove the position: absolute from the .nav-left class.

See the updated result below:

.navbar {
  width: 100%;
}

.nav-left {
  text-align: right;
  width: 25%;
  padding-top: 14px;
}

.feature {
  border: 2px solid black;
  padding: 25px;
  background: url(https://static3.depositphotos.com/1005590/206/i/950/depositphotos_2068887-stock-photo-lightbulb.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.navbar-Logo {
  color: #dd845a;
  text-decoration: none;
}
<div class="navbar">
  <div class="nav-left">
    <a class="navbar-Logo" href="#">LOGO</a>
  </div>
</div>
<div class="feature">
  <h1> Sample Text</h1>
  <p>Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text.</p>
  <p><a href="#">Engage Now</a></p>
</div>

By applying position: absolute to your .nav-bar element, it causes it to be taken out of the document flow and rendered on top of the next <div>. Using only float elements within a block can result in a height of 0 with elements overflowing and being rendered over subsequent elements in the document flow.

Answer №2

Revise your .navbar CSS code to the following:

.navbar {
    height: 120px;
}

Answer №3

It seems like your goal is to align your link in the navbar to the right, with the feature div positioned below it. The problem lies in the float property you're currently using, which removes the element from the flow of the document and causes other elements to shift to fill its space. A better approach would be to utilize flexbox with justify content set to flex end for achieving this layout. It's recommended to avoid using float unless absolutely necessary for a design.

Answer №4

<!DOCTYPE html>
<html>
<head>
<style>

.navbar
{
   width: 100%;
   border: 2px solid black;
   padding: 35px;
}
    
.nav-left {
  float: right;
  width: 25%;
  position: absolute;
  padding-top: 10px;
}
.feature {
  border: 2px solid black;
  padding: 25px;
  background: url(light_bulb.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.navbar-Logo {
    float:right;
  color: #dd845a;
  text-decoration: none;
}
</style>
</head>
<body>
<div class="navbar">
    <div class="nav-left">
        <a class="navbar-Logo" href="#">LOGO</a>
    </div>
</div>
<div class="feature">
    <h1> Unique Content</h1>
    <p>This is a unique sample content created for demonstration purposes.</p>
    <p><a href="#">Get Started Now</a></p>
</div>
</body>
</html>

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

Unable to link JavaScript to HTML file through script tag

Upon testing out a responsive nav bar, I encountered an issue with the JavaScript not connecting. Despite placing the script tag at the bottom of the body as recommended, it still fails to function. index.html <html lang="en"> <head> ...

javascripthtml

Activate CSS modules in ReactJS by incorporating a .module extension to the CSS file

Being new to ReactJS, I recently learned about enabling CSS modules and discovered the following: If you append .module to a class name, it will generate a base64 hash string for that class As an example, I created a function-based component called Lay ...

htmlcssreactjs

Having an issue with Local Storage returning undefined

I've been working on a form to input values and show the data on a different page after submission. Below is my form: <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" hr ...

javascripthtmlcss

At times, the CSS fails to load at first and does not refresh correctly when using F5 or CTRL F5, yet it occasionally loads when clicking on links

After dedicating a full day to trying to solve this issue, I am reaching out for some assistance. As a newcomer here, I apologize if this question has been asked before (I did search extensively and found nothing). The website I'm constructing for my ...

csscachinghtml-parsingloading

Text Parallax Effect

For my website, I am interested in incorporating a unique parallax effect. Instead of just fixing a background image and allowing scrolling over it, I want to apply this effect to all of the content on my site. The website consists of a single page with m ...

javascriptjqueryhtmlcssparallax

"Encountering difficulties in dynamically populating a dropdown menu with ng-options in Angular

In my web application, I have a table displaying user information. Below the table, there is an input box where users can enter the row index. Based on this row index, I am dynamically populating an object using ng-options. Here is a snapshot of the HTML ...

htmlangularjs

Ways to generate an element with a specific identifier using a single line of code

When creating an element, I often use the following syntax: var foo = document.createElement('div'); To set the ID of the div, I would typically do this: foo.setAttribute('id', 'divName'); After some searching online, I ca ...

javascriptjqueryhtmlcss

Discover how to reveal a hidden div tag upon hovering over a different div tag using CSS

I have a minor issue that I need help with. I want to achieve an effect where one div is displayed when another div is hovered over in CSS. Once the cursor is removed, the second div should be hidden again. How can I accomplish this? There is a second hid ...

htmlcss

"Setting a jQuery div to match the height of the window dynamically adjusts as content

I'm having trouble adjusting the height of my div to be equal to the window height minus the combined heights of the header and footer. I also want the contents inside the div to have a scroll bar if they exceed the specified height limit. While my cu ...

jqueryhtmlcss

Present fetched data from ajax in a tabular format

I'm working on an AJAX call that retrieves a JSON array from a PHP file. My goal is to populate the rows within the #gamesList table with this data. I already have the append function set up, but I'm struggling with iterating through the returne ...

phpjqueryhtmlajax

Can the ::before selector be used in HTML emails?

Hey there, I have a question that might sound silly but I'm having trouble finding an answer online. My issue is with styling the bullet point before a list item in an HTML email. All I want to do is change the bullet point to a square and give it a ...

htmlcssemail

Issues with jQuery animate.css functionality specifically occurring on Firefox browser

As a beginner in jQuery, I have been exploring different animations and recently came across an issue with Firefox compatibility. I discovered the animate.css library, and decided to incorporate its animations into text captions on a slider using the Soli ...

jqueryhtmlcssanimationwordpress

Is it achievable to remove the wrapper from elements using jQuery?

Is it possible to modify this markup without altering core files in the CMS? I have a particular structure that I would like to adjust using jQuery for a temporary solution. <div class="homepage-boxes"> <div class="row-fluid"> < ...

javascriptjqueryhtml

Flexbox that adjusts to any browser height, ensuring full responsiveness

I am exploring the world of flexbox with the goal of creating a responsive layout consisting of 3 items that adjust seamlessly to different devices such as smartphones, tablets, and desktop computers. The layout should stack the items on top of each other ...

htmlcssflexboxresponsive-design

Adding an audio event listener in HTML5

I am having trouble maintaining the limited loop functionality in my HTML5 audioplayer when I try to replace it with buttons and add event handlers to them. The repeat function only seems to work if the checkbox is checked and the second option of the se ...

javascripthtml

links to css and javascript

I am having trouble with what should be a simple task! On my webpage, I have this link: <a class='action' href='javascript:void(0)' OnClick='run()'> run </a> Along with the following CSS: .action { color: # ...

javascripthtmlcss

Attaching my CSS file to my Django Project

I am currently working on linking my CSS files to my Django Project but I seem to be encountering errors along the way. This is what my settings file looks like: STATICFILES_FINDERS = ( '/Users/IMAC/work3/Blog/Blog/polls/static', ' ...

cssdjango

the values being shown in a read-only text field

Here is a table structure displaying text inputs, total marks, and marks remaining: Marks Per Answer Total Marks Marks Remaining (blank text input) 4 4 (blank text input) 6 6 (blank di ...

phpjqueryhtml

Unexpected results from the match() function

Attempting to utilize the RegExp feature in Javascript (specifically with the match function) to locate instances of a sentence and a specific word within that sentence embedded in the HTML body. Provided is some pseudo-code for reference: <!DOCTYPE ...

javascripthtmlregexmatch

Looking to update the active state of the navbar in my one-page section by utilizing the Flat UI Bootstrap

I need the navigation bar to highlight the active link when scrolling to a section associated with that link on the page. Clicking on a link should also smoothly scroll to the corresponding section on the same page, rather than navigating to a different pa ...

jqueryhtmltwitter-bootstrap