Is there a way to position these divs in a line using inline-block?

I need help aligning two divs with text differently - one to the top left and the other centered but not on the same line.

Here's the layout I'm aiming for:

----------------------------------------------
|Backstage
|Issue 4
|
|                 New Fish Species
|              Migrating To The Town
|

This is the code I currently have:

<div style="display:inline-block; width:565px; text-align:center;">
    <div align="left" style="display:inline-block; vertical-align:top;">
        <strong>
            <h3 style="margin:0px;">BACKSTAGE</h3>
            <h5 style="margin:0px;">Issue 4, June 16, 2003</h5>
        </strong>
    </div>
    <div style="display:inline-block; vertical-align:top; position:absolute;">
        <strong>
            <h1 style="margin:0px;">New Fish Species</h1>
            <h1 style="margin:0px;">Migrating To The Town</h1>
        </strong>
    </div>
</div>

Would appreciate suggestions on how to improve this alignment issue!

htmlcss

Answer №1

A simple way to center the content inside a div is by using text-align: center instead of setting the divs to inline-block. Just apply the style to the second div.

<div style="width:565px;">
  <div>
    <strong>
        <h3 style="margin:0px;">BACKSTAGE</h3>
        <h5 style="margin:0px;">Issue 4, June 16, 2003</h5>
    </strong>
  </div>
  <div style="text-align:center;margin: 20px 0 0;">
    <strong>
        <h1 style="margin:0px;">New Fish Species</h1>
        <h1 style="margin:0px;">Migrating To The Town</h1>
    </strong>
  </div>
</div>

FIDDLE

Answer №2

<div style="width:1000px; margin: 0 auto;">
    <div align="left" style="display:inline-block; vertical-align:top; text-align:left;">
        <strong>
            <h3 style="margin:0px;">BEHIND THE SCENES</h3>
            <h5 style="margin:0px;">Volume 6, July 21, 2005</h5>
        </strong>
    </div>


    <div style="vertical-align: top; margin: 0 auto; width: 50%; text-align: center;">
        <strong>
            <h1>Rare Aquatic Life</h1>
            <h1>Discovering Their Habitat</h1>
        </strong>
    </div>
</div>

These adjustments should set you in the right direction; make note of the changes for better understanding.

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

The HTML dropdown menu becomes crowded with numerous <li menu items, leading to it wrapping

One issue arises when the number of menu items exceeds the capacity to fit on a single line, causing them not to wrap from left to right onto the second line. The desired outcome is for the second line of the menu to start on the left just like the first l ...

htmlcss

Tips on positioning a dropdown item to the far right of the page

I need help moving the language switcher and its items to the right side of the page. I tried using ml-auto but it didn't work for me. Whenever I try to adjust the position with padding-left, all the items end up in the center of the page. Any suggest ...

htmlcssbootstrap-4

What could be causing the media queries to not take effect at a max-width of 425px?

When I try to apply media queries for max-width 768px and max-width 425px, I noticed that the styles intended for max-width 768px are also being applied when the width is 425px. This results in the al-articles-tags-chip-list-container having a width of 600 ...

cssangularlessmedia-queries

How can you style the modal image to center it? Which <div> should you target for styling?

I'm facing an issue with my modal image within a Bootstrap 4 carousel that uses JQuery. When I open the modal, it doesn't appear centered on the screen. Could you advise me on which parent div to style and how? Additionally, how can I ensure the ...

jqueryhtmlcsstwitter-bootstrapcarousel

How can I prevent the interpolation of "${variable}" in HTML when using AngularJS?

I need to display the string ${date} in a div element: <div>please substitute the ${date} as the tag for the name</div> The displayed content should be: please use the ${date} as the substitute tag to the name. However, the browser interpre ...

javascripthtmlangularjshtml-escape-characters

Customizing the Steps Component in Ant Design

Currently, I am utilizing the Steps component from Ant Design. My goal is to enhance its functionality by adding additional components, like a button placed next to each step's description to make it more interactive. Furthermore, I am looking to inc ...

javascripthtmlreactjsantd

What is the best way to integrate an admin template into a website without relying on popular CMS platforms like WordPress?

Do I need to use a WordPress system in the backend in order to utilize an admin template? I've noticed that there are several sleek web admin templates available in Bootstrap. I'm interested in using one of them but unsure how to do so without re ...

javascripthtmlwordpresstwitter-bootstrap

Concealed Sub Menus Within a Vertical Navigation Bar

I've successfully created a Vertical Menu with hidden submenus, but I'm struggling to make the submenu appear on hover. Any suggestions on how to achieve this? Also, I'd like to align the text all the way to the left and remove the bullets f ...

htmlcsswordpressmenunavigation

How to align multiple span elements vertically using HTML and CSS

<div class="row history"> <div class="col col-50 histroy1"> <span class="my-orders">Statistics</span> <span class="my-orders-numbers">27</span> </div> <div class="col col-50 histroy ...

htmlcss

What is the best way to design a form with two dropdown menus, where the options in the second dropdown menu are determined by the selection made in the first dropdown menu

Is it possible to create two select menus using one dictionary in Django, where the values in the second menu are dependent on the key selected in the first menu? In my Django views.py file, I've constructed a dictionary with Projects as keys and cor ...

jquerypythonhtmlcssdjango

What is the best way to track the loading progress of an AJAX page in WordPress?

On my WordPress blog, I utilize a plugin known as Advanced Ajax Page Loader. This handy tool loads the next page or post through AJAX and then places it in a specific div on my site. However, I am now interested in incorporating a progress bar to show the ...

phpjqueryhtmlajaxwordpress

Having trouble with the border styling on my HTML input form

I've been struggling to add a solid black border around the text input in my form. However, no matter what I try, the border doesn't seem to style correctly. Here's the code snippet I'm using: #forminput { border: solid black !import ...

htmlcss

To horizontally center a fixed element in HTML and set its width to match the parent's,

Is there a way to center a fixed div inside its parent element? I'm trying to make the fixed div have the same width as its parent, but it's not working. What could be causing this issue? Check out this example on jsFiddle Here is the HTML code ...

htmlcss

I encountered a problem in Javascript where I was unable to get the video.getCurrentTime() function to display the current time of

While everything else in my code is running smoothly with setInterval, there seems to be an issue with video.getCurrentTime() not displaying in the div id = "test" when the video is playing. I've been trying to figure out why this is happening. Here&a ...

javascripthtml

Ways to limit the display of search result page numbers at the bottom of the search results page using PHP

I'm experiencing an issue with limiting the number of search result pages in my PHP page. Currently, I have 3 fields for user input and the search results are displayed at the bottom. When all fields are selected, the page numbers keep increasing at ...

phpmysqlhtml

The browser is able to cache the selected state of a select tag and will disregard any instances where selected=

When rendering a drop down box, I include a currently selected value using selected="true". <select id="dropDown"> <option selected="true" value="1">value2</option> <option value="2">value3</option> <option va ...

htmlbrowser

Leveraging jquery to retrieve the value of a selected element

Why is this code not functioning properly? Here is the HTML snippet: <img src='picture.jpg'> <select name='blah[0]' onchange='changePicture();'> <option value='default.jpg'>Default</option> ...

jqueryhtml

Discovering descendant div elements

I've been conducting some research, but I'm struggling to find a specific answer for this. Here is the HTML code snippet: <div class="collapsingHeader"> <div class="listItemWrapper"> <div class="itemWrapper"> ...

javascriptjquerycss

Tips on formatting text as bold or italic when tweeting from my website to our Twitter account

Currently, I am utilizing the Twitter OAuth library in conjunction with PHP to publish a tweet from my website directly to my Twitter account. My main objective is to highlight some text while posting, however, I have not been successful in identifying t ...

phphtmlcsstwitter

Is it possible to conceal any spans that are in close proximity to the cursor when hovered over?

Currently, I am working on a project that involves multiple spans placed side by side, with each span containing a letter of the text. My aim is to create a functionality where hovering over one of these spans will not only hide that particular span but al ...

javascripthtmlcss