Positioning a div element within an H2 heading

I am facing a problem where I need to insert a div inside an H2 Tag.

Do you think it's possible? I believe it should be, but I am unsure of how to accomplish it. Here is what I have attempted:

HTML

<h2 id="strap">Blah Blah & Some More Blah Blah Blah    
    <div class="section contain">            
        <a href="http://www.facebook.com/BlahBlah" rel="nofollow" target="_blank"><img alt="facebook" src="<%=SkinPath %>img/social/fb.png"/></a>
        <a href="http://twitter.com/BlahBlah" rel="nofollow" target="_blank"><img alt="twitter" src="<%=SkinPath %>img/social/tw.png"/></a>
        <a href="http://BlahBlah.wordpress.com/" rel="nofollow" target="_blank"><img alt="blog" src="<%=SkinPath %>img/social/wp.png"/></a>          
    </div>
</h2>

JSFIDDLE

I would like the div element (Social Icons) to appear on the same line. Are there any alternative methods to achieve this?

htmlcss

Answer №1

It is not valid to nest an h2 tag inside another h2 tag. Changing the inner h2 to a span will make it display inline.

For example: http://jsfiddle.net/nNuwT/2/

Answer №2

Example CODE SNIPPET

STYLING

.container
{
    display:inline;
}

Answer №3

Here is the solution that should meet your requirements,

Modified Fiddle

I hope this solves your issue.

#strap{
float:left;
line-height: 100%;
display:block;
width: 100%;
background: #dddddd;
 padding: 10px;
}
.section {
float:right;
display: inline-block;
}
.section span {
font-size: 18px;
margin-right: 5px;
display:block;
float: left;
}
.section img {
width: 40px;
height: 40px;
}

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

Learn the process of updating a specific section of a Facebook share link using AJAX dynamically

Here's an interesting scenario I'm dealing with. I'm trying to create a modification to the Facebook share button link where a portion of the link is replaced by a user ID number. This way, when someone clicks on the shared link, it will dir ...

javascripthtmlmysqlajaxfacebook

Locate a list item within an unordered list and proceed with a comparison

Looking for a way to target an li within a specific ul that has a data-rank higher than the others, and apply different styling to it in comparison to its sibling li. Is there a smart approach to achieve this using regular CSS or styled components? <ul ...

htmlcss

Ways to Halt Every Single CSS Animation

Is there a way to stop all CSS animations in a document from the beginning? My idea is to assign a class to elements containing CSS animations at the start, such as '.paused'. Then, using jQuery in my JavaScript, I would remove the '.paused& ...

jquerycssanimationcss-animations

Leverage JQuery's Range Slider for Real-Time CSS Value Updates

Trying to dynamically update CSS properties such as minmax(20vw), grid-gap, and height using individual range sliders: #wrapper { grid-template-columns: repeat(auto-fit, minmax(20vw, 1fr)); grid-gap: 20px; } #item { height: 150px; } Utilizing CSS grid a ...

javascriptjqueryhtmlcssrangeslider

Different position of navigation list-style visible in Chrome browser

Currently, I am working on a website where the main menu navigation is designed using the list-style property to separate each menu item. In Firefox, everything appears as intended with small circles between each menu item. However, when viewed in Chrome, ...

cssmenu

Arranging an Array by Two Distinct Characteristics

I currently have an array that is grouped and sorted based on the "Program" attribute, which is working well. However, I now need to sort by a different attribute (Deliverable) within each group. Is this possible? If so, how can I achieve it? Below is an ...

javascripthtmljqueryajax

Control the line height in DataTables

Is there a way to adjust the line height for a tr using either DataTables settings or CSS? I've attempted different methods, but nothing seems to change the line-height. https://i.sstatic.net/GwFaD.png Table CSS ...

javascriptjqueryhtmlcssdatatables

Guide on aligning text along a baseline

CLICK HERE TO ENTER THE INTERACTIVE PLAYGROUND HTML: <div class="first">Text A</div> <div class="second">Text B</div> CSS: div { background-color: rgba(255, 0, 0, 0.3); /* For visualization only */ margin-top: 50px; ...

htmlcss

Creating personalized widths for bootstrap classes with SASS

I am interested in enhancing the bootstrap source code by creating additional w-XX classes. Specifically, I aim to include both w-40 and w-60. According to the documentation, modifying the $sizes variable is necessary for this customization. In my custom. ...

csssassbootstrap-4

Using AngularJS 1 and HTML, creating a modal within a modal or a hidden div that can be shown and hidden in a modal

I already have a modal set up that allows me to add information about "thing1", but I also need to include specific details related to that "thing1" within the same modal. These additional details should appear in the modal when I click on "add more spec ...

javascripthtmlangularjs

Tips for personalizing checkbox group in a Zend framework-2 form

Could someone please help me understand how Zend Framework 2 generates HTML for a form element? Here is an example: $others = new Element\MultiCheckbox('others'); $others->setLabel('Others') ->setAttribute('name ...

phphtmlzend-frameworkzend-framework2zend-form

Bootstrap 4.3 is not designed with a mobile-first approach in mind

I'm currently in the process of creating a bootstrap component for one of my clients' websites. They are still utilizing Bootstrap 4.3. Despite Bootstrap's mobile-first design philosophy, I noticed that when I examine my development site, it ...

htmltwitter-bootstrapbootstrap-4

arranging three divs in a row, with one div expanding to fill the entire height while the other two divs evenly split the remaining

I am attempting to create a content row consisting of 4 divs: 1 container div 3 divs within the container: 1 image - taking up the full height 2 text - sharing the height, but each on a separate line. It should resemble the following: https://i.sstatic.n ...

htmlcss

What is the best way to organize the height property in this particular scenario?

Struggling with adjusting the height attribute for the content within a modal window. Desire for the content in the modal window to occupy 100% of the space, but unfortunately only reaching around 30%. Curious as to why this limitation exists and seeking ...

htmlcssheight

Display the JQuery element that contains a child element with a specified class

On my webpage, I have a dropdown menu (ul) and I want to keep it open when the user is on the page. Specifically, I only want to display the ul item if it contains an li element with the class ".current-menu-item". The code snippet below accomplishes this ...

javascriptjquerycssdrop-down-menushow-hide

Customizable form fields in AngularJS

Consider the scenario of the form below: First Name: string Last Name: string Married: checkbox % Display the following once the checkbox is selected % Partner First Name: Partner Last Name: [Submit] How can a form with optional fields be created in Angu ...

javascripthtmlangularjsforms

Creating a Seamless Bond Between JavaScript and HTML

I've been struggling to find a helpful and straightforward solution to a simple problem. On my web page, I have five image placeholders that should be filled with one of nine random pictures. To achieve this, I wrote a JavaScript code that generates r ...

javascripthtml

The absence of CSV may be attributed to a reference error

I'm new to all of this, so I believe it's a simple mistake on my end, but I can't seem to get it to work. After deploying the code below and clicking on the button, nothing happens. When I inspect the html in my browser, I see an error mess ...

javascripthtmljsoncsvgoogle-apps-script

Contrast between pre-tag in HTML and white-space: pre newline exclusion

I originally thought that the pre(html tag) would act just like 'white-space:pre'. However, it turns out that it does not behave in the same way. <pre> aaa bbb </pre> <p style="white-space:pre;"> aaa bbb </p> The <pr ...

htmlcss

What is the best way to create underlined text that is either left-aligned or centered?

I am looking to replicate this specific style of decoration in a full width container. My goal is to have it aligned to the left of the text and restricted to a maximum width. https://i.stack.imgur.com/H8DXT.png ...

htmlcss