If there is no floating image present, the header width should automatically adjust

<div class="info-content" style="display:none;">
  <div class="info-content-header clear">
      <h1 class="lg-grn-color">Connect To Your Security System</h1>
      <div><img src="/mobile/images/smb_fast.png"/> </div>
  </div>    
</div>
<style>
    .info-content .info-content-header h1 {
     float: left;
     font-weight: normal;

    }

    .info-content .info-content-header div{
     float:left;
     margin-left:2rem;
     width:30%;
    }
</style>

When the image div is removed, the header should expand to 100% width according to my CSS and HTML file.

htmlcss

Answer №1

If you float the h1 tag, it will only be as wide as its content. To ensure the header is always 100% width, place the image inside the header and float the image.

<div class="info-content" style="display:none;">
  <div class="info-content-header clear">
      <h1 class="lg-grn-color">Connect To Your Security System
          <img src="/mobile/images/smb_fast.png"/></h1>
  </div>    
</div>

.info-content .info-content-header h1 {
    font-weight: normal;
}

.info-content .info-content-header h1 img {
    float:left;
    margin-left:2rem;
    width:30%;
}

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 process to transform HTML elements into user-friendly HTML content?

I'm facing an issue with querying data from a markdown database and then using Marked.js to convert it back to HTML on the server. However, when I insert it into the DOM, it's displaying the content in a coded format like this: <h1 id="h1 ...

javascripthtmlnode.jsnpmmarkdown

How float elements can affect z-index through opacity

While troubleshooting the alignment of my floated images, I came across an unexpected issue related to opacity: http://jsfiddle.net/tshwbnLo/ It appears that when an element has opacity, it does not adhere to the usual behavior and instead overlaps the f ...

htmlcsscss-floatopacity

What is the best way to assign classes to dynamically generated elements within a loop?

I have used a loop to create multiple components <li v-for="card in cardID" :key="card"> <app-profile class="profile" :id="cardID[i++]"></app-profile> </li> My goal is to wrap all these c ...

javascripthtmlcssvue.js

Changing the position of sortable divs dynamically with Jquery

Is there a way to dynamically change the position of sortable divs at runtime? Below is my HTML code: <div id="sortable2" class="connectedSortable"> <div id="div1" class="ui-state-highlight">Item 1</div> <div id="div2" class=" ...

jqueryhtmlcss

The sidebar on the right side of the screen is content to relax beneath my

The positioning of my sidebar is currently below the content on the left side of the page, but I want it to sit beside the content on the right side. I've tried various solutions from similar questions without success. Here is an example of how I woul ...

csshtmlcss-floatsidebar

Ensuring that the two columns in a responsive grid have equal heights is essential for maintaining a

I am currently working on a responsive website with a main content area (.content-wrapper) and a sidebar area (.search-listing). My goal is to make sure that both columns have the same height. I attempted to achieve this using the following jQuery code: j ...

jqueryhtmlcss

differences in the way web pages are displayed in Microsoft Edge and Internet Explorer when compared to

I can't wrap my head around the issue I'm currently facing: it seems that MS Edge and Internet Explorer display things at a similar size to other browsers only when the user's zoom level is set to 150% (not 100%). Am I the only one experien ...

htmlcssinternet-explorermicrosoft-edge

Preventing JavaScript from refreshing the page when using location.replace for the second time with the identical URL

I've encountered an issue while using location.replace to reload a page that relies on GET variables for displaying a success message. The problem arises when the URL specified in the location.replace call is identical to the current one, causing the ...

phpjavascriptjqueryhtmlajax

Stop my ::after element from interfering with my select dropdown menu

Check out this JSFiddle I created to showcase my issue: JSFiddle I am currently working on a customized dropdown menu using an icomoon icon instead of a V. While the design looks great, the ::after pseudo-element for the parent container is causing issues ...

htmlcssdrop-down-menu

What is the proper way to attach the form tag action value in an EJS template?

Does anyone know about this? I am currently testing some JavaScript code: function mem_join_next() { if (document.mem_join.email.value == "") { alert("please input your email ID"); document.mem_join.email.focus(); return; } documen ...

javascripthtmlnode.jsejs

Position a flash element adjacent to an input field

I'm struggling to properly align two elements together. Below is the HTML code: <input class='pretty-border' id='shareinput' value='afdsdasfdasfadsff' /> <span> <object classid="clsid:d27cdb6e-ae6-11c ...

htmlcss

Pressing the follow button does not save data in the database

Whenever I click on a follow button, it should store followerid and followingid in the follow table and change to an unfollow button. If I then click on the unfollow button, those entries should be deleted from the follow table. I have used JQuery for this ...

phpjqueryhtml

Steps to avoid NuxtJS from merging all CSS files

Currently, I am working on a NuxtJS website that consists of two main pages: index.vue and blog.vue. Each page has its own external CSS file located in the assets directory, named after the respective vue file (index.css and blog.css). However, during test ...

cssvue.jsvitenuxtjs3

Accessing the text content of the clicked element using vanilla JavaScript

Retrieve an item from the dropdown list and insert it into a button's value. function updateButton() { document.getElementById("ul").classList.toggle("show"); } var dropdown = document.getElementById('ul'); var items = ["HTML", "CSS", "Ja ...

javascripthtmlcss

The 'order' property in the bootsrap 4 grid is malfunctioning on Safari IOS and not producing the desired outcome

I have encountered an issue where this code performs perfectly on a Windows desktop, but when tested in Safari on iOS, the third column always collapses and jumps to a new line. Here is the code snippet causing the problem: <div class="container"> ...

ioscsssafaribootstrap-4

Do you wish to generate a chunk of text?

Is there a way for me to generate a basic block of content, like the "Unrest in the Middle East" section found on The Economist? I would be extremely grateful for any assistance. ...

phphtmlcssdrupaldrupal-blocks

Stop the selection of text within rt tags (furigana)

I love incorporating ruby annotation to include furigana above Japanese characters: <ruby><rb>漢</rb><rt>かん</rt></ruby><ruby><rb>字</rb><rt>じ</rt></ruby> However, when attemp ...

javascriptcssruby-characters

How come my button is overflowing the container on Chrome?

I have adjusted a div to be 78% of the viewport height (78vh). Since there are 13 buttons, each button is set to be 6% of the viewport height (6vh) so that all 13 buttons should fit within the parent container size of 78vh. In Firefox, everything appears c ...

htmlcssgoogle-chromeviewport-units

Using Google Fonts with AMP and Ruby on Rails: A Challenging Task

I am currently in the process of implementing AMP pages on my Rails application. Unfortunately, I am facing difficulties with getting my font to display correctly. The Google Search Console is returning the following error message: "CSS syntax error in th ...

htmlcssruby-on-railsamp-htmlgoogle-fonts

Tips for Bridging the Space in a Horizontal Bootstrap Card

I'm in the process of designing a website that features a horizontal bootstrap card. I'm trying to figure out how to make the image on the left side of the card fill the full height of that section. Here's the code I'm working with: & ...

htmlcssbootstrap-4